Membuat gambar sakelar AJAX di ASP.NET MVC

Jadi saya ingin membuat tombol sakelar untuk tabel, tempat saya dapat melakukan panggilan async untuk memperbarui catatan database (aktifkan/nonaktifkan).

img

Setelah beberapa kali percobaan dan kesalahan, saya berhasil membuatnya berfungsi - tetapi rasanya harus ada cara yang lebih elegan.

  • Saya tidak suka mengulangi tag gambar saya di pengontrol saya, tentu saja... Bagaimana saya bisa menghindarinya dengan cara yang elegan?
  • Apakah ada cara yang lebih baik secara keseluruhan untuk melakukan pendekatan ini selain yang telah saya lakukan?

Ini kode saya di pengontrol:

public ActionResult ToggleEnabled(int id)
    {
        if (Request.IsAjaxRequest())
        {
            var p = this.PageRepository.GetPage(id);
            p.Enabled = p.Enabled != true;
            this.PageRepository.Edit(p);
            return p.Enabled ? Content("<img src='/Content/icons/tick.png' border=0  />") : Content("<img src='/Content/icons/tick_grey.png' border=0  />");
        }
        return Content("Error");
    }

Dan pemandangannya...:

<% var img = Model.Enabled ? "tick.png" : "tick_grey.png"; %>
<% foreach (var item in Model)
       { %>
...
<td align="center">
    <%=Ajax.ActionLink("[replacethis]", 
        "ToggleEnabled", 
                new { id = Model.ID }, 
                new AjaxOptions { UpdateTargetId = "toggleimage" + Model.ID }).Replace("[replacethis]",
                string.Format("<div id='toggleimage{0}'><img src='/Content/icons/{1}' border='0' alt='toggle'/></div>", 
                Model.ID, Model.Enabled ? "tick.png" : "tick_grey.png"))%>
</td>
...
<% } %>

Trik/hack dengan Ajax.Actionlink menggunakan gambar ditemukan di sini.


asp.net-mvc asp.net-ajax
person Kjensen    schedule 03.07.2009    source sumber
comment
Saya sebenarnya menyukai cara Anda melakukannya. Saya tidak melihat cara yang jelas untuk membuatnya lebih sederhana. Seperti yang Anda tunjukkan, logika gambar Anda diduplikasi di pengontrol dan tampilan, tetapi Anda memerlukan logika dalam tampilan untuk memuat halaman, dan Anda memerlukan logika di pengontrol untuk panggilan Ajax.   -  person Robert Harvey    schedule 04.07.2009
comment
Mencoba menulis ulang ini di pisau cukur Mvc 3, saya mendapatkan kesalahan saat mengganti. Dikatakan System.Web.MVC.MVChtmlString tidak mengandung definisi...   -  person Chaka    schedule 23.12.2012
comment
Adakah bantuan tentang cara menulis ulang dengan pisau cukur?   -  person Chaka    schedule 23.12.2012

Jawaban (2)


arrow_upward
3
arrow_downward

Bagaimana dengan rendering kotak centang berdasarkan apakah model diaktifkan atau tidak.

Di jQuery, Anda dapat mengganti kotak centang tersebut dengan gambar Anda. Sesuatu seperti

Your document.ready code may look like,

$(document).ready(
function()
{
    $('.enabledCheckbox').each(
        function()
        {
            var image = $(this).checked ? 'tick.png' ? 'tick_grey.png';
            $(this).parent.click(
                function()
                {
                    if($(this).is('image'))
                        toggleEnabledStatus(); //write code in toggleEnabledStatus to toggle the state of the model on server side.
                }     
                );
            $(this).parent.html('<img src=' + image + '/>');
        }
    );
}
);

Alternatifnya, Anda dapat menggunakan plugin seperti jquery-checkbox untuk memberikan gaya mewah apa pun yang Anda inginkan. mungkin terpikirkan.

person SolutionYogi    schedule 04.07.2009
comment
Menurut saya ini adalah cara terbaik untuk melakukannya - dengan cara itu Anda meninggalkan halaman html hanya dengan html dan tidak mengacaukannya dengan semua kode tambahan itu - person sirrocco; 04.07.2009

arrow_upward
0
arrow_downward

Jika keanggunan adalah yang Anda inginkan, saya akan menggunakan permintaan layanan web jQuery untuk membuat permintaan AJAX ke halaman ASPX yang mendasarinya. Ini sangat elegan, karena yang Anda perlukan di halaman ASPX Anda hanyalah [WebMethod] statis untuk melakukan tindakan sebenarnya, dan panggilan $.ajax() dari jQuery.

person Dave Markle    schedule 04.07.2009