Jquery @当使用来自AJAX调用的响应填充div时，Html.Hidden的值错误

我有一个简单的视图，其中包含一个

div

，其中包含一个局部视图。局部视图包含项目列表。每个项目要么以排除状态显示（标记为XXX），要么显示一个按钮以排除该项目（使用

Ajax.BeginForm

），以提交

Id

，更新其状态并重新绘制列表

当第一次绘制页面时，它可以正常工作，但是当Ajax调用后重新呈现局部视图以排除某个项时，而不是列表中的每个项都有其唯一的

itemId

，它们都具有表单提交排除的项的

itemId

Index.cshtml（主视图）

示例输出，以帮助说明问题：

页面加载时的模型列表div

<div id="modelList">
    <ul>
        <li>
            <label>Item 1</label>
<form action="/Home/ExcludeItem" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#modelList" id="form0" method="post">
                        <input id="id" name="id" type="hidden" value="1" /><!--                        <input type="hidden" name="id" value="1" />  -->
                        <input type="submit" value="Check" />
</form>        </li>
        <li>
            <label>Item 2</label>
<form action="/Home/ExcludeItem" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#modelList" id="form1" method="post">
                        <input id="id" name="id" type="hidden" value="2" /><!--                        <input type="hidden" name="id" value="2" />  -->
                        <input type="submit" value="Check" />
</form>        </li>
        <li>
            <label>Item 3</label>
<form action="/Home/ExcludeItem" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#modelList" id="form2" method="post">
                        <input id="id" name="id" type="hidden" value="3" /><!--                        <input type="hidden" name="id" value="3" />  -->
                        <input type="submit" value="Check" />
</form>        </li>
        <li>
            <label>Item 4</label>
<form action="/Home/ExcludeItem" data-ajax="true" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#modelList" id="form3" method="post">
                        <input id="id" name="id" type="hidden" value="4" /><!--                        <input type="hidden" name="id" value="4" />  -->
                        <input type="submit" value="Check" />
</form>        </li>
</ul>
</div>

项目1


项目2


项目3


项目4

提交排除项目2后的模型列表（注意所有输入都有value=“2”）

项目1


项目2
XXX


项目3


项目4

该问题是由以下事实引起的：所有

输入

元素都具有相同的id/名称（通过一种方式，具有多个相同id的元素会导致无效的HTML），并且ASP.NET MVC正在基于

ModelState

而不是您的模型的数据重新绑定输入（这是一种机制，默认情况下用于返回带有用户输入值的表单）

要避免从

ModelState

绑定，只需在POST操作中清除它：

[HttpPost]
public ActionResult ExcludeItem(int id)
{
    _items.Find(x=>x.Id == id).Excluded = true;
    ModelState.Clear();
    return PartialView("ItemList", _items);
}

我还建议更改调用

Html.Hidden

，以避免重复ID，如下所示：

@Html.Hidden("id", item.Id, new { @id = "id_" + item.Id });

<input id="id_4" name="id" type="hidden" value="4" />

通过这种方式，您的输入应如下所示：

@Html.Hidden("id", item.Id, new { @id = "id_" + item.Id });

<input id="id_4" name="id" type="hidden" value="4" />

---

这是完全有效的，并且仍然会正确绑定。

这正是我想要的，谢谢。了解了解决方案后，我对它的工作原理进行了一些很好的讨论。

@Html.Hidden("id", item.Id, new { @id = "id_" + item.Id });

<input id="id_4" name="id" type="hidden" value="4" />