2013-05-01 78 views
0

我正在尋找一種方法來重置我的表單,當用戶編輯值並點擊重置按鈕時。我如何編寫重置功能

我的表單包含: 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; } 

    } 
} 

因此,通過examle當用戶取消選中複選框1和編輯值1從Field2到199並點擊重置按鈕,所有元素都重置爲MyModel的值()

誰能幫助我?

+2

重置按鈕不需要任何客戶端代碼。 – RobG 2013-05-01 08:28:49

+0

客戶端代碼有可能嗎? – user1809035 2013-05-01 08:30:05

+0

當然有可能:''或''。你的選擇。 – RobG 2013-05-01 09:35:40

回答

1

這實際上很簡單,如果你不想做客戶端,它會重新加載表單。不過,我猜你想要做這個客戶端。

如果你不想下去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" />