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 调用以更新您的数据库并让您的操作方法返回响应。您可以检查此响应并隐藏/显示您想要的任何内容。

您可能希望将用户 ID 与复选框相关联，因为您需要针对特定​​用户进行此更新。您可以将用户 ID 保留在复选框中的 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 辅助方法来生成操作方法的相对网址。如果您将脚本包含在 razor 视图中，此代码将起作用，但如果您的 javascript 代码位于外部 js 文件中，则应构建应用程序根目录的路径并通过一些变量将其传递给外部 js 文件，如 @987654321 所述@。

假设您的 HomeController 中有一个接受 isChecked 值的 Change 操作方法

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