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

巴特西

Webform中的前后端分离

最新文章

热门文章