本文來自《ASP.NET AJAX程序設計 第II卷：客戶端Microsoft AJAX Library相關》的第五章《應用程序服務和本地化》。

?

讓我們通過編寫一個完整的示例程序學習如何配置并使用ASP.NET AJAX的ProfileService對象來實現讀取、修改并保存用戶個性化信息的功能。在這個示例程序中，我們將借助本章第2節中實現的用戶身份認證功能，并基于該實現為已登錄用戶提供讀取、修改并保存用戶個性化信息的功能。

該示例程序的功能并不復雜：其中自定義了3個用戶個性化屬性，分別用來保存頁面中一段文本的顏色、字號和字體。程序在加載時將自動為已登錄用戶向服務器請求這3個用戶個性化屬性，并在成功加載之后應用到頁面中的文本上。用戶也可以在程序中修改這些用戶個性化屬性并保存，成功保存后，頁面中文本的樣式也將被更新。自然，所有的過程都是以Ajax無刷新方式進行的。

?

5.4.1 啟用用戶個性化應用程序服務

首先，在本章第2節中用戶身份認證功能示例程序所在的同一個Web站點中，修改其web.config配置文件的<configuration />\<system.web />節，在其中定義如下的用戶個性化屬性。這并不是ASP.NET AJAX引入的新特性，而是ASP.NET 2.0的內建支持：

<profile enabled="true"> <properties> <add name="FontColor" type="System.String" defaultValue="black"/> <add name="FontSize" type="System.String" defaultValue="12px"/> <add name="FontFamily" type="System.String" defaultValue="tahoma"/> </properties> </profile>

可以看到，在上述配置中，我們定義了3個System.String類型的用戶個性化屬性：FontColor、FontSize和FontFamily，分別將用來保存示例程序頁面中文本的顏色、字號和字體，這3個用戶個性化屬性也都提供了默認值。

然后要為ASP.NET AJAX啟用從客戶端訪問這些服務器端用戶個性化屬性的支持。同樣是在web.config配置文件中，在<configuration />節下添加如下配置：

<system.web.extensions> <scripting> <webServices> <profileService enabled="true" readAccessProperties="FontColor,FontSize,FontFamily" writeAccessProperties="FontColor,FontSize,FontFamily" /> </webServices> </scripting> </system.web.extensions>

可以看到，其中<profileService />標簽的enabled屬性被設置為true，這是為了讓程序能夠從客戶端訪問服務器端的用戶個性化屬性。<profileService />標簽的readAccessProperties和writeAccessProperties屬性則分別用來表示暴露給客戶端讀取或修改的用戶個性化屬性名稱，用戶個性化屬性名稱之間用逗號分開。通過合理地設置readAccessProperties和writeAccessProperties屬性，我們可以僅僅挑選必要的用戶個性化屬性暴露給客戶端，即增強了程序的安全性。

?

5.4.2 示例程序的UI部分

在Visual Studio的設計器中，本示例程序的界面如圖5-9所示。

圖5-9 示例程序在Visual Studio設計器中的界面

在圖5-9中可以看到，頁面主要分為左右兩個部分。其中左側用來讓已登錄用戶設置3個用戶個性化屬性，右側的那段文本則用來演示左側屬性設置的變化。

當然，在添加任何UI元素之前，最先要做的就是在頁面中定義ScriptManager控件：

<asp:ScriptManager ID="sm" runat="server" />

頁面左邊設置3個用戶個性化屬性的表單的代碼如下：

<label for="tbFontColor">Font Color:</label> <input id="tbFontColor" type="text" /><br /> <label for="tbFontSize">Font Size:</label> <input id="tbFontSize" type="text" /><br /> <label for="tbFontFamily">Font Family:</label> <input id="tbFontFamily" type="text" /><br /> <input id="btnUpdateProfile" type="button" value="Update Profile" onclick="return btnUpdateProfile_onclick()" />

注意其中3個文本框的id，將在稍后的程序中用到。上述代碼中的按鈕用來觸發保存修改后的用戶個性化屬性。

右側顯示文本的面板代碼如下（為節省篇幅，代碼中省略了大部分文字）：

<div id="content"> It has been a week since I updated the blog last time and ………… - hopefully that can be of great helps :) </div>

這個<div />也應用了一些CSS樣式：

#content { float: right; width: 260px; border: 1px solid black; padding: 5px; }

再定義一個空的<div />，用來輸出一些程序運行中的狀態信息。請留意其id，將在稍后用到：

<div id="result"> </div>

這樣即完成了程序的UI部分。

?

5.4.3 示例程序的JavaScript代碼部分

完成了程序的UI部分之后，自然來到了JavaScript代碼部分，以便控制各個UI元素的行為。在頁面中ScriptManager的出現位置之后添加一個<script />標簽，接下來所有的腳本內容均將置于該標簽中：

<script type="text/javascript"> </script>

首先，我們來設定ProfileService對象的3個默認回調函數，這3個回調函數分別將在成功加載用戶個性化信息、成功保存用戶個性化信息以及調用失敗時被調用：

Sys.Services.ProfileService.set_defaultLoadCompletedCallback(onLoadCompleted); Sys.Services.ProfileService.set_defaultSaveCompletedCallback(onSaveCompleted); Sys.Services.ProfileService.set_defaultFailedCallback(onProfileFailed);

讓我們依次分析這3個回調函數的實現。成功加載用戶個性化信息的回調函數——onLoadCompleted()。其中先給出了一段“成功加載”的提示信息，然后調用一個名為updateContentStyleAndProfileInputs()的輔助函數更新頁面右側文本的樣式以及3個屬性文本框中的內容：

