1. 程式人生 > >JQuery EasyUi之介面設計——母版頁以及Ajax的通用處理(三)

JQuery EasyUi之介面設計——母版頁以及Ajax的通用處理(三)

前面介紹過JS了,就這樣個人認為還不夠用。

因為JS檔案是死的,無法使用伺服器程式碼,自然不夠靈活。那麼通過母版頁就完善了這一點。那麼下面舉一個例子——控制元件賦值。

控制元件賦值

前面說過easyui的form自帶驗證、提交、重置與賦值,那麼如何利用這個賦值呢?千篇一律的寫賦值程式碼總是那麼的令人厭煩,尤其是元素比較多的時候,用反射嘛又怕別人詬病,那麼就用JS來負責這一切吧.

那麼如何做到通用呢?那母版頁就是不錯的選擇。

下面貼出母版頁完整程式碼:

   1: <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Form.master.cs"
Inherits="Singer.Form" %>
   2:  
   3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4: <html xmlns="http://www.w3.org/1999/xhtml">
   5: <head runat="server">
   6:     <title></title>
   7:     <link href="/Scripts/jquery-easyui-1.2.5/themes/default/easyui.css"
rel="stylesheet"
   8:         type="text/css" />
   9:     <link href="/Styles/form.css" rel="stylesheet" type="text/css" />
  10:     <link href="/Scripts/jquery-easyui-1.2.5/themes/icon.css" rel="stylesheet" type="text/css" />
  11:     <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"
></script>
  12:     <script src="/Scripts/jquery-easyui-1.2.5/jquery.easyui.min.js" type="text/javascript"></script>
  13:     <script src="/Scripts/jquery-easyui-1.2.5/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
  14:     <script src="/Scripts/common.js" type="text/javascript"></script>
  15:     <asp:ContentPlaceHolder ID="head" runat="server">
  16:     </asp:ContentPlaceHolder>
  17: </head>
  18: <body>
  19:     <script type="text/javascript">
  20:         var ajaxUrl = '/Ajax/Common.ashx';
  21:         //表單ID
  22:         var id = '<%=Request.QueryString["ID"] %>';
  23:         //是否自動載入表單,編輯用
  24:         var autoLoad = '<%=Request.QueryString["autoLoad"] %>';
  25:         //Ajax型別【頁面名】
  26:         var typeCode = "<%=System.IO.Path.GetFileName(HttpContext.Current.Request.Path) %>";
  27:         $(function () {
  28:             if ($.isFunction(window.setAjaxUrl)) {
  29:                 setAjaxUrl.call();
  30:             }
  31:             //載入資料
  32:             if (autoLoad == 1 && id !== undefined && id != '') {
  33:                 $('#ff').form('load', ajaxUrl + '?autoLoad=1&Type=' + typeCode + '&id=' + id + "&_" + Math.floor(Math.random() * (1000 + 1)));
  34:  
  35:             }
  36:         });
  37:     </script>
  38:     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
  39:     </asp:ContentPlaceHolder>
  40: </body>
  41: </html>

從程式碼中可以看出:

  1. 頁面上定義了3個全域性JS變數,有註釋,我就不贅述了。
  2. setAjaxUrl函式在表單賦值載入前執行,可以實現用於更改上面的3個變數的值,或者作其他作用,建議命名為beforeFormLoad。
  3. typeCode的值為頁面名,比如“index.aspx”,提交給處理程式用於判斷是哪個頁面,以便返回對應的JSON資料。

後臺處理邏輯

那麼處理程式如何返回對應的JSON資料呢?先看看大體結構:

