jquery - 基于 ASP.NET 模型的表单重置

Question

我有一个使用模型填充某些字段的表单。

我有一个复选框列表，我想要一个重置按钮，将所有复选框重置为页面加载时的状态。如何使用当前模型刷新该表单，有效地删除所做的任何更改？

例如，有三个复选框，框 1 被选中，框 2 和 3 未被选中。用户检查了 2 和 3，但不记得他更改了什么并且不想更改任何不好的东西，因此他想点击重置按钮，将复选标记恢复为默认值，同时仍保留在表单上。

我确定会涉及一些 ajax，但我看不到如何使用当前模型重新加载页面。

这甚至可能吗？

Answer 1

您可以将原始值存储在数据属性中。见例子。这样您就不必返回服务器（并显示加载指示器、处理错误情况等），因为您在更改之前拥有原始值的副本。

HTML

<input type="checkbox" checked data-was-checked="checked">Option 1</input>
<input type="checkbox">Option 2</input>
<input type="checkbox" checked data-was-checked="checked">Option 3</input>
<input type="checkbox">Option 4</input>
<button id="reset">Reset</button>

JAVASCRIPT

$("#reset").click(function () {
    $("[type=checkbox]").each(function (index, cb) {
        cb.checked = !!cb.getAttribute("data-was-checked");
    });
});

Answer 2

一种方法是使用 Action Partial 呈现您的复选框。Action Partial 是对 ActionResult 方法的调用，该方法将（可选）模型或 Viewbag 返回到 Partial View。Partial View 可以使用传递的逻辑来决定如何设置和呈​​现复选框。

<div id='divchkbox'>
    @Html.Action("/Tools/checkboxes/{id}")
</div>

链接和事件处理程序

     $(document).ready(function () {

          $('#resetbtn').click(function(){
               $('divchkbox').load("/Tools/checkboxes/{id}");
          }
   });