ASP.NET โ Personalization โ Customize User Experience with Profiles, Themes & Web Parts
Introduction โ What Is Personalization in ASP.NET?
ASP.NET Personalization allows you to customize the user experience by saving user-specific preferences, layouts, and settings. It enables dynamic changes to the UI based on each userโs needsโwhether theyโre authenticated or anonymous.
It works using tools like:
- Profiles โ Store user-specific data on the server
- Themes & Skins โ Customize look and feel
- Web Parts โ Enable drag/drop UI personalization
In this guide, youโll learn:
- How personalization works in ASP.NET Web Forms
- How to use the Profile system in
web.config - How to apply Themes and Skins
- How to build Web Part Zones for user layout customization
- Complete code examples with output and explanations
ASP.NET Personalization โ File Overview
| File Name | Purpose |
|---|---|
ProfileDemo.aspx | Profile example to store and retrieve user data |
ThemeDemo.aspx | Page using themes and skins |
WebPartsDemo.aspx | Page using Web Parts for user layout |
web.config | Configures profile settings and themes |
Example 1: Personalization with Profile in web.config
<configuration>
<system.web>
<authentication mode="Forms" />
<profile>
<properties>
<add name="FullName" type="string" />
<add name="PreferredTheme" type="string" defaultValue="Dark" />
</properties>
</profile>
</system.web>
</configuration>
Explanation
| Tag/Attribute | What It Does |
|---|---|
<authentication mode="Forms" /> | Enables Forms Authentication for storing user-specific profile info |
<profile> | Activates the ASP.NET profile system |
<add name="FullName"...> | Defines a profile property for storing the userโs full name |
type="string" | Declares the data type to be stored in the profile |
defaultValue="Dark" | Optional value used when the user hasnโt selected a specific theme yet |
Step 1: ProfileDemo.aspx โ Set and Get Profile Data
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProfileDemo.aspx.cs" Inherits="ProfileDemo" %>
<html>
<body>
<form id="form1" runat="server">
<h3> ASP.NET Profile Demo</h3>
<asp:Label ID="lblPrompt" runat="server" Text="Enter full name:" /><br />
<asp:TextBox ID="txtFullName" runat="server" /><br /><br />
<asp:Button ID="btnSave" runat="server" Text="Save Profile" OnClick="btnSave_Click" />
<asp:Button ID="btnLoad" runat="server" Text="Load Profile" OnClick="btnLoad_Click" /><br /><br />
<asp:Label ID="lblProfile" runat="server" Font-Bold="true" ForeColor="Green" />
</form>
</body>
</html>
Code-Behind โ ProfileDemo.aspx.cs
public partial class ProfileDemo : System.Web.UI.Page
{
protected void btnSave_Click(object sender, EventArgs e)
{
Profile["FullName"] = txtFullName.Text;
lblProfile.Text = "Saved profile for: " + txtFullName.Text;
}
protected void btnLoad_Click(object sender, EventArgs e)
{
string name = Convert.ToString(Profile["FullName"]);
lblProfile.Text = "Welcome back, " + name;
}
}
Code Explanation
| Line | What It Does |
|---|---|
Profile["FullName"] = txtFullName.Text; | Saves the user’s name into the profile under the key “FullName” |
lblProfile.Text = "Saved profile... | Displays a confirmation message after saving |
string name = Convert.ToString(...); | Reads the name back from the profile and converts it to a string |
lblProfile.Text = "Welcome back, ..." | Displays the stored name as a personalized welcome message |
Output Preview
ASP.NET Profile Demo
โ Enter full name: [John Smith]
[Save Profile] โ Saved profile for: John Smith
[Load Profile] โ Welcome back, John Smith
Profile data is stored per user and survives between sessions.
Example 2: Themes & Skins โ UI Personalization
Folder Structure:
App_Themes/
โโโ Dark/
โโโ TextBox.skin
TextBox.skin
<asp:TextBox runat="server" ForeColor="White" BackColor="Black" />
Explanation
| Tag | What It Does |
|---|---|
<asp:TextBox ... /> | Defines the style to be applied to all TextBox controls under the “Dark” theme |
ThemeDemo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ThemeDemo.aspx.cs" Inherits="ThemeDemo" Theme="Dark" %>
<html>
<body>
<form id="form1" runat="server">
<h3> Theme Demo</h3>
<asp:TextBox ID="txtSample" runat="server" Text="Dark themed textbox" />
</form>
</body>
</html>
Explanation
| Line | What It Does |
|---|---|
Theme="Dark" | Applies the Dark theme from the App_Themes folder |
Text="Dark themed textbox" | Adds default text for visual testing |
Automatically applies skin to all matching controls.
Example 3: Personalization with Web Parts
WebPartsDemo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebPartsDemo.aspx.cs" Inherits="WebPartsDemo" %>
<html>
<body>
<form id="form1" runat="server">
<asp:WebPartManager ID="WebPartManager1" runat="server" />
<asp:WebPartZone ID="WebPartZone1" runat="server" HeaderText="Personalized Widgets">
<ZoneTemplate>
<asp:Calendar ID="Calendar1" runat="server" />
<asp:Label ID="lblDate" runat="server" Text="User-specific label" />
</ZoneTemplate>
</asp:WebPartZone>
</form>
</body>
</html>
Explanation
| Line | What It Does |
|---|---|
<asp:WebPartManager /> | Required to manage all Web Parts on the page |
<asp:WebPartZone /> | Defines a draggable area for personalization |
<asp:Calendar /> | Adds a calendar Web Part |
<asp:Label /> | Adds a label Web Part users can rearrange or hide |
Users can rearrange, hide, and customize these controls, and ASP.NET tracks changes per user.
Summary โ Recap & Takeaways
Key Learnings:
- Use Profiles to store user-specific data like names, themes, and preferences
- Apply Themes and Skins for dynamic UI customization
- Use Web Parts to create modular, rearrangeable user interfaces
- Personalization can persist across sessions and logins for each user
Personalization improves UX by delivering content and appearance tailored to each user.
Frequently Asked Questions (FAQs)
Where is Profile data stored?
In SQL Server or other providers, depending on your configuration. You can customize it via membership settings.
Do themes apply automatically to all controls?
Only if they match the control type defined in the .skin file and you set the Theme attribute in the page or web.config.
Can I create dynamic profiles without adding each property in web.config?
Yes, by using typed profiles or dynamically accessing Profile["Key"].
Are Web Parts supported in all ASP.NET versions?
Web Parts are fully supported in ASP.NET Web Forms but not in MVC or .NET Core.
Share Now :
