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