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

关键点是在复选框改变时发送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>

上面的代码会在您每次选中或取消选中复选框时触发操作，您只需检查复选框是否已选中，然后发送ajax请求。

Answer 3

原因是当取消选中复选框时＆amp;表格已提交;没有与复选框相关的表单字段为submitted。您必须使用JavaScript添加hidden变量，如Post the checkboxes that are unchecked中所述，或者在选中复选框时进行Ajax命中。 jQuery Ajax checkbox state

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

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

4 个答案: