使用AjaxPro结合ASP.NET实现无刷新提交并更新数据

关于AjaxPro的介绍见上一贴

效果图:

此例aspx源代码没有使用ASP.NET控件,交互完全由Javascript通过AjaxPro访问ASP.NET后台并更新

实现起来也很简单,主要的html代码:

1. "OnLoad();"> 
2. "form1" runat="server">  
3.  
4. "border-right: black 1px solid; border-top: black 1px solid; font-size: 11px; border-left: black 1px solid; border-bottom: black 1px solid; font-family: Tahoma; background-color: gainsboro">  
    
    
    
    
    

   "width: 43px; height: 1px;"> Name:

   "width: 131px; height: 1px;"> "label1"> (Loading Name...)   "editlabel" style="display:none;">   "namebox" type="text" style="height: 13px; font-size: 11px;" />

   "width: 57px; height: 1px;">"editbtn" type="button" οnclick="editlabel()" value="Edit" style="width: 83px"/>   "okbtn" type="button" οnclick="ok()" value="OK" style="width: 83px; display:none;"/>

    

javascript代码:

1. function OnLoad() 
2. {  
3. Test.MyAjaxTest.GetLabelText(4,onLoad_callback);  
4. }  
5. function onLoad_callback(res)  
6. {  
7. document.getElementById("label1").innerHTML=res.value;  
8. }  
9. function editlabel()  
10. {  
11. document.getElementById("label1").style.display="none";  
12. document.getElementById("editlabel").style.display="";  
13. form1.namebox.value=document.getElementById("label1").innerHTML;  
14. form1.editbtn.style.display="none";  
15. form1.okbtn.style.display="";  
16. }  
17. function ok()  
18. {  
19. document.getElementById("editlabel").style.display="none";  
20. document.getElementById("label1").style.display="";  
21. Test.MyAjaxTest.SetLabelText(form1.namebox.value,setLabelText_callback);  
22. document.getElementById("label1").innerHTML="(Submiting...)";  
23. form1.okbtn.style.display="none";  
24. form1.editbtn.style.display="";  
25. }  
26. function setLabelText_callback(res)  
27. {  
28. document.getElementById("label1").innerHTML=res.value;  
29. } 

ASP.NET后台(把变量设置为静态,以防止每次提交数据都初始化它,这里只是实例,真正应用肯定是要另外写数据访问层):

1. static string Name = "DaHuang"; 
2. protected void Page_Load(object sender, EventArgs e)  
3. {  
4. AjaxPro.Utility.RegisterTypeForAjax(typeof(MyAjaxTest));  
5. }
6. [AjaxPro.AjaxMethod]  
7. public string GetLabelText(int a)  
8. {  
9. string res;  
10. res = Name;  
11. Thread.Sleep(500);  
12. return res;  
13. }  
14. [AjaxPro.AjaxMethod]  
15. public string SetLabelText(string s)  
16. {  
17. Thread.Sleep(500);  
18. Name = s;  
19. return Name;  
20. } 

初学Ajax,原来对Javascript的应用也很浅少,上面的代码也是慢慢琢磨一步一步写的,代码肯定不够优雅...不要鄙视我...- -b