最進比較郁悶, 准備去喝點西北風, 因為我發現自己的工資不夠養活家的, 但還是堅持發了這篇文章, 發完我就可以跳樓了, 這是一篇如何在母版頁中使用 JQueryElement 控件的文章.
由於精力有限, 不能在多個博客中保證文章的同步, 可在如下地址查看最新內容, 請諒解:
http://code.google.com/p/zsharedcode/wiki/JEMasterPage
請到 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="#" onclick="logout()">退出</a>!
再來看下母版頁的 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 代碼.
JQueryElement 是開源共享的代碼, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 頁面下載 dll 或者是源代碼.
實際過程演示: http://www.tudou.com/programs/view/1xYM_Xnk6Ok/, 建議全屏觀看.