Webform中的前后端分离

Webform常用的开发方式

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

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

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

 

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

 

场景： 保存列表信息

 

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

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

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

 <script type="text/javascript">
    //保存
     function savepro() {
         boxAlpha();

         var contentall = "";
         $(".project").each(function () {
             var idx = $(this).attr("id").replace("txtproject", "");
             contentall += $("#hidproid" + idx).val() + "&"; //id
             contentall += $("#txtprono" + idx).val() + ";";
         });
         $.ajax({
             type: 'POST',
             cache: false,
             dataType: 'json',
             url: "ajaxmethod.aspx?random=" + Math.random(),
             data: {
                 contentall: contentall, Method: "UpdateEquipInfo"
             },
             success: function (data, textStatus) {
                 boxAlpha();
                 if (data.Status == true) {
                     alert("保存成功");
                     window.location.reload();
                 }
                 else {
                     alert(data.Message);
                 }
             }
         })
     </script>
  

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

  新建ajaxMethod.aspx

  #region JSON返回类型
     /// <summary>
     /// JSON返回类型
     /// </summary>
     private class Act
     {
         /// <summary>
         /// 状态代码
         /// </summary>
         public bool Status { get; set; }
         /// <summary>
         /// 错误代码
         /// </summary>
         public int ErrorNo { get; set; }
         /// <summary>
         /// 状态消息
         /// </summary>
         public string Message { get; set; }
         /// <summary>
         /// 自定义数据
         /// </summary>
         public object MyObject { get; set; }

     }
     #endregion

      #region
      if (Request.Params["Method"] == "UpdateEquipInfo")
         {
             Act act = new Act();
             act.Status = false;
             try
             {
                 act.Status = true;
                 //业务代码
                 //DoSomething();
             }
             catch (Exception ex)
             {
                 act.Message = ex.Message;
                 act.Status = false;
             }
             Response.Write(JsonConvert.SerializeObject(act));
         }
         #endregion