Use application services and localization in ASP. net ajax (4): Sample program: read, modify, and save user personalized information

 

Let's write a complete example program to learn how to configure and use the ProfileService object of ASP. net ajax to read, modify, and save user personalized information. In this example, we will use the user identity authentication function in section 2nd of this chapter, and provide the ability to read, modify, and save user personalized information for logged-on users.

The features of the sample program are not complex: Three custom attributes are defined to save the color, font size, and font of a piece of text on the page. When the program is loaded, it will automatically request these three user personalized attributes from the logged-on user to the server, and apply them to the text on the page after successful loading. You can also modify and save the personalized attributes of these users in the program. After the personalized attributes are saved, the text styles on the page will also be updated. Naturally, all processes are implemented in a new way without any need for Ajax.

 

5.4.1Enable personalized application services

First, in section 2nd of this chapter, modify the Web page of the sample program for user identity authentication in the same web site. <configuration/> \ <system. web/> section, which defines the following user personalized attributes. This is not a new feature introduced by ASP. net ajax, but a built-in support for 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>

As you can see, in the above configuration, we have defined three systems. string-type user personalized attributes: FontColor, FontSize, and FontFamily are used to save the color, font size, and font of the text on the sample program page, respectively, default values are also provided for these three user personalized attributes.

Then, enable access from the client for ASP. net ajax to support the personalized attributes of these server users. Similarly, in the web. config configuration file, add the following configuration in the <configuration/> section:

<system.web.extensions>

  <scripting>

    <webServices>

      <profileService enabled="true"

        readAccessProperties="FontColor,FontSize,FontFamily"

        writeAccessProperties="FontColor,FontSize,FontFamily" />

    </webServices>

  </scripting>

</system.web.extensions>

As you can see, the enabled attribute of the <profileService/> label is set to true to enable the program to access the user's personalized attribute on the server from the client. The readAccessProperties and writeAccessProperties attributes of the <profileService/> label are respectively used to indicate the names of user-defined attributes that are exposed to the client for reading or modifying. The names of user-defined attributes are separated by commas. By reasonably setting the readAccessProperties and writeAccessProperties attributes, we can only select the necessary user-defined attributes and expose them to the client, which enhances program security.

 

5.4.2Sample programUIPart

In the Visual Studio designer, the UI of the sample program is 5-9.

Figure 5-9 interface of the sample program in the Visual Studio designer

As shown in Figure 5-9, the page is divided into two parts: left and right. The left side is used to set three personalized attributes for logged-on users, and the right side is used to demonstrate the changes in the left side property settings.

Of course, before adding any UI elements, the first thing to do is to define the ScriptManager control on the page:

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

The code for setting three user personalized attributes on the left side of the page is as follows:

<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()" />

Note that the id of the three text boxes will be used in later programs. The buttons in the above Code are used to trigger the save of the modified User personalized attributes.

The Panel code for displaying text on the right is as follows (to save space, most text is omitted in the Code ):

<div id="content">

    It has been a week since I updated the blog last time and 

    …………

    - hopefully that can be of great helps :)

</div>

This <div/> also applies some CSS styles:

#content

{

    float: right; 

    width: 260px; 

    border: 1px solid black;

    padding: 5px;

}

Define an empty <div/> to output the status information of some programs running. Pay attention to its id, which will be used later:

<div id="result">

</div>

This completes the UI part of the program.

 

5.4.3Sample programJavaScriptCode Section

After completing the UI part of the program, you naturally come to the JavaScript code section to control the behavior of each UI element. Add a <script/> label after the appearance of ScriptManager on the page. All the script content will be placed in this label:

<script type="text/javascript">

</script>

First, we will set three default callback functions for the ProfileService object. These three callback functions will be called when user personalized information is successfully loaded, user personalized information is successfully saved, and the call fails:

Sys.Services.ProfileService.set_defaultLoadCompletedCallback(onLoadCompleted);

Sys.Services.ProfileService.set_defaultSaveCompletedCallback(onSaveCompleted);

Sys.Services.ProfileService.set_defaultFailedCallback(onProfileFailed);

Let's analyze the implementation of these three callback functions in sequence. The onLoadCompleted () callback function that successfully loads user personalized information (). A prompt message "loaded successfully" is provided, and an auxiliary function named updateContentStyleAndProfileInputs () is called to update the style of the text on the right of the page and the content in the three attribute text boxes:

function onLoadCompleted(numProperties, userContext, methodName) {

// Set the Successful loading of user personalized attributes

    $get("result").innerHTML = "Profile Loaded!";

// Update the text content style and the content in the attribute text box

    updateContentStyleAndProfileInputs();

}

