CheckBox in Asp.Net MVC 4

CheckBox in Asp.Net MVC 4

本文关键字：MVC Net Asp in CheckBox      更新时间：2023-09-26

我有复选框。当我选中复选框时，我希望它自动将其在数据库中的值更改为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或ASPMVC中做到这一点？

图像示例

您可以监听复选框上的change事件，然后对服务器进行ajax调用以更新数据库，并让您的操作方法返回响应。您可以检查此响应并隐藏/显示您想要的任何内容。

您可能希望将用户id与复选框相关联，因为您需要针对特定用户进行此更新。。您可以在复选框中保留html 5数据属性中的用户id。此外，看起来您正在对循环中的复选框和跨度的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文档，如本答案所述。

假设您的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!"});
  }
}
相关文章：