Utilizzo delle informazioni sul profilo con ASP.NET AJAX

Articolo
10/22/2014

Aggiornamento: novembre 2007

Il servizio Web del profilo ASP.NET consente di utilizzare il servizio di applicazione del profilo ASP.NET nelle applicazioni di°. In questo argomento viene illustrato come chiamare il servizio profili dell'applicazione dal browser utilizzando il codice ECMAScript (JavaScript).

Per utilizzare le informazioni sul profilo, occorre innanzitutto attivare il servizio profili nel sito Web. Le informazioni saranno rese disponibili come servizio Web. Quando il servizio Web del profilo è attivato, è possibile richiamarlo tramite una chiamata ai metodi della classe Sys.Services.ProfileService dello script client.

Attivazione del servizio profili

Per utilizzare il servizio profili dallo script è necessario attivarlo utilizzando l'elemento seguente nel file Web.config dell'applicazione.

<system.web.extensions>
  <scripting>
    <webServices
      < profileService enabled="true" />
    </webServices
  </scripting>
</system.web.extensions>

Per impostazione predefinita, non sono disponibili proprietà del profilo. Per ogni proprietà del profilo da rendere disponibile in un'applicazione client, aggiungere il nome della proprietà all'attributo readAccessProperties dell'elemento profileService. Allo stesso modo, per ogni proprietà del profilo del server che può essere impostata in base ai dati inviati da un'applicazione client, aggiungere il nome della proprietà all'attributo writeAccessProperties. Nell'esempio seguente viene illustrato come esporre singole proprietà e impostare se un'applicazione client può leggere e scrivere tali proprietà.

<profileService enabled="true" 
  readAccessProperties="Backgroundcolor,Foregroundcolor" 
  writeAccessProperties=" Backgroundcolor,Foregroundcolor"/>

Per definire le proprietà del profilo nella sezione profile, utilizzare una sintassi simile a quella nell'esempio seguente. Per le proprietà raggruppate, utilizzare l'elemento group.

<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>

Per ulteriori informazioni, vedere la classe Procedura: configurare servizi ASP.NET in ASP.NET AJAX.

Esempio

Nell'esempio seguente viene illustrato come utilizzare il servizio profili da script client. Nell'esempio viene mostrata una pagina Web ASP.NET contenente un controllo ScriptManager. Quando questo controllo è incluso nella pagina, l'oggetto Sys.Services.AuthenticationService diventa automaticamente disponibile per qualsiasi script client nella pagina.

La pagina contiene un pulsante di accesso con un gestore eventi associato denominato OnClickLogin. Il codice nel metodo chiama il metodo login dell'oggetto AuthenticationService.

Dopo aver effettuato l'accesso, viene chiamata la funzione di callback loginComplete, la quale a sua volta chiama il metodo load dell'oggetto Sys.Services.ProfileService per caricare il profilo per l'utente corrente.

Le informazioni sul profilo consistono nei colori di primo piano e sfondo che è possibile impostare dopo aver effettuato l'accesso. I colori di primo piano e sfondo sono proprietà del profilo che devono essere impostate nel file Web.config. Per definire queste proprietà, aggiungere i seguenti elementi al file Web.config dell'applicazione:

<profile enabled="true">
  <properties>
    <add name="Backgroundcolor" type="System.String"
       defaultValue="white"/>
    <add name="Foregroundcolor" type="System.String"
       defaultValue="black"/>
  </properties>
</profile>

Nel codice di esempio vengono fornite funzioni di callback completate asincrone per i metodi Load e Save. È anche possibile aggiungere funzioni di callback non riuscite per gli stessi metodi.

Nota:
Prima di eseguire l'esempio, accertarsi che almeno un utente sia definito nel database di appartenenze dell'applicazione. Per informazioni sulla creazione di un utente nel database di SQL Server Express Edition predefinito, vedere Utilizzo dell'autenticazione basata su form con 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" >

    <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" >
    
        <asp:ScriptManager  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 >

    <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" >
    
        <asp:ScriptManager  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>