image

   1: case "ADMINUSER_ADD.ASPX":
   2:     #region 使用者新增
   3:     {
   4:         if (context.Request["autoLoad"] == "1")
   5:             context.Response.Write(db.TB_Admin.FirstOrDefault(p => p.ID == Convert.ToInt32(context.Request["id"])).ToJson());
   6:         else
   7:         {
   8:             if (context.Request["id"].IsEmpty())
   9:             {
  10:                 if (context.Request["AdminPassword"].Trim() == string.Empty)
  11:                 {
  12:                     context.Response.Write("請輸入密碼!!");
  13:                     return;
  14:                 }
  15:                 if (context.Request["AdminPassword"] != context.Request["AdminPassword2"])
  16:                 {
  17:                     context.Response.Write("兩次密碼不一致!!");
  18:                     return;
  19:                 }
  20:                 var isExist = db.TB_Admin.FirstOrDefault(p => p.AdminLogin == context.Request["AdminLogin"].Trim());
  21:                 if (isExist != null)
  22:                 {
  23:                     context.Response.Write("使用者名稱重複!!");
  24:                     return;
  25:                 }
  26:                 TB_Admin singer = new TB_Admin()
  27:                 {
  28:                     Defatulflag = context.Request["Defatulflag"] == "1" ? 1 : 0,
  29:                     AdminLogin = context.Request["AdminLogin"].Trim(),
  30:                     CreateBy = userID.ToString(),
  31:                     CreateDate = DateTime.Now,
  32:                     LastLoginDate = null,
  33:                     Password = Utility.UserINFOManager.PasswordEncry(context.Request["AdminPassword"].Trim()),
  34:                     RoleID = Convert.ToInt32(context.Request["RoleID"])
  35:                 };
  36:                 db.TB_Admin.InsertOnSubmit(singer);
  37:                 db.SubmitChanges();
  38:             }
  39:             else
  40:             {
  41:                 var isExist = db.TB_Admin.FirstOrDefault(p => p.ID == Convert.ToInt32(context.Request["id"]));
  42:                 isExist.Defatulflag = context.Request["Defatulflag"] == "1" ? 1 : 0;
  43:                 isExist.AdminLogin = context.Request["AdminLogin"].Trim();
  44:                 isExist.RoleID = Convert.ToInt32(context.Request["RoleID"]);
  45:                 if (context.Request["AdminPassword"].Trim() != string.Empty)
  46:                     isExist.Password = Utility.UserINFOManager.PasswordEncry(context.Request["AdminPassword"].Trim());
  47:                 db.SubmitChanges();
  48:             }
  49:             context.Response.Write("1");
  50:             return;
  51:         }
  52:     }
  53:     break;
  54:     #endregion

從上面程式碼可以看出:

  1. 通過Type引數,可以獲取請求的頁面。
  2. 通過autoLoad引數,可以判斷是否是載入賦值。注意FirstOrDefault函式,是獲取第一條資料,然後通過ToJson方法(自己定義的擴充套件方法)轉換為JSON資料。
  3. 通過id引數,可以判斷是否為編輯。
  4. 以上使用的是LINQ to SQL,個人認為使用LINQ to SQl開發小專案還是挺快的。關於LINQ to SQL的具體使用,就不說了。順便送大家一段伺服器分頁通用程式碼(僅支援LINQ2SQL),如果覺得效能不行,請自己用儲存過程實現,這裡不考慮效能:
   1: /// <summary>
   2: /// 當前頁
   3: /// </summary>
   4: private int pageIndex = Convert.ToInt32(HttpContext.Current.Request["page"] ?? "1");
   5: /// <summary>
   6: /// 每頁顯示記錄數
   7: /// </summary>
   8: private int pageSize = Convert.ToInt32(HttpContext.Current.Request["rows"] ?? "1");
   9: /// <summary>
  10: /// 獲取分頁JSON
  11: /// </summary>
  12: /// <typeparam name="T"></typeparam>
  13: /// <param name="data"></param>
  14: /// <returns></returns>
  15: private string GetPageingJson<T>(IQueryable<T> data)
  16: {
  17:     return string.Format("{{\"total\":\"{0}\",\"rows\":{1}}}", data.Count(), data.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToJson());
  18: }
  1. 相比使用各種.NET Ajax框架,我還是喜歡按上面這種模式,雖然很多Ajax框架可以實現js呼叫C#方法,可以呼叫WebService,可以操作伺服器控制元件,但是我仍然痴迷上面的模式,因為個人覺得這樣精簡、易控制、一目瞭然、沒有ViewState、沒有伺服器控制元件、甚至沒有Cookie和Session(需要實現介面)。。。。

