Tạo một hình ảnh chuyển đổi AJAX trong ASP.NET MVC

Question

Vì vậy, tôi muốn tạo một nút chuyển đổi cho một bảng, nơi tôi có thể thực hiện cuộc gọi không đồng bộ để cập nhật bản ghi cơ sở dữ liệu (bật/tắt).

img http://i41.tinypic.com/os4vua.jpg

Sau một số thử và sai, tôi đã quản lý để có được nó làm việc - nhưng nó cảm thấy như có phải là một cách thanh lịch hơn.

• Tôi không thích lặp lại thẻ hình ảnh trong bộ điều khiển của mình, rõ ràng ... Làm cách nào để tránh điều đó một cách thanh lịch?
• Có cách nào tốt hơn để tiếp cận điều này mà tôi đã làm không?

Đây là mã của tôi trong bộ điều khiển:

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"); 
    } 

Và xem ...:

<% 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> 
... 
<% } %> 

Bí quyết/hack với Ajax.ActionLink sử dụng một hình ảnh đã được tìm thấy here .

Answer 1

Hộp kiểm hiển thị dựa trên việc mô hình có được bật hay không.

Trong jQuery, bạn có thể thay thế các hộp kiểm đó bằng hình ảnh của bạn. Một cái gì đó như

đang document.ready của bạn có thể trông giống như,

$(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 + '/>'); 
     } 
    ); 
} 
); 

Ngoài ra, bạn có thể sử dụng plugin như jquery-checkbox để cung cấp cho họ bất kỳ phong cách lạ mắt, bạn có thể nghĩ đến.

Answer 2

Nếu thanh lịch là thứ bạn muốn, tôi sẽ sử dụng yêu cầu dịch vụ web jQuery để thực hiện yêu cầu AJAX cho trang ASPX bên dưới. Nó khá darned thanh lịch, bởi vì tất cả các bạn cần trên trang ASPX của bạn là một [WebMethod] tĩnh để thực hiện các hành động thực tế, và một $ .ajax() gọi từ jQuery.