ASP.NET Profiles Purely With AJAX
(
Jun 09 2007 - 12:33:59 PM by
Timothy Khouri) - [
print article]
ASP.NET 2.0 brought a lot to the table with the Membership and Profiles API. Now with ASP.NET AJAX, you can fully work with these right there in your client script. This article will show you how easy it is to make an "edit your profile" page that doesn't even have a code-behind file. That's right, no C#, no VB.NET, just AJAX.
First of all I want to bring out that this article is going to assume that you are already familiar with the Profile API of ASP.NET 2.0. You should already know how to make a connection string in your web.config file, and at least a brief understanding of membership, users and the concept of each user having their own profile. Also, you should at least be somewhat familiar with ASP.NET AJAX and how to put the dll's in your bin folder and update your web.config. Even if you're not fully up on these concepts just yet, you can still benefit from seeing how easy it is, and maybe that will inspire you to get started.
We are going to discuss the three areas that you will need to work in to wire-up all your functionality to make this "edit your profile" page. First, you'll need to configure the profile section of your web.config to tell ASP.NET what properties each user will have. You'll also need to tell ASP.NET AJAX what properties you are going to want to expose to have read and write permissions. Next, we'll make our user interface (a simple HTML form). And last, we'll look at the client script (JavaScript) that will tie this all together.
Exposing Your Profile to AJAX in the Web.config
There are just a few things you need to do with the web.config to tell ASP.NET AJAX that you want it to manage profiles. You will also need to tell it what properties in the profile can be read and written to. Here's the code:
<profile defaultProvider="MyProfileProvider">
<properties>
<add name="FirstName" type="System.String" />
<add name="LastName" type="System.String" />
<add name="WebAddress" type="System.String" />
<add name="MakeNamePublic" type="System.Boolean" />
<add name="RecieveEmails" type="System.Boolean" />
</properties>
<providers>
<add name="MyProfileProvider"
connectionStringName="MyConnection"
type="System.Web.Profile.SqlProfileProvider" />
</providers>
</profile>
<system.web.extensions>
<scripting>
<webServices>
<profileService enabled="true"
readAccessProperties="FirstName, LastName,
WebAddress, MakeNamePublic, RecieveEmails"
writeAccessProperties="FirstName, LastName,
WebAddress, MakeNamePublic, RecieveEmails" />
</webServices>
</scripting>
</system.web.extensions>
Creating the User Interface
Because we are going to be using pure ASP.NET AJAX to communicate to the server, we don't need to make server side controls. This form below is using some basic HTML to build the UI. The form below is basically 3 text boxes and 2 check boxes. I've wrapped it all in a fieldset and done some styling in a seperate stylesheet, but the important thing to note is the fact that there are no server controls below. All that's here are a few few HTML input controls with an ID attribute assigned to each one. Here is the HTML code:
<form runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<fieldset id="ContactFieldset">
<label>
First Name
<input type="text" id="FirstNameTextBox" /></label>
<label>
Last Name
<input type="text" id="LastNameTextBox" /></label>
<label>
Web Address
<input type="text" id="WebAddressTextBox" /></label>
<span class="CheckBox">
<input type="checkbox" id="MakeNamePublicCheckBox" />
<label for="MakeNamePulbicCheckBox">
Display your real name on your posts</label></span>
<span class="CheckBox">
<input type="checkbox" id="RecieveEmailsCheckBox" />
<label for="MakeNamePulbicCheckBox">
Recieve emails from other members</label></span>
<button onclick="SaveProperties();">
<button onclick="SaveProperties();">
Save</button>
</fieldset>
<p id="Status"></p>
</form>
The form above will look like this:
The JavaScript to Tie It Together
All that is left now is to put the JavaScript code in place that will communicate between the client and the server. We need to first load the profile for the current user and populate our form when the page loads. Then we'll want to expose a "Save" button so that the user can update their profile. The last piece that is left is to let the user know that their profile was saved. We'll do this with a status label that will hide itself after 5 seconds.
Breaking this down piece by piece we see that we have to first load the profile for the authenticated user and update the form. This is done by calling the "load" function of the Sys.Services.ProfileService object. If that call is successful, then we want to populate the form. If there was an error, we want to alert the user. Here is the code:
window.onload = function() {
Sys.Services.ProfileService.load(null, onLoadSuccess, onError);
}
function onLoadSuccess(obj) {
$get("FirstNameTextBox").value =
Sys.Services.ProfileService.properties.FirstName;
$get("LastNameTextBox").value =
Sys.Services.ProfileService.properties.LastName;
$get("WebAddressTextBox").value =
Sys.Services.ProfileService.properties.WebAddress;
$get("MakeNamePublicCheckBox").checked =
Sys.Services.ProfileService.properties.MakeNamePublic;
$get("RecieveEmailsCheckBox").checked =
Sys.Services.ProfileService.properties.RecieveEmails;
}
function onError(error) {
$get("Status").innerHTML = error.get_message();
}
The above code will try to load the profile for the current user when the page loads. If this is successful, our "onLoadSuccess" function will fire and we can populate the form. If there was an error, the "onError" function will fire and we will display the error message to the user.
Now we need to create the last part of the equation, the "Save Profile" functionality. This is a lot like the "load" method that is called above. We simply assign the new values to the profile object in JavaScript and then call "save" on the Sys.Services.ProfileService object. Here is the code:
function SaveProperties() {
Sys.Services.ProfileService.properties.FirstName =
$get("FirstNameTextBox").value;
Sys.Services.ProfileService.properties.LastName =
$get("LastNameTextBox").value;
Sys.Services.ProfileService.properties.WebAddress =
$get("WebAddressTextBox").value;
Sys.Services.ProfileService.properties.MakeNamePublic =
$get("MakeNamePublicCheckBox").checked;
Sys.Services.ProfileService.properties.RecieveEmails =
$get("RecieveEmailsCheckBox").checked;
Sys.Services.ProfileService.save(null, onSaveSuccess, onError);
}
function onSaveSuccess() {
clearTimeout();
$get("Status").innerHTML = "Your profile has been saved.";
setTimeout(function() { $get("Status").innerHTML = ""; }, 5000);
}
If all goes well, you should see this when you click the "Save" button:
I hope this article has shown how easy it is to use ASP.NET AJAX to tap into the Profile API. Remember there was no code-behind necessary for this example, which means that ASP.NET AJAX is handling a lot for you.
Once you start using ASP.NET AJAX, or if you are already familiar with it, you'll see how clean and fast it lets you do things. Also, you'll start to notice that some old flaws of the web begin to disappear. There are however other dangers to be aware of. Like with any other technology, ASP.NET AJAX has its place and it can be abused pretty easily. But don't let that stop you from trying things out.