首页 > Web开发 > 详细

Webform中的前后端分离

时间:2019-06-30 17:03:34      阅读:148      评论:0      收藏:0      [点我收藏+]
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

 

Webform中的前后端分离

原文:https://www.cnblogs.com/ywkcode/p/11110224.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!