zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    627. Swap Salary
    176. Second Highest Salary
    596. Classes More Than 5 Students
    183. Customers Who Never Order
    181. Employees Earning More Than Their Managers
    182. Duplicate Emails
    175. Combine Two Tables
    620. Not Boring Movies
    595. Big Countries
    HDU 6034 Balala Power! (贪心+坑题)
  • 原文地址:https://www.cnblogs.com/ywkcode/p/11110224.html
Copyright © 2011-2022 走看看