October 23, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Consuming Membership and Profile Services via ASP.NET AJAX

  • February 26, 2007
  • By Bipin Joshi
  • Send Email »
  • More Articles »

Implementing Logout Functionality

Add another web form called Default.aspx. This web form will allow users to logout and manage their profiles. Firstly, you will implement logout functionality. Drag and drop a ScriptManager control on the Default.aspx and design the web form as shown in Figure 6.

Figure 6. The Web Form Design

The web form consists of a couple of Label controls to display a welcome message to the user. The Logout button allows the user to delete the authentication cookie, thus logging him out. The OnClientClick property of the Login button is set to "return BeginLogOut();" (BeginLogout() is a JavaScript function that you will write later). The "Show My Profile" button toggles the profile panel. The OnClientClick property of the "Show My Profile" button is set to "return BeginProfileLoad();" (you will create the BeginProfileLoad() function later). The profile panel consists of a Panel control containing textboxes to display and show profile property values. It also contains the "Save Profile" button for saving changes made to the profile values. The OnClientClick property of the "Save Profile" button is set to "return BeginSaveProfile();" (the BeginSaveProfile() function will be coded later).

In the Page_Load event of the web form, you set the welcome label to the ID of the user. The following code shows how:

protected void Page_Load(object sender, EventArgs e)
{
   Label4.Text = Membership.GetUser().UserName;
}

The code simply retrieves the user name of the current user and assigns it to the label. Note that the GetUser() method of the Membership object returns an object of type MembershipUser. The UserName property of the MembershipUser class is then called. You need to display the user name from the server-side code because ASP.NET AJAX doesn't provide any way to retrieve it via client-side code.

Now, switch to the HTML source view of Default.aspx and write the BeginLogOut() and EndLogOut() JavaScript functions as shown below:

function BeginLogOut()
{
   Sys.Services.AuthenticationService.logout
   (null,EndLogout,OnError,null);
   return false;
}
function EndLogout(result)
{
   //nothing here
}

The BeginLogOut() function again uses the AuthenticationService class. This time, it calls the logout() method of AuthenticationService. The logout() method takes the following four parameters:

  • The first parameter indicates a URL where the user should be taken after successful logout.
  • The second parameter specifies a callback function to be called when the logout operation is complete.
  • The third parameter specifies a callback function to be called when the logout operation fails.
  • The fourth parameter indicates a custom context information.

As before, the BeginLogOut() function returns false so that there is no post back. The EndLogOut() function doesn't perform any action in this example.

Reading Profile Properties

Initially, the profile panel should be hidden from the end user. This is done in the pageLoad() JavaScript function. Note that the pageLoad() function is called by the ASP.NET AJAX framework when the page loads in the browser. You can think of it as a client-side counterpart of server-side Page_Load event. The pageLoad() function is shown below:

function pageLoad()
{
   var panel3=document.getElementById('Panel3');
   panel3.style.visibility="hidden";
}

The pageLoad() function simply sets the visibility property of the style object to hidden, thus hiding the profile panel.

When you click on the "Show My Profile" button, the profile panel needs to be displayed with the profile property values filled in. The BeginProfileLoad() function does this job:

function BeginProfileLoad()
{
   if(event.srcElement.value=="Show my profile")
   {
      var panel3=document.getElementById('Panel3');
      panel3.style.visibility="visible";
      event.srcElement.value="Hide my profile";
      Sys.Services.ProfileService.load
      (null,EndProfileLoad,OnProfileFailed, null);
   }
   else
   {
      var panel3=document.getElementById('Panel3');
      panel3.style.visibility="hidden";
      event.srcElement.value="Show my profile";
   }
   return false;
}

The BeginProfileLoad() function toggles visibility of the profile panel. If the profile panel is to be displayed, then you must populate various textboxes with profile values. The ASP.NET AJAX framework provides a class called ProfileService that allows you to work with profile properties. The load() method of the ProfileService class loads profile property values. The load() method takes four parameters, which do the following:

Parameter Significance
1 An array of property names that are to be loaded. If you have too many profile properties, then it makes sense to load the ones that you really want to use. This will improve the performance of your page.
2 A callback function that will be called when the load operation is completed
3 A callback function that will be called if the load operation fails
4 Custom context information, if any

Once the profile is loaded the EndProfileLoad() function is called. This is the EndProfileLoad():

function EndProfileLoad(numProperties, userContext, methodName)
{
   document.getElementById('TextBox3').value =
      Sys.Services.ProfileService.properties.FullName;
   document.getElementById('TextBox4').value =
      Sys.Services.ProfileService.properties.DOB;
   document.getElementById('TextBox5').value =
      Sys.Services.ProfileService.properties.Address.Street;
   document.getElementById('TextBox6').value =
      Sys.Services.ProfileService.properties.Address.Country;
   document.getElementById('TextBox7').value =
      Sys.Services.ProfileService.properties.Address.PostalCode;
}

The EndProfileLoad() function receives three parameters: number of properties that are loaded, context information that is supplied to the load() function, and method name. It then populates the textboxes with the profile property values. The ProfileService class exposes profile properties via the properties collection. Remember that only the properties specified in the readAccessProperties attribute of the profileService tag of web.config are exposed. The properties and groups are accessed with the familiar dot (.) notion.

Modifying Profile Properties

When profile property values are displayed in various textboxes, the user can change them and click on the "Save Profile" button. Clicking on the "Save Profile" button calls the BeginSaveProfile() function, which is shown here:

function BeginSaveProfile()
{
   Sys.Services.ProfileService.properties.FullName=
      document.getElementById('TextBox3').value;
   Sys.Services.ProfileService.properties.DOB=
      document.getElementById('TextBox4').value;
   Sys.Services.ProfileService.properties.Address.Street=
      document.getElementById('TextBox5').value;
   Sys.Services.ProfileService.properties.Address.Country=
      document.getElementById('TextBox6').value;
   Sys.Services.ProfileService.properties.Address.PostalCode=
      document.getElementById('TextBox7').value;
   Sys.Services.ProfileService.save
   (null,EndSaveProfile,OnProfileFailed,null);
   return false;
}

The code again uses the ProfileService class and its properties collection to assign new values. Once all the profile properties are set, it calls the save() method of the ProfileService class. The save() method takes the same four parameters as the load() method (in other words, the array of properties to write, the callback function to be called after successful saving, the callback function to be called after unsuccessful save, and custom context information). The EndSaveProfile() function simply displays a message box to the user:

function EndSaveProfile(numProperties, userContext, methodName)
{
   alert('Your profile is saved successfully!');
}

That's it! You just completed your AJAX-driven membership and profile pages. You now can log in to the web site and test the profile features. Figure 7 shows a sample run of the default.aspx.

Figure 7. A Sample Run of the Default.aspx

Consuming Membership and Profile Features from the Client Side

ASP.NET AJAX provides a handy way to consume membership and profile features. To consume these features, you need to enable them by using the authenticationService and profileService tags of web.config. Once enabled, you can use the AuthenticationService and ProfileService classes to consume them.

Download the Code

Download the code that accompanies the examples in this article.

About the Author

Bipin Joshi is the founder and owner of BinaryIntellect Consulting, where he conducts professional training programs on .NET technologies. He is the author of Developer's Guide to ASP.NET 2.0 and co-author of three WROX press books on .NET 1.x. He also is a Microsoft MVP, member of ASPInsiders, MCAD, and MCT.





Page 3 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel