Question

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

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

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

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

这甚至可能吗？

Answer 1

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

<强> 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方法的调用，该方法将（可选）Model或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}");
          }
   });

基于ASP.NET模型重置表单

2 个答案: