如何使一个asp.net mvc复选框触发一个动作？

Question

我想更新数据库时，有人检查一个代表行上的位字段的框。我一直都会响起这样一个问题：Ajax.ActionLink(...) with checkbox 这是我在CSHTML文件代码：

@foreach (var item in Model) { 
<tr> 
    <td> 
     @Html.DisplayFor(modelItem => item.Macro_Name) 
    </td> 
    <td> 
     @Html.CheckBoxFor(modelItem => item.Claimed, new { id = item.Macro_Name, data_url = Url.Action("ToggleClaim", "MacroStatus")}) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Date_Claimed) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Username) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Finished) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Date_Completed) 
    </td> 
    <td> 
     @Html.ActionLink("Edit", "Edit", new { id=item.Macro_Name }) | 
     @Html.ActionLink("Details", "Details", new { id = item.Macro_Name }) | 
     @Html.ActionLink("Delete", "Delete", new { id = item.Macro_Name }) 
    </td> 
</tr> 
} 

在MacroStatusController类，我有以下作用：

public ActionResult ToggleClaim(string id) 
    { 
     if (id == null) 
     { 
      return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
     } 

     MacroStatus macroStatus = db.MacroStatus1.Find(id); 
     if (macroStatus == null) 
     { 
      return HttpNotFound(); 
     } 

     if (ModelState.IsValid) 
     { 
      macroStatus.Date_Claimed = DateTime.Now; 
      db.Entry(macroStatus).State = EntityState.Modified; 
      db.SaveChanges(); 
     } 

     return new HttpStatusCodeResult(HttpStatusCode.OK); 
    } 

然而，ToggleClaim不在检查或取消选中该框时运行。没有编译错误。这是我第一次尝试使用asp.net mvc，我做错了什么？

Answer 1

您将需要ajax。 首先，将一个类添加到复选框，以便您将钩子附加您的点击事件。

@Html.CheckBoxFor(modelItem => item.Claimed, new { id = item.Macro_Name, @class = "toggle" data_url = Url.Action("ToggleClaim", "MacroStatus")})

现在添加您的JavaScript。

@section scripts { 
    <script> 
     $(function() { 
      $('.toggle').change(function() { 
       var self = $(this); 
       var url = self.data('url'); 
       var id = self.attr('id'); 
       var value = self.prop('checked'); 

       $.ajax({ 
        url: url, 
        data: { id: id }, 
        type: 'POST', 
        success: function(response) { 
         alert(response); 
        } 
       }); 
      }); 
     }); 
    </script> 
} 

Answer 2

原因是，当复选框未选中时&表单被提交;没有与复选框相关的表单字段是submitted。您必须使用JavaScript来添加hidden变量（如Post the checkboxes that are unchecked中所述），或者在复选框被选中时创建Ajax命中。 jQuery Ajax checkbox state

Answer 3

关键是发送一个ajax请求时，复选框更改。

正如在Eric的评论中所述，您可以使用许多不同的方式触发该操作。例如，把这个脚本在你的代码：

<script> 
    $(function() { 
     $('#Claimed').change(function() { 
      $.ajax({ 
       url: '/ToggleClaim/MacroStatus/@item.Macro_Name', 
       cache: false, 
       method: 'GET', 
       success: function (data) { alert('success'); }, 
       error: function() { alert('error'); } 
      }); 
     }); 
    }); 
</script> 

，正确的复选框，这样的代码：

<td> 
    @Html.CheckBoxFor(modelItem => item.Claimed) 
</td> 

上面的代码，触发每次选中或取消选中该复选框时的动作，你可以简单地检查复选框是否被选中，然后发送一个jax请求。