The code for the updateContentStyleAndProfileInputs () helper function is as follows. First, three values of user personalized attributes are obtained, and then set to the text on the right, and finally set the text in the attribute text box on the left side of the page. Note the usage of the properties attribute of the ProfileService object in bold:

function updateContentStyleAndProfileInputs() {

// Obtain the personalized attributes of the current user

    var fontColor = Sys.Services.ProfileService.properties.FontColor;

    var fontSize = Sys.Services.ProfileService.properties.FontSize;

    var fontFamily = Sys.Services.ProfileService.properties.FontFamily;

// Set the style of Text Content

    var contentElem = $get("content");

    contentElem.style.color = fontColor;

    contentElem.style.fontSize = fontSize;

    contentElem.style.fontFamily = fontFamily;

// Set the content in the attribute text box

    $get("tbFontColor").value = fontColor;

    $get("tbFontSize").value = fontSize;

    $get("tbFontFamily").value = fontFamily;

}

The onSaveCompleted () callback function that successfully saves user personalized information is similar to onLoadCompleted. Similarly, a prompt is provided first, and then the interface of the updateContentStyleAndProfileInputs () helper function update program is called:

function onSaveCompleted(numProperties, userContext, methodName) {

// Set the user's personalized attributes to save the successful information

    $get("result").innerHTML = "Profile Saved!";

// Update the text content style and the content in the attribute text box

    updateContentStyleAndProfileInputs();

}

The onProfileFailed () callback function in case of call failure does not have any specific implementation code. It only switches the program to the debugging status:

function onProfileFailed(error, userContext, methodName) {

    debugger;

}

Compile the pageLoad () function, which is automatically called by the ASP. net ajax client framework after the client application is loaded. In this function, we will call the load () method of the ProfileService object to call the server-End User personalized service and read the user's personalized attributes immediately after the program Initialization is complete. Note that no parameters are provided when the load () method is called:

function pageLoad(sender, args) {

    Sys.Services.ProfileService.load();

}

Tip: If you want to send the custom attribute values along with the loading of the page HTML code, you can modify the declaration of the ScriptManager (or ScriptManagerProxy) control according to the following code. Note that the bold part declares the user personalized attributes to be preloaded:

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

    <ProfileService LoadProperties="FontColor,FontSize,FontFamily" />

</asp:ScriptManager>

As for the buttons (id: btnUpdateProfile) in the form for setting user personalized attributes on the left side of the page, the code for processing the click event is as follows. Instead, collect the new style entered by the user, and then call the save () method of the ProfileService object:

function btnUpdateProfile_onclick() {

// Obtain the content in the text box and update the user's personalized attributes

    Sys.Services.ProfileService.properties.FontColor = $get("tbFontColor").value;

    Sys.Services.ProfileService.properties.FontSize = $get("tbFontSize").value;

    Sys.Services.ProfileService.properties.FontFamily = $get("tbFontFamily").value;

// Save the modified User personalized attributes

    Sys.Services.ProfileService.save();

}

We have already set three default callback functions for the ProfileService object. Therefore, after the load () and save () methods are called asynchronously to return, the ProfileService object will automatically select and call one of the preceding three callback functions based on the completion status of the just-concluded asynchronous call.

So far, we have completed the compilation of the entire sample program.

 

5.4.4Run the sample program

Before running the sample program, you must log on to the sample program page in section 2nd of this chapter (5-5 and figure 5-6 ). Then navigate to the sample project page, and you will see the page 5-10.

Figure 5-10 initial interface of the sample program

As shown in Figure 5-10, the program has successfully loaded three user personalized attributes for current logon. These attribute values are also displayed in the three text boxes on the left side of the page. The text on the right of the page reflects the style of the three attributes.

Modify the attributes in the "Font Color", "Font Size", and "Font Family" text boxes, and click the "Update Profile" button below. With an asynchronous Ajax update, these three user personalized attributes will be submitted to the server, and the text on the right of the page will also reflect the results of the changes in these three user personalized attributes. As shown in Figure 5-11.

Figure 5-11 the text style on the right of the page also changes after three user personalized attributes are modified and updated

These three user personalized attributes have been submitted to the server for storage. Even if the browser is closed, the user will see the same interface shown in 5-11 the next login.

Through such a complete example program, we demonstrate how to use the ProfileService object of ASP. net ajax to read, modify, and save user personalized information in Ajax mode. With the help of the ProfileService object, we can use ASP in Ajax mode on the client.. NET 2.0 provides customized application services for ASP. net ajax and ASP. NET 2.0 is seamlessly integrated with other systems.