Using Profile Information with ASP.NET AJAX
The ASP.NET profile Web service enables you to use the ASP.NET profile application service in applications. This topic shows how to call the application profile service from the browser by using ECMAScript (JavaScript) code.
Using profile information requires that you first enable the profile service in the Web site. This makes it available as a Web service. When the profile Web service is enabled, you can invoke it by calling methods of the client-script Sys.Services.ProfileService class.
Enabling the Profile Service
To use the profile service from script, you must enable the profile service by using the following element in the application's Web.config file.
<system.web.extensions>
<scripting>
<webServices>
< profileService enabled="true" />
</webServices>
</scripting>
</system.web.extensions>
By default, no profile properties are available. For each profile property that you want to make available in a client application, add the property name to the readAccessProperties attribute of the profileService element. Similarly, for each server profile property that can be set based on data sent from a client application, add the property name to the writeAccessProperties attribute. The following example shows how to expose individual properties and set whether a client application can read and write them.
<profileService enabled="true"
readAccessProperties="Backgroundcolor,Foregroundcolor"
writeAccessProperties=" Backgroundcolor,Foregroundcolor"/>
You define the profile properties in the profile section by using syntax like that in the following example. For grouped properties, use the group element.
<system.web>
<profile enabled="true">
<add name=" Backgroundcolor" type="System.String"
defaultValue="white" />
<add name=" Foregroundcolor" type="System.String"
defaultValue="black" />
<properties>
<group name="Address">
<add name="Street" type="System.String" />
<add name="City" type="System.String"/>
<add name="PostalCode" type="System.String" />
</group>
</properties>
</profile>
</system.web>
For more information, see How to: Configure ASP.NET Services in ASP.NET AJAX.
Example
The following example shows how to use the profile service from client script. The example consists of an ASP.NET Web page that contains a ScriptManager control. When this control is included on the page, the Sys.Services.AuthenticationService object is automatically available to any client script in the page.
The page contains a login button with an associated event handler named OnClickLogin. Code in the method calls the login method of the AuthenticationService object.
After you are logged in, the loginComplete callback function is called, which calls the load method of the Sys.Services.ProfileService object to load the profile for the current user.
The profile information consists of background and foreground colors that you can set after you are logged in. The background and foreground colors are profile properties you must set in the Web.config file. To define these properties, add the following elements to the application's Web.config file:
<profile enabled="true">
<properties>
<add name="Backgroundcolor" type="System.String"
defaultValue="white"/>
<add name="Foregroundcolor" type="System.String"
defaultValue="black"/>
</properties>
</profile>
The example code provides asynchronous completed callback functions for the load and save methods. You can also add failed callback functions for the load and save methods.
Note
Before you run the example, make sure that there is at least one user defined in the application's membership database. For information about how to create a user in the default SQL Server Express Edition database, see Using Forms Authentication with ASP.NET AJAX.
var setProfileProps;
function pageLoad()
{
var userLoggedIn =
Sys.Services.AuthenticationService.get_isLoggedIn();
// alert(userLoggedIn);
profProperties = $get("setProfileProps");
passwordEntry = $get("PwdId");
if (userLoggedIn == true)
{
LoadProfile();
GetElementById("setProfProps").style.visibility = "visible";
GetElementById("logoutId").style.visibility = "visible";
}
else
{
DisplayInformation("User is not authenticated.");
}
}
// The OnClickLogout function is called when
// the user clicks the Logout button.
// It logs out the current authenticated user.
function OnClickLogout()
{
Sys.Services.AuthenticationService.logout(
null, OnLogoutComplete, AuthenticationFailedCallback,null);
}
function OnLogoutComplete(result,
userContext, methodName)
{
// Code that performs logout
// housekeeping goes here.
}
// This is the callback function called
// if the authentication failed.
function AuthenticationFailedCallback(error_object,
userContext, methodName)
{
DisplayInformation("Authentication failed with this error: " +
error_object.get_message());
}
// Loads the profile of the current
// authenticated user.
function LoadProfile()
{
Sys.Services.ProfileService.load(null,
LoadCompletedCallback, ProfileFailedCallback, null);
}
// Saves the new profile
// information entered by the user.
function SaveProfile()
{
// Set background color.
Sys.Services.ProfileService.properties.Backgroundcolor =
GetElementById("bgcolor").value;
// Set foreground color.
Sys.Services.ProfileService.properties.Foregroundcolor =
GetElementById("fgcolor").value;
// Save profile information.
Sys.Services.ProfileService.save(null,
SaveCompletedCallback, ProfileFailedCallback, null);
}
// Reads the profile information and displays it.
function LoadCompletedCallback(numProperties, userContext, methodName)
{
document.bgColor =
Sys.Services.ProfileService.properties.Backgroundcolor;
document.fgColor =
Sys.Services.ProfileService.properties.Foregroundcolor;
}
// This is the callback function called
// if the profile was saved successfully.
function SaveCompletedCallback(numProperties, userContext, methodName)
{
LoadProfile();
// Hide the area that contains
// the controls to set the profile properties.
SetProfileControlsVisibility("hidden");
}
// This is the callback function called
// if the profile load or save operations failed.
function ProfileFailedCallback(error_object, userContext, methodName)
{
alert("Profile service failed with message: " +
error_object.get_message());
}
// Utility functions.
// This function sets the visibilty for the
// area containing the page elements for settings
// profiles.
function SetProfileControlsVisibility(currentVisibility)
{
profProperties.style.visibility = currentVisibility;
}
// Utility function to display user's information.
function DisplayInformation(text)
{
document.getElementById('placeHolder').innerHTML +=
"<br/>"+ text;
}
function GetElementById(elementId)
{
var element = document.getElementById(elementId);
return element;
}
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
<%@ Page Language="VB" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Using Profile Service</title>
<style type="text/css">
body { font: 11pt Trebuchet MS;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManagerId">
<Scripts>
<asp:ScriptReference Path="Profile.js" />
</Scripts>
</asp:ScriptManager>
<h2>Profile Service</h2>
<p>
You must log in first to set or get profile data.
Create a new user, if needed. <br /> Refer to the Authentication example.
</p>
<div id="loginId" style="visibility:visible">
<table id="loginForm">
<tr>
<td>User Name: </td>
<td><input type="text"
id="userId" name="userId" value=""/></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password"
id="userPwd" name="userPwd" value="" /></td>
</tr>
<tr>
<td><input type="button"
id="login" name="login" value="Login"
onclick="OnClickLogin()" /></td>
</tr>
</table>
</div>
<div id="setProfProps" style="visibility:hidden">
<input type="button"
value="Set Profile Properties"
onclick="SetProfileControlsVisibility('visible')"/>
</div>
<div id="placeHolder" style="visibility:visible" />
<br />
<input id="logoutId" type="button"
value="Logout" style="visibility:hidden"
onclick="OnClickLogout()" />
<div id="setProfileProps" style="visibility:hidden">
<table>
<tr>
<td>Foreground Color</td>
<td><input type="text" id="fgcolor"
name="fgcolor" value=""/></td>
</tr>
<tr>
<td>Background Color</td>
<td><input type="text" id="bgcolor"
name="bgcolor" value="" /></td>
</tr>
<tr>
<td><input type="button"
id="saveProf" name="saveProf"
value="Save Profile Properties"
onclick="SaveProfile();" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Using Profile Service</title>
<style type="text/css">
body { font: 11pt Trebuchet MS;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManagerId">
<Scripts>
<asp:ScriptReference Path="Profile.js" />
</Scripts>
</asp:ScriptManager>
<h2>Profile Service</h2>
<p>
You must log in first to set or get profile data.
Create a new user, if needed. <br />
</p>
<div id="setProfProps" style="visibility:visible">
<input type="button"
value="Set Profile Properties"
onclick="SetProfileControlsVisibility('visible')"/>
</div>
<div id="placeHolder" style="visibility:visible" />
<br />
<input id="logoutId" type="button"
value="Logout" style="visibility:hidden"
onclick="OnClickLogout()" />
<div id="setProfileProps" style="visibility:hidden">
<table>
<tr>
<td>Foreground Color</td>
<td><input type="text" id="fgcolor"
name="fgcolor" value=""/></td>
</tr>
<tr>
<td>Background Color</td>
<td><input type="text" id="bgcolor"
name="bgcolor" value="" /></td>
</tr>
<tr>
<td><input type="button"
id="saveProf" name="saveProf"
value="Save Profile Properties"
onclick="SaveProfile();" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
See Also
Tasks
How to: Configure ASP.NET Services in ASP.NET AJAX
Concepts
Using Web Services in ASP.NET AJAX
Calling Web Services from Client Script
Using Forms Authentication with ASP.NET AJAX