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