Webform中的前后端分离

Webform常用的开发方式

（1）运用服务器端控件的aspx页面

（2）一般处理程序+html静态页面+Ajax(所谓的前后端分离)

（3）一般处理程序+html模板引擎

 

这里简单记录 html+Aajx的方式

 

场景： 保存列表信息

 

1.提交按钮，触发ajax方法

1   <div style="text-align: right; padding: 10px 35px;">
2       <input type="button" value=" 保存 " class="submit"  onclick="javascript: savepro();" />
3   </div>

调用$.ajax前 需要引用jquery.js

 1 <script type="text/javascript">
 2    //保存
 3     function savepro() {
 4         boxAlpha();
 5         
 6         var contentall = "";
 7         $(".project").each(function () {
 8             var idx = $(this).attr("id").replace("txtproject", "");
 9             contentall += $("#hidproid" + idx).val() + "&"; //id
10             contentall += $("#txtprono" + idx).val() + ";";
11         });
12         $.ajax({
13             type: 'POST',
14             cache: false,
15             dataType: 'json',
16             url: "ajaxmethod.aspx?random=" + Math.random(),
17             data: {
18                 contentall: contentall, Method: "UpdateEquipInfo"
19             },
20             success: function (data, textStatus) {
21                 boxAlpha();
22                 if (data.Status == true) {
23                     alert("保存成功");
24                     window.location.reload();
25                 }
26                 else {
27                     alert(data.Message);
28                 }
29             }
30         })
31     </script>
32  

2.aspx页面处理html提交的数据

  新建ajaxMethod.aspx

  

 1  #region JSON返回类型
 2     /// <summary>
 3     /// JSON返回类型
 4     /// </summary>
 5     private class Act
 6     {
 7         /// <summary>
 8         /// 状态代码
 9         /// </summary>
10         public bool Status { get; set; }
11         /// <summary>
12         /// 错误代码
13         /// </summary>
14         public int ErrorNo { get; set; }
15         /// <summary>
16         /// 状态消息
17         /// </summary>
18         public string Message { get; set; }
19         /// <summary>
20         /// 自定义数据
21         /// </summary>
22         public object MyObject { get; set; }
23         
24     }
25     #endregion
26  
27      #region
28      if (Request.Params["Method"] == "UpdateEquipInfo")
29         {
30             Act act = new Act();
31             act.Status = false;
32             try
33             {
34                 act.Status = true;
35                 //业务代码
36                 //DoSomething();
37             }
38             catch (Exception ex)
39             {
40                 act.Message = ex.Message;
41                 act.Status = false;
42             }
43             Response.Write(JsonConvert.SerializeObject(act));
44         }
45         #endregion