Question

我正在寻找一种方法来重置我的表单，当用户编辑值并点击重置按钮时。

我的表单包含： 2个文本域 4个复选框

我在模型中制作的6个元素的值：

    public class MyModel
    {
        public MyModel()
        {
            Field1 = 8;
            Checkbox1 = true;
            Checkbox2 = true;
            Checkbox3 = true;
            Checkbox4 = true;
            Field2 = 1; 
        }

        [DisplayName("TextField 1")]
        [Range(4, 64, ErrorMessage = "Test Error")]
        public int Field1 { get; set; }

        [DisplayName("CheckBox 1")]
        public bool Checkbox1 { get; set; }

        [DisplayName("CheckBox 2")]
        public bool Checkbox2 { get; set; }

        [DisplayName("CheckBox 3")]
        public bool Checkbox3 { get; set; }

        [DisplayName("CheckBox 4")]
        public bool Checkbox4 { get; set; }

        [DisplayName("TextField 2")]
        [Range(1, 50, ErrorMessage = "Test Error")]
        public int Field2 { get; set; }

    }
}

因此，当用户取消选中复选框1并将值1从Field2编辑为199并点击重置按钮时，所有元素都将重置为MyModel（）的值

谁可以帮我这个？

Answer 1

只需使用<input type="reset" />即可。你不需要jQuery或刷新，至少从marquee标签开始，这个功能已被内置到浏览器中。

Answer 2

如果您不想在客户端执行此操作，这实际上非常简单，只需重新加载表单即可。但是，我猜你想要来做这个客户端。

如果你不想沿着MVVM路线（KnockoutJS等）走下去，那么这就是基本的想法（在jQuery中）：

$(function() {
   // You can make this more efficient by holding the element Ids in the array and setting their values in a loop.
   var prevValues = {};
   prevValues.checkbox1 = $('#checkbox1').is(":selected"); // true or false

   $('#reset').on("click", function() {
       // reset values here
       $('#checkbox1').prop("checked", prevValues.checkbox1);
   });
});


<input type="checkbox" id="checkbox1" />

<input type="button" id="reset" />

我该如何写一个复位功能

2 个答案: