Asp.Net中的複選框MVC 4

Question

我有複選框。當我選擇複選框時，我希望它自動將數據庫中的值更改爲true，然後刷新視圖並調用JQuery方法。

我也有一個複選框和標籤。我希望複選框在選中時消失，標籤中的文字要更改。

<h2>Tasks</h2> 
<fieldset> 
<legend>Tasks</legend> 
    <table class="table"> 
     @foreach(var item in ViewBag.x) 
     { 
      <tr class="clr"> 
       <td style="width:520px"> 
        @item.User.UserName 
       </td> 
       <td> 
        @item.date.ToString("MM/dd/yyyy") 
       </td> 
       </tr> 
      <tr class="clr"> 
       <td> 
        @item.Discription 
       </td> 
       <td></td> 
       </tr> 

       <tr> 
        <td ></td> 
       <td> 
        <div><input type="checkbox" id="ch" class="ch" /><span id="d" >Done</span></div> 
       </td> 

      </tr> 
     } 

我該如何做到這一點在JQuery或ASP MVC？

Image example

Answer 1

你可以聽上的複選框的change事件，然後做一個AJAX調用您的服務器進行更新，你的數據庫，讓你的操作方法返回的響應。你可以檢查這個迴應，並隱藏/顯示任何你想要的。

您可能希望將用戶標識與複選框相關聯，因爲您需要針對特定​​用戶進行此更新。您可以在複選框中將用戶標識保留在html 5數據屬性中。您看起來也很難編碼複選框的id值和循環中的跨度，這將爲多個複選框產生相同的值。 Id值應該是唯一的。所以讓我們從標記中刪除id屬性值，因爲我們現在沒有使用它。

<div> 
    <input type="checkbox" data-user="@item.UserId" class="ch" /> 
    <span class="msg">Done</span> 
</div> 

而JavaScript代碼將

$(function(){ 

    $("input.ch").change(function(e){ 

     var _this=$(this); 

     var userId=_this.data("user"); 
     var isChecked=_this.prop("checked"); 
     $.post("@Url.Action("Change","Home")", { isChecked :isChecked, userId:userId }, 
                      function(re){ 
      if(re.status==="success") 
      { 
      _this.closest("div").find("span.msg").html(re.message); //update span content 
      _this.remove(); // remove checkbox 
      } 
      else 
      { 
      alert("Failed to update!");    
      } 
     }); 
    });  

}); 

我使用Url.Action輔助方法來生成相對URL的操作方法。如果您的腳本包含在剃鬚刀視圖中，則此代碼可以正常工作，但如果您的JavaScript代碼位於外部js文件中，則應該生成應用程序根目錄的路徑，並通過一些變量將其傳遞給您的外部js文件，如in this answer所述。

假設你已經在你的HomeController一個變化行動的方法，接受價值器isChecked

[HttpPost] 
public ActionResult Change(int userId, bool isChecked) 
{ 

    try 
    { 
    // to do: using userId and isChecked param value, update your db 
    return Json(new { status="success", message="done"}); 
    } 
    catch(Exception ex) 
    { 
    //to do : Log ex 
    return Json(new { status="error", message="Error updating!"}); 
    } 
}