前端HTML

剛才貼的後臺處理邏輯是使用者管理的編輯介面,那麼前端HTML呢?如下:

   1: <%@ Page Title="" Language="C#" MasterPageFile="~/Form.Master" AutoEventWireup="true"
   2:     CodeBehind="AdminUser_Add.aspx.cs" Inherits="Singer.WebPages.RoleManagement.AdminUser_Add" %>
   3:  
   4: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
   5: </asp:Content>
   6: <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
   7:     <div class="easyui-layout" style="text-align: left; height: 270px;" fit="true">
   8:         <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
   9:             <form id="ff" method="post">
  10:             <input type="hidden" name="id" value="<%=Request.QueryString["ID"] %>" />
  11:             <table border="0" cellpadding="0" cellspacing="0">
  12:                 <tr>
  13:                     <td>
  14:                         <label for="AdminLogin">
  15:                             登入名:</label>
  16:                     </td>
  17:                     <td>
  18:                         <input class="easyui-validatebox" style="width: 300px;" type="text" required="true"
  19:                             validtype="length[0,20]" name="AdminLogin"></input>
  20:                     </td>
  21:                 </tr>
  22:                 <tr>
  23:                     <td>
  24:                         <label for="RoleID">
  25:                             所屬角色:</label>
  26:                     </td>
  27:                     <td>
  28:                         <input class="easyui-combobox" valuefield="ID" textfield="RoleName" panelheight="auto"
  29:                             editable="false" style="width: 300px;" url="/Ajax/Common.ashx?Type=GetRoles"
  30:                             required="true" name="RoleID"></input>
  31:                     </td>
  32:                 </tr>
  33:                 <tr>
  34:                     <td colspan="2" style='color: Red'>
  35:                         在編輯時,輸入管理員密碼錶示重新設定密碼。
  36:                     </td>
  37:                 </tr>
  38:                 <tr>
  39:                     <td>
  40:                         <label for="AdminPassword">
  41:                             密碼:</label>
  42:                     </td>
  43:                     <td>
  44:                         <input class="easyui-validatebox" style="width: 300px;" type="text" validtype="length[6,20]"
  45:                             id='txtPassword' name="AdminPassword"></input>
  46:                     </td>
  47:                 </tr>
  48:                 <tr>
  49:                     <td>
  50:                         <label for="AdminPassword2">
  51:                             確認密碼:</label>
  52:                     </td>
  53:                     <td>
  54:                         <input class="easyui-validatebox" style="width: 300px;" type="text" validtype="length[6,20]"
  55:                             id='txtPassword2' name="AdminPassword2"></input>
  56:                     </td>
  57:                 </tr>
  58:                 <tr>
  59:                     <td>
  60:                         <label for="Defatulflag">
  61:                             是否上架:</label>
  62:                     </td>
  63:                     <td>
  64:                         <input type="checkbox" name="Defatulflag" class="easyui-validatebox" type="text"
  65:                             required="true" value="1" />
  66:                     </td>
  67:                 </tr>
  68:             </table>
  69:             </form>
  70:         </div>
  71:         <div region="south" border="false" style="text-align: right; padding: 5px 5px 5px 0;">
  72:             <a class="easyui-linkbutton" iconcls="icon-save" href="javascript:void(0)" onclick="javascript:submitForm();">
  73:                 提交</a> <%--<a class="easyui-linkbutton" iconcls="icon-no" href="javascript:void(0)" onclick="$('#ff').form('clear');">
  74:                     重置</a>--%>
  75:         </div>
  76:     </div>
  77:     <script type="text/javascript">
  78:         $(function () {
  79:             if (autoLoad == 1) {
  80:                 $('#txtPassword').keypress(function () {
  81:                     if ($(this).val().length > 0) {
  82:                         $('#txtPassword2').validatebox({
  83:                             required: true
  84:                         });
  85:                     }
  86:                 }).change(function () {
  87:                     if ($(this).val().length > 0) {
  88:                         $('#txtPassword2').validatebox({
  89:                             required: true
  90:                         });
  91:                     } else {
  92:                         $('#txtPassword2').validatebox({
  93:                             required: false
  94:                         });
  95:                     }
  96:                 });
  97:  
  98:             } else {
  99:                 $('#txtPassword,#txtPassword2').validatebox({
 100:                     required: true
 101:                 }); ;
 102:             }
 103:         });
 104:     </script>
 105: </asp:Content>

