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>
從程式碼中可以看出:
- 頁面上定義了3個全域性JS變數，有註釋，我就不贅述了。
- setAjaxUrl函式在表單賦值載入前執行，可以實現用於更改上面的3個變數的值，或者作其他作用，建議命名為beforeFormLoad。
- typeCode的值為頁面名，比如“index.aspx”，提交給處理程式用於判斷是哪個頁面，以便返回對應的JSON資料。
後臺處理邏輯
那麼處理程式如何返回對應的JSON資料呢？先看看大體結構：
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
從上面程式碼可以看出：
- 通過Type引數，可以獲取請求的頁面。
- 通過autoLoad引數，可以判斷是否是載入賦值。注意FirstOrDefault函式，是獲取第一條資料，然後通過ToJson方法（自己定義的擴充套件方法）轉換為JSON資料。
- 通過id引數，可以判斷是否為編輯。
- 以上使用的是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: }
- 相比使用各種.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>
值得注意的是：
- 這裡使用的控制元件均為HTML控制元件。
- 請注意name屬性，該屬性決定提交的post引數名，同時也是form載入賦值的引數名，也就是這裡的值要與後臺輸出的JSON要對應。
- 返回的JSON資料如下：
這一篇就寫到這裡吧。由於最近忙，又耽誤了。。。
相關推薦
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--POI之EXCEL操作、優化、封裝詳解系列（三）--萬能POI之EXCEL匯出工具--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 一個 本例演示在母版頁中的銨鈕事件去獲取某些子頁的內容。在母版本中，有一個銨鈕事件。當瀏覽某些子頁時，用戶點一點母版頁的銨鈕，能去獲取當前頁的內容。 子頁很多，但我們並不是每一個子頁的內容均要