无法将局部视图中的复选框绑定到主模型（MVC）

Question

我一直运行问题，我一直在寻找答案，但没有任何帮助。

我有一个模型：

public class Filters
{
    public bool Filter1 { get; set; }
    public bool Filter2 { get; set; }
    public bool Filter3 { get; set; }
    etc...
}

我有一个包含多个复选框的局部视图并尝试了多项操作：

<input id="Filter1" name="Filter1" type="checkbox" value="true">
<input type="hidden" value="false" name="Filter1" />

和

@Html.CheckBoxFor(model => model.Filter1)

那我有一个主模型：

public class Dashboard
{
    ...
    public Filters FiltersDashboard { get; set; }
}

然后在主视图的某处插入局部视图，如下所示：

@Html.EditorFor(model => model.FiltersDashboard, "Filters")

在 jquery 中，我在单击复选框并显示复选框的值时执行警报。该值保持不变。

<script>
    $("#Filter1").click(function () {
        alert(" @Model.FiltersDashboard.Filter1 ")
    });
</script>

编辑：也在 .submit 函数中尝试过，但模型值保持不变：

<script>
    $("#searchform").submit(function (event) {
        alert(" @Model.FiltersDashboard.Filter1 ")
        event.preventDefault();
    });
</script>

这告诉我有些东西没有正确绑定，但我不知道我做错了什么。

此外，我不使用复选框列表的原因是因为我需要为每个过滤器执行不同的查询，所以我需要它们的特定名称和绑定。

Answer 1

@Model.FiltersDashboard.Filter1 是剃刀代码，在发送到视图之前在服务器上执行，所以它只会 return 属性的初始值（如果你检查查看源代码，您会看到初始值已硬编码在您的脚本中）。

但是，如果您的脚本正在执行，则意味着您在第二个代码片段中使用了手动 <input> 标记，在这种情况下，您的视图不会绑定到您的模型，因为正确的 name 属性将是 name="FiltersDashboard.Filter1"，关联的 id 属性将是 id="FiltersDashboard_Filter1".

始终使用强类型 @Html.CheckBoxFor()，这将为 2 向模型绑定和客户端验证生成正确的 html。

另请注意，它只需要 @Html.EditorFor(model => model.FiltersDashboard) - 第二个参数是不必要的。

那么脚本应该是

<script>
    $('#FiltersDashboard_Filter1').click(function () {
        var isChecked = $(this).is(':checked');
        alert(isChecked);
    });
</script>

无法将局部视图中的复选框绑定到主模型（MVC）

Can't bind checkbox in partial view to the main model (MVC)

checkbox

asp.net-mvc

partial-views

model-binding