值得注意的是:

  1. 這裡使用的控制元件均為HTML控制元件。
  2. 請注意name屬性,該屬性決定提交的post引數名,同時也是form載入賦值的引數名,也就是這裡的值要與後臺輸出的JSON要對應。
  3. 返回的JSON資料如下:
  4. image

這一篇就寫到這裡吧。由於最近忙,又耽誤了。。。

相關推薦

JQuery EasyUi介面設計——以及Ajax通用處理

前面介紹過JS了,就這樣個人認為還不夠用。 因為JS檔案是死的,無法使用伺服器程式碼,自然不夠靈活。那麼通過母版頁就完善了這一點。那麼下面舉一個例子——控制元件賦值。 控制元件賦值 前面說過easyui的form自帶驗證、提交、重置與賦值,那麼如何利用這個賦值呢?千篇一律的寫賦值程式碼總是那麼的令人厭煩,尤

【JAVA秒會技術秒殺面試官】JavaSE常見面試題

mark error 對象創建 事件 算法 pool ret sync 數量 41..比較一下Java和JavaSciprt? 答:其實Java和JavaScript最重要的區別是一個是靜態語言,一個是動態語言: (1)基於對象和面向對象:Java是一種真正的面向對象的語言

UI“重天”selenium--常用API和問題處理

Selenium常用API: 前面兩篇示例程式碼中用到了一些selenium的API方法,例如定位元素的八種方法、訪問url、等待、操作瀏覽器、獲取title、點選、清理等等。 有關於selenium的常用API在園子中有寫的非常詳細的文章。先貼大佬文章地址:https://www.cnblogs.com

REST API設計指導——譯自Microsoft REST API Guidelines

前面我們說了,如果API的設計更規範更合理,在很大程度上能夠提高聯調的效率,降低溝通成本。那麼什麼是好的API設計?這裡我們不得不提到REST API。 關於REST API的書籍很多,但是完整完善實踐豐富的設計指導並不多見,我們有幸看到了微軟團隊的作品——Microsoft REST API Guidel

安卓專案實戰強大的網路請求框架okGo使用詳解:快取的使用

相關實體類必須實現序列化介面 使用快取前,必須讓涉及到快取javaBean物件實現Serializable介面,否者會報NotSerializableException。因為快取的原理是將物件序列化後直接寫入資料庫中,如果不實現Serializable介面,會導致物件無法序列化,進而無法

《修煉道:.NET開發要點精講》讀書筆記

後幾章的習題 1.非同步呼叫開始後,什麼時候才能使用非同步執行的結果? A:最好在EndInvoke()方法返回之後才能使用非同步執行的結果,其它時候不能保證非同步呼叫已完成。   2.委託的非同步呼叫開始後(即呼叫BeginInvoke方法後),EndInvoke方法是否可以在同一執行緒中

Android NDK——必知必會JNI的C++操作函式詳解和小結

引言 上一篇講解了一些關於JNI和NDK的必知必會的理論知識和機制,由於篇幅問題把關於JNI的重要的函式放到這篇,具體使用留到下一篇,此係列文章基連結: 一、JNI中的函式概述 在JNI層我們基本上都是通過env指標來呼叫jni.h標頭檔案裡定義的函式,JNI

FPGA數字訊號處理序列FIR濾波器Verilog設計

該篇是FPGA數字訊號處理的第三篇,選題為DSP系統中極其常用的FIR濾波器。本文將在上一篇“FPGA數字訊號處理(二)並行FIR濾波器Verilog設計” https://blog.csdn.net/fpgadesigner/article/details/8

C#事務處理Transactions事務

