最進比較鬱悶, 準備去喝點西北風, 因爲我發現自己的工資不夠養活家的, 但還是堅持發了這篇文章, 發完我就可以跳樓了, 這是一篇如何在母版頁中使用 JQueryElement 控件的文章.
請到 Download 下載資源 的 JQueryElement 示例下載一節下載示例代碼
本文將說明如何在母版頁中使用 JQueryElement 控件:
* 母版頁
* 內容頁
* 附錄: 公共登錄框
母版頁
在母版頁中使用 JQueryElement 控件和普通頁面是相同的, 只需要引用必需的命名空間和 jQueryUI 的腳本和樣式即可:
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui" TagPrefix="je" %><%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin" TagPrefix="je" %><%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.web.jqueryui" TagPrefix="je" %><link type="text/css" rel="stylesheet" href="[樣式路徑]/jquery-ui-<version>.custom.css" /><script type="text/javascript" src="[腳本路徑]/jquery-<version>.min.js"></script><script type="text/javascript" src="[腳本路徑]/jquery-ui-<version>.custom.min.js"></script>複製代碼
內容頁
而在內容頁中只需要引用命名空間即可, 因爲腳本已經由母版頁引用.
附錄: 公共登錄框
在這一節中, 將介紹如何使用母版頁來製作一個公共登錄框, 首先來看下 WebService:
[WebService ( Namespace = "http://tempuri.org/" )][WebServiceBinding ( ConformsTo = WsiProfiles.BasicProfile1_1 )][ScriptService]public class master_webservice : System.Web.Services.WebService{ [WebMethod ( true )] [ScriptMethod] public SortedDictionary<string, object> Check ( ) { this.Context.Response.Cache.SetNoStore ( ); return SampleHelper.CreateJSONObject ( new KeyValuePair<string, object>[] { new KeyValuePair<string, object> ( "ok", null != this.Session["master_un"] && this.Session["master_un"].ToString() != string.Empty ), new KeyValuePair<string, object> ( "un", this.Session["master_un"] ), } ); } [WebMethod ( true )] [ScriptMethod] public SortedDictionary<string, object> Login ( string username, string password ) { this.Context.Response.Cache.SetNoStore ( ); this.Session["master_un"] = username; return SampleHelper.CreateJSONObject ( new KeyValuePair<string, object>[] { new KeyValuePair<string, object> ( "ok", null != this.Session["master_un"] && this.Session["master_un"].ToString() != string.Empty ), new KeyValuePair<string, object> ( "un", username ), } ); } [WebMethod ( true )] [ScriptMethod] public void Logout ( ) { this.Context.Response.Cache.SetNoStore ( ); this.Session["master_un"] = null; } [WebMethod ( true )] [ScriptMethod] public SortedDictionary<string, object> GetContent () { this.Context.Response.Cache.SetNoStore ( ); string html = string.Format ( "通過服務器端獲取頁面內容, " + "<span style='font-size: larger'><strong>isLogin<strong> = {0}, " + "<strong>userName<strong> = {1}</span>", null != this.Session["master_un"] && this.Session["master_un"].ToString ( ) != string.Empty, this.Session["master_un"] ); return SampleHelper.CreateJSONObject ( new KeyValuePair<string, object>[] { new KeyValuePair<string, object> ( "html", html ) } ); }}複製代碼在 WebService 中, 定義了 4 個方法, Check 方法用於返回當前的用戶狀態, Login 和 Logout 方法用於登錄和註銷, GetContent 方法用於內容頁獲取頁面內容. 對於如何返回 JSON, 請參考 在不同的 .NET 版本中返回 JSON .
然後, 在母版頁中通過 AjaxManager 來調用這些方法:
<je:AjaxManager ID="ajax" runat="server"> <je:AjaxSetting ClientFunction="check" Url="webservice.asmx" MethodName="Check" Success=" function(data){ refreshUI(-:data.ok, -:data.un); } "> </je:AjaxSetting> <je:AjaxSetting ClientFunction="login" Url="webservice.asmx" MethodName="Login" Success=" function(data){ refreshUI(-:data.ok, -:data.un); } "> <je:Parameter Name="username" Type="Selector" Value="#un" /> <je:Parameter Name="password" Type="Selector" Value="#pw" /> </je:AjaxSetting> <je:AjaxSetting ClientFunction="logout" Url="webservice.asmx" MethodName="Logout" Success=" function(data){ refreshUI(false, null); } "> </je:AjaxSetting></je:AjaxManager>複製代碼上面的 AjaxSetting 使母版頁中可以通過 check, login, logout 3 個 javascript 函數來調用服務器端的 Check, Login, Logout 方法. 其中爲 Login 方法傳遞用戶輸入的用戶名和密碼, 在每一個方法調用成功後執行 refreshUI 函數. 更多 AjaxManager 的內容, 可以參考 生成調用服務器端方法的 javascript 函數 .
在頁面載入時調用 check 函數獲取用戶登錄信息, 在點擊登錄按鈕和註銷鏈接時, 分別調用 login 和 logout 函數:
<script type="text/javascript"> $(function () { check(); });</script>...(任意輸入一個用戶名即可) 用戶名:<input type="text" id="un" size="10" />密碼:<input type="password" id="pw" size="10" /><je:Button ID="cmdLogin" runat="server" Label="登錄" ClickAsync-AjaxManagerID="ajax" ClickAsync-ClientFunction="login"></je:Button>...歡迎, <span class="user-name"></span>, <a href="#" refreshUI 函數:
<script type="text/javascript"> function refreshUI(isLogin, userName) { if (isLogin) { $('.login-panel').hide(); $('.user-name').text(userName); $('.user-panel').show(); } else { $('.login-panel').show(); $('.user-panel').hide(); } if (typeof (refreshSubUI) != 'undefined') refreshSubUI(isLogin, userName); }</script>複製代碼在 refreshUI 中, 根據用戶是否登錄, 來顯示或者隱藏登錄框. 並且, 如果內容頁定義了 refreshSubUI 函數, 還將調用 refreshSubUI.
在內容頁中, 可以定義 refreshSubUI 函數, 來設置頁面的內容:
<script type="text/javascript"> function refreshSubUI(isLogin, userName) { $('#sub').html( '通過 javascript 修改頁面內容, ' + '<span style="font-size: larger"><strong>isLogin<strong> = ' + isLogin.toString() + ', <strong>userName<strong> = ' + userName + '</span>' ); }</script>複製代碼代碼中, refreshSubUI 函數顯示了參數 isLogin 和 userName 的值.
也可以在內容頁中調用服務器端的 GetContent 方法:
<script type="text/javascript"> function refreshSubUI(isLogin, userName) { getContentFromServer(); }</script><je:AjaxManager ID="ajax" runat="server"> <je:AjaxSetting ClientFunction="getContentFromServer" Url="webservice.asmx" MethodName="GetContent" Success=" function(data){ $('#sub').html(-:data.html); } "> </je:AjaxSetting></je:AjaxManager>複製代碼這裏同樣是使用了 AjaxManager, 頁面的內容來自於服務器返回的 html 代碼