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