自.NET 2.0以來增加了System.Transactions名稱空間,為.NET應用程式帶來了一個新的事務程式設計模型。 這個名稱空間提供了幾個依賴的TransactionXXX類。Transaction是所有事務處理類的基類,並定義了所有事務類可以

UGUI 製作角色受傷螢幕變紅的動畫提示

做一個FPS設計遊戲中常用的角色受傷後的螢幕變紅提示 一、原始碼 /// <summary> /// 時間:2014-4-8 /// 作者:GWL /// 描述: /// </sum

利用電腦玩Android“天天連萌”刷高分——連連看消除搜尋

差點忘了寫接下來的這兩篇部落格了,這篇如果接不上上一篇,請勿見怪啊,因為我自己都忘了。上兩篇分別提到了截圖和影象識別,接下來這一篇是說一下連連看的消除演算法。這個演算法看似很厲害,其實我在這裡採用的是很笨拙的方法,就是列舉。在上一篇已經連遊戲裡的方塊轉換成一個二維陣列,所以就

JavaWEB--POIEXCEL操作、優化、封裝詳解系列--萬能POIEXCEL匯出工具--PoiExportUtil入門篇

前面講完概述、原理以及helloworld,現在就講下怎樣的POI的EXCEL匯出工具可以適用於各種情況吧。後面再做個優化分頁的萬能POI之EXCEL匯出工具,本篇章先做個簡單的萬能POI之EXCEL匯出工具(博主已經抽象成庫,請於文末前去使用)。 文章結

《javascript設計模式與開發實踐》閱讀筆記

this,call和apply 2.1 this this指標的用法,相信在很多場合都看到過,這裡也總結了幾點: 作為物件的方法呼叫 作為普通函式呼叫 構造器呼叫 Function.prototype.call或Function.prototype.ap

Asp.Net套用後元素ID不一致個人總結

Asp.Net套用母版頁後元素ID不一致之個人總結來自森大科技官方部落格 http://www.cnsendblog.com/index.php/?p=102在內容頁裡,在這個標籤對裡:<asp:Content ID="content" ContentPlaceHolderID="MainContent

jQuery效果在檢視失效

問題背景 在母版頁有如下的jQuery匯入: 在檢視頁為了配合bootstrap-table,所以也匯入了Jquery。(如果沒有匯入,會導致bootstrap-table無法顯示),如下圖: 問題出現: 在檢視頁匯入之後,母版頁的jQuery都失效。 問題區域如下圖

一、、子、頁面之間的關系

default viewbag 分享 mps pad jquery err sel brush 母版頁和子母版頁,功能的頁面之間的關系,在不同功能的頁面怎麽進行差異化管理樣式和腳本,提高頁面的響應速度,使頁面更加簡潔。 頁面布局的結構圖: 一、子母版頁_Edit

ASP.NET中的

建議 cli 路徑 pla 自動 webapp 一個 服務 如果 添加一個"母版頁",使用<asp:ContentPlaceHolder>挖坑,新建的母版頁已經自動設置了兩個ContentPlaceHolder創建使用母版頁的具體頁面,WebSite是新建"We

WebForm 使用

cnblogs 控制 aid .com 新的 服務 它的 for 對象模型 首先來說一下什麽是母版頁: 母版頁可以為應用程序中的頁創建一致的布局。單個母版頁可以為應用程序中的所有頁(或一組頁)定義所需的外觀和標準行為。 母版頁的使用與普通頁面類似,可以在其中放置文件或者圖

在內容中調用控件、響應控件消息用戶控件、服務器控件有所不同

color pos new handle ascx clientid sender name ast 原文發布時間為:2009-11-13 —— 來源於本人的百度文章 [由搬家工具導入]总结来源百

的銨鈕事件去獲取子的內容

none 技術 des page .com string alt scrip 一個 本例演示在母版頁中的銨鈕事件去獲取某些子頁的內容。在母版本中,有一個銨鈕事件。當瀏覽某些子頁時,用戶點一點母版頁的銨鈕,能去獲取當前頁的內容。 子頁很多,但我們並不是每一個子頁的內容均要