Using Themes with Personalization | ASP.NET 2.0 Revealed

The relationship of Themes and personalization is a very interesting topic. You may leave it up to users to decide the presentation of a portal. Maybe a little bit more of the blue color or rather some sort of dark green? The user will be able to decide which!

Listing 9-4 demonstrates such a choice, following the approach of Dave Sussmann, who cordially sent me his example. It contains a DropDownList control to choose a Theme. By setting up the AutoPostBack property, the selected value will be used immediately and stored in the profile, and the view will be updated accordingly.

Listing 9-4: Enabling the User to Select Which Theme to Use

 <%@ page language="C#" %> <script runat="server" language="c#"> void Page_PreInit(object sender, System.EventArgs e) {     this.Theme = Profile.Theme; } void Page_Load(object sender, System.EventArgs e) {     if (this.IsPostBack == false)     {         ListItem item = this.DDL_Theme.Items.FindByText(this.Profile.Theme);         if (item != null)         {             item.Selected = true;         }     } } void DDL_Theme_SelectedIndexChanged(object sender, System.EventArgs e) {     this.Profile.Theme = this.DDL_Theme.SelectedValue;     this.Response.Redirect(this.Request.RawUrl, true); } </script> <html> <head  runat="server">     <title>Untitled Page</title> </head> <body>     <form  runat="server">         <asp:dropdownlist  runat="server"             onselectedindexchanged="DDL_Theme_SelectedIndexChanged"             autopostback="True">             <asp:listitem>BasicBlue</asp:listitem>             <asp:listitem>SmokeAndGlass</asp:listitem>         </asp:dropdownlist>         ...     </form> </body> </html>

As shown in the following snippet, I've attached a new property with a useful standard value to the profile in the web.config configuration file. This way I've ensured that the example works properly (see Figure 9-6).

click to expand
Figure 9-6: Your users can select which Theme to use.

 <?xml version="1.0" encoding="UTF-8" ?> <configuration>     <system.web>         <personalization>             <profile>                 <property name="Theme" defaultValue="BasicBlue" />             </profile>         </personalization>     </system.web> </configuration>

Using Client Callback

The example just shown works, but there is a catch! A redirect must occur after the update of the profile, because the Theme can't be changed anymore at the time of the event handling. The assignment of the Page.Theme property would cause an InvalidOperationException. What can be done?

One of the new features of ASP.NET 2.0, called Client Callback, is applied in this situation. I'll go into the details of this feature in Chapter 11. In summary, this feature allows you to call a server-side method with JavaScript and without a postback of the whole page. The approach is kind of similar to the IE Web Service behavior that you may already know. The system is based on XMLHTTP and can be used with the current versions of Internet Explorer and as well as Netscape.

Afterwards, you'll see the example, shown in Listing 9-5, that was modified on this basis. After selecting a new value in the DropDownList control, a client-side script will be initiated that activates the callback and, after successful completion, starts a postback to update the page.

Listing 9-5: Using Client Callback Is Another Way to Update the Profile Object

 <%@ page language="C#" %> <%@ implements interface="System.Web.UI.ICallbackEventHandler"%> <script runat="server" language="c#"> void Page_PreInit(object sender, System.EventArgs e) {     this.Theme = Profile.Theme; } void Page_Load(object sender, System.EventArgs e) {     string callback = Page.GetCallbackEventReference(this, "arg",         "MyCallBackHandler", null);     string script = string.Format("function CallTheServerCallBack(arg)         {{{0}; }}", callback);     this.ClientScript.RegisterClientScriptBlock(this.GetType(),         "CallTheServerCallBack", script, true);     if (this.IsPostBack == false)     {        ListItem item = this.DDL_Theme.Items.FindByText(this.Profile.Theme);        if (item != null)        {            item.Selected = true;        }     } } string ICallbackEventHandler.RaiseCallbackEvent(string eventArgument) {     this.Profile.Theme = eventArgument;     return null; } </script> <html> <head  runat="server">     <title>Untitled Page</title>     <script language="javascript">         function SetTheme(Theme)         {                 CallTheServerCallBack(Theme);         }         function MyCallBackHandler(result, context)         {                 __doPostBack('', '');         }     </script> </head> <body>     <form  runat="server">         <asp:dropdownlist              runat="server" onchange="SetTheme(this.value);">             <asp:listitem>BasicBlue</asp:listitem>             <asp:listitem>SmokeAndGlass</asp:listitem>         </asp:dropdownlist>         ...     </form> </body> </html>

You'll get further information about Client Callback in Chapter 11.