function onLoadCompleted(numProperties, userContext, methodName) { // 設置用戶個性化屬性加載成功信息 $get("result").innerHTML = "Profile Loaded!"; // 更新文本內容樣式以及屬性文本框中的內容 updateContentStyleAndProfileInputs(); }

updateContentStyleAndProfileInputs()輔助函數的代碼如下。其中首先取得了3個用戶個性化屬性的值，然后設置到右側的文本上，最后設置頁面左側屬性文本框中的文本。注意其中粗體部分對ProfileService對象properties屬性的使用：

function updateContentStyleAndProfileInputs() { // 取得當前的個用戶個性化屬性 var fontColor = Sys.Services.ProfileService.properties.FontColor; var fontSize = Sys.Services.ProfileService.properties.FontSize; var fontFamily = Sys.Services.ProfileService.properties.FontFamily; // 設置文本內容的樣式 var contentElem = $get("content"); contentElem.style.color = fontColor; contentElem.style.fontSize = fontSize; contentElem.style.fontFamily = fontFamily; // 設置屬性文本框中的內容 $get("tbFontColor").value = fontColor; $get("tbFontSize").value = fontSize; $get("tbFontFamily").value = fontFamily; }

成功保存用戶個性化信息的回調函數——onSaveCompleted()與onLoadCompleted()非常類似。同樣是先給出提示，然后調用前面給出的updateContentStyleAndProfileInputs()輔助函數更新程序的界面：

function onSaveCompleted(numProperties, userContext, methodName) { // 設置用戶個性化屬性保存成功信息 $get("result").innerHTML = "Profile Saved!"; // 更新文本內容樣式以及屬性文本框中的內容 updateContentStyleAndProfileInputs(); }

而調用失敗時的回調函數——onProfileFailed()則并沒有什么具體的實現代碼，僅僅將程序切換到調試狀態而已：

function onProfileFailed(error, userContext, methodName) { debugger; }

然后編寫pageLoad()函數，該函數將在客戶端應用程序加載完畢后被ASP.NET AJAX客戶端框架自動調用。在該函數中，我們會調用ProfileService對象的load()方法，以便在程序初始化完畢后立即再次調用服務器端用戶個性化服務并讀取用戶的個性化屬性。注意其中調用load()方法時并沒有提供任何參數：

function pageLoad(sender, args) { Sys.Services.ProfileService.load(); }

提示：若想隨頁面HTML代碼的加載一起發送這些用戶個性化屬性的值，那么可以按照如下代碼修改ScriptManager（或ScriptManagerProxy）控件的聲明。注意其中粗體部分即聲明了要預先加載的用戶個性化屬性：

<asp:ScriptManager ID="sm" runat="server"> <ProfileService LoadProperties="FontColor,FontSize,FontFamily" /> </asp:ScriptManager>

至于頁面左邊設置用戶個性化屬性的表單中的按鈕（id為btnUpdateProfile），其click事件的處理函數代碼如下。不過是首先收集用戶輸入的新樣式，然后調用ProfileService對象的save()方法而已：

function btnUpdateProfile_onclick() { // 取得文框中的內容，并更新用戶個性化屬性 Sys.Services.ProfileService.properties.FontColor = $get("tbFontColor").value; Sys.Services.ProfileService.properties.FontSize = $get("tbFontSize").value; Sys.Services.ProfileService.properties.FontFamily = $get("tbFontFamily").value; // 保存修改后的用戶個性化屬性 Sys.Services.ProfileService.save(); }

前面我們已經設定了ProfileService對象的3個默認回調函數，所以在異步調用load()和save()方法返回之后，ProfileService對象將自動根據剛剛結束的異步調用的完成狀況選擇并調用上述3個回調函數中的某一個。

到此為止，我們即完成了整個示例程序的編寫。

?

5.4.4 運行示例程序

在運行該示例程序之前，我們要保證先在本章第2節中的示例程序頁面中成功登錄（如圖5-5和圖5-6所示）。然后導航至本示例程序頁面，你將看到如圖5-10所示的界面。

圖5-10 示例程序的初始界面

在圖5-10中可以看到，程序已經成功加載了當前登錄用的3個用戶個性化屬性。頁面左側的3個文本框也分別顯示這些屬性值。而頁面右側的文本則反映出了當前這3個屬性所表現出的樣式。

修改一下“Font Color”、“Font Size”和“Font Family”這三個文本框中的屬性，并點擊下方的“Update Profile”按鈕。隨著一次Ajax方式的異步更新，這3個用戶個性化屬性將被提交給服務器，頁面右邊的文本也會同時反映出這3個用戶個性化屬性變化的結果。如圖5-11所示。

圖5-11 修改并更新3個用戶個性化屬性后，頁面右邊的文本樣式也會隨之變化

這3個用戶個性化屬性已經被提交到服務器端保存起來，即使用戶關閉了瀏覽器，下次再登錄時也會看到同樣的、如圖5-11所示的界面。

通過這樣一個完整的示例程序，我們演示了使用ASP.NET AJAX的ProfileService對象實現Ajax方式讀取、修改并保存用戶個性化信息的方法。有了ProfileService對象的幫助，我們即可在客戶端以Ajax方式使用ASP.NET 2.0提供的用戶個性化應用程序服務，讓ASP.NET AJAX與ASP.NET 2.0渾然天成般緊密結合。

總結

以上是生活随笔為你收集整理的在ASP.NET AJAX中使用应用程序服务和本地化（4）：示例程序：读取、修改并保存用户个性化信息...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。