如何使 asp.net mvc 复选框触发操作？答案

【问题标题】：How can I make an asp.net mvc checkbox trigger an action?如何使 asp.net mvc 复选框触发操作？
【发布时间】：2016-01-13 00:28:21
【问题描述】：

当有人选中代表行上位字段的框时，我想更新数据库。我一直在回答这个问题：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，我做错了什么？

【问题讨论】：

data-url 属性现在只包含一些 url。需要有一些 Javascript 使用它。
有很多方法可以解决这个问题，但是当您使用 AJAX 调用服务器端点（可能是 Web API 方法，因为您使用的是 ASP.net MVC）选中该框。 “快速而肮脏”的答案是为您使用 jQuery 选择器复选框并使用 $([selector]).change(function(){}); 注册一个函数；您还可以将复选框绑定到 kendo viewmodel 函数或任何数量的其他方法。
你也可以看这里：stackoverflow.com/questions/1784412/…
@EricBurcham 关键是在复选框更改时发送 ajax 请求。
@RezaAghaei - 我认为我的评论很清楚，但你是绝对正确的。

标签： c# asp.net-mvc checkbox

【解决方案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>
}

【讨论】：

, class= "toggle" 在这里给我一个语法错误。这是一个有效的关键字吗？
对不起，class是保留字，用@转义-@class = "toggle"
您好如何在 Ajax 成功/失败时更新行。例如如果Status 是行中的一个列。如果 Approved/Rejected 是带有一些注释的单选按钮，那么如果我想 -- 切换行的颜色，并更新行中的状态值。

【解决方案2】：

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

正如Eric 在 cmets 中所述，您可以使用多种不同的方式触发该操作。例如，将此脚本放入您的代码中：

<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>

以上代码，每次勾选或取消勾选复选框时触发动作，您可以简单地检查复选框是否被勾选，然后发送ajax请求。

【讨论】：

@EricBurcham 谢谢:)
要像您尝试那样传递正确的宏名称，您必须将其放在 foreach 循环中。你不应该那样做。
@JB06 哪个宏名称？哪个循环？做什么？ ;)
除非你把它放在 foreach 中，否则你的 url 字符串将不起作用，否则你将如何使用 @item？
非常好！我还没有见过那个循环；）这样我也不应该使用 Id！

【解决方案3】：

原因是当checkbox未选中&form提交时；没有与复选框相关的表单字段是submitted。您要么必须使用 JavaScript 添加 hidden 变量，如 Post the checkboxes that are unchecked 中所述，要么在选中复选框时进行 Ajax 命中。 jQuery Ajax checkbox state

【讨论】：

【解决方案4】：

这可以在没有脚本的情况下使用 fontawesome 和带有标准控制器的锚来完成。

在布局页面中添加指向 css 文件的链接。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"           
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" 
crossorigin="anonymous">

在您的视图或显示模板中添加锚点

<a asp-controller="MacroStatus" asp-action="ToggleClaim" asp-route- 
id="item.Macro_Name">
@if (item.Claimed)
{
    <span class="fas fa-toggle-on fa-2x"></span>
}
else
{
    <span class="fas fa-toggle-off fa-2x"></span>
}
</a>

它看起来像一个复选框并且是可点击的，如果您在一个视图中有多个实例（例如，如果您正在为一组对象使用显示模板），它也很棒。

通过使用切换开/关部分的组件，上述内容可以变得非常干净和可重复使用。

<vc:toggle-on-off toggle="@item.Claimed"></vc:toggle-on-off>

然后它看起来像：

<a asp-controller="MacroStatus" asp-action="ToggleClaim" asp-route- 
id="item.Macro_Name">
    <vc:toggle-on-off toggle="@item.Claimed"></vc:toggle-on-off>
</a>

【讨论】：