Implementing Custom Profile in ASP.NET MVC 4 using ProfileBase

This article aims to explain how to work with ProfileProvider in ASP.NET MVC 4, and implementing custom user profile.

As we know, the membership, roles and profile tables have been restructured in MVC 4. Profile information of each user now gets stored in “Profile” table in database.

The below screenshot is taken from an SQL Server database, but you can easily correlate it with other database if your data provider is Oracle, etc. Also, it will work if your profile table is pre-MVC 4 version (i.e. aspnet_Profile).

Each row in this table represents a User profile associated with a User (UserId links User with the profile). 

For each user there is only one row in this table containing complete information about profile.

PropertyNames >> Contains name of each property in profile

PropertyValueStrings >> Text value of each property of corresponding user’s profile. Its stored based on character index. Each profile will have more than one property (as we will see later), and character indexing helps in identifying values corresponding to property.

PropertyValueBinary >> Binary representation of PropertyValueStrings field.

As such, we are least concerned about how the values are stored and retrieved in database, because it’s a job of Profile provider in ASP.NET MVC 4. We do not need to directly deal with this table at all!

Let us have a Walkthrough to understand how to implement this:

If you are not aware about how to enable membership, role and profile providers (System.Web.Providers) in your MVC 4 application, please do visit this link before looking into below walkthrough.

STEP 1 Configure Profile provider in web.config:

Make sure you have following section in <system.web> in your web.config file. Here, “DefaultConnection” is a ConnectionString's name in <ConnectionStrings> section of your web.config. 

Change name, connectionStringName, and applicationName attributes according to your preferences.

<profile defaultProvider="DefaultProfileProvider">

      <providers>

        <add name="DefaultProfileProvider" type="System.Web.Providers.DefaultProfileProvider, System.Web.Providers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" connectionStringName="DefaultConnection" applicationName="MyApp"/>       

      </providers>

</profile>

STEP 2 Define Profile properties:

Define properties that constitutes a user profile in your application. Add them under above added <profiles> section in your web.config. Profile properties can also be grouped, such as Contact, Address, etc.

<properties>

<add name="ForeNames" type="System.String"/>

<add name="LastName" type="System.String"/>

<add name="Gender" type="System.String"/>

<group name="Contact">

<add name="MobileNo" type="System.String"/>

<add name="EmailAddress" type="System.String"/>

</group>

</properties>

That’s all you need to do in web.config.

STEP 3 Add Model for Profile object in your MVC application:

This model represents Profile in your MVC application. Ideally, it should be in sync with the one defined in Web.config.

This model will be used to pass Profile data from Controller action to View, and post them back from View to Controller action.

Add following model in “Models” folder in your MVC structure. (Make a new file, or add it in existing file. It’s all up to you.)

public class ProfileModel

{

[Display(Name = "First Name")]

        public string ForeNames { get; set; }

        [Display(Name = "Last Name")]

        public string LastName { get; set; }

        [Display(Name = "Gender")]

        public string Gender { get; set; }

        [Display(Name = "Mobile No")]

        public string MobileNo { get; set; }

        [Display(Name = "Email Address")]

        public string EmailAddress { get; set; }

}

STEP 4 Add a new View, and Bind it with ProfileModel:

Add a new view under “Views” folder (Place it under a controller-specific view folder, or a “Shared” folder, wherever you wish to).

Bind the view with the ProfileModel, and design UI accordingly, and also enforce validations as you wish.

UI should include entry fields for corresponding profile properties, as well as showing validation messages, and a Submit button to the corresponding POST action in controller. (Next steps will show you controller actions).

I am leaving the designing of view to you!

Sample:

STEP 5 Write a GET action to fetch user profile using Profile provider, and launch View created in above step:

A GET action needs to be written in your controller to fetch profile information from database using Profile provider.

public ActionResult EditProfile()

{           

      ProfileBase _userProfile = ProfileBase.Create(HttpContext.User.Identity.Name);

      ProfileModel _profile = new ProfileModel();

      if (_userProfile.LastUpdatedDate > DateTime.MinValue)

      {

          _profile.ForeNames = Convert.ToString(_userProfile.GetPropertyValue("ForeNames"));

          _profile.LastName = Convert.ToString(_userProfile.GetPropertyValue("LastName"));

          _profile.Gender = Convert.ToString(_userProfile.GetPropertyValue("Gender"));

          _profile.MobileNo = Convert.ToString(_userProfile.GetProfileGroup("Contact").GetPropertyValue("MobileNo"));

          _profile.EmailAddress = Convert.ToString(_userProfile.GetProfileGroup("Contact").GetPropertyValue("EmailAddress"));

       }

       return View(_profile);

}

The above controller action is HTTP GET method, and should be called from “Edit Profile” or similar link of your choice in your application. (I have given an example in STEP 7 later)

First of all, it retrieves profile information of specific user (passed as parameter in ProfileBase.Create method) from database.

Also, ProfileModel is instantiated; this is what we are binding with the “Edit Profile” view.

Further, if there exists a user profile for the user, then properties of ProfileModel instance gets assigned according to the actual values in user profile.

Finally, a View is invoked by supplying ProfileModel object for binding.

Note: Here, I assume that your View is named as “EditProfile” and exists in the same controller.

If that’s not the case, you need to set appropriate parameters in a call to “View” method.

STEP 6 Write a POST action to post model to View:

When a user clicks on a Submit button in “Edit Profile” view, an HTTP Post action from a controller gets called. This method accepts a ProfileModel instance updated by user through “Edit Profile” view.

[HttpPost]

public ActionResult EditProfile(ProfileModel model)

{

    if (ModelState.IsValid)

    {

       // Attempt to register the user profile

       System.Web.Profile.ProfileBase profile = System.Web.Profile.ProfileBase.Create(User.Identity.Name, true);

       if (profile != null)

       {

           profile.SetPropertyValue("Gender", model.Gender);

           profile.SetPropertyValue("ForeNames", model.ForeNames);

           profile.SetPropertyValue("LastName", model.LastName);

           profile.GetProfileGroup("Contact").SetPropertyValue("MobileNo", model.MobileNo);

           profile.GetProfileGroup("Contact").SetPropertyValue("EmailAddress", model.EmailAddress);

           profile.Save();

       }

       else

       {

           ModelState.AddModelError("", "Error writing to Profile");

       }

    }     

    return View(model);

}

The above controller action is an HTTP POST method, and gets called when a user clicks a Submit button to Save profile changes.

It first validates, if the user profile changes satisfies all the validations. If not, it will create an instance of ProfileBase object using Reflector for the specific user. It will assign profile properties from the values updated in ProfileModel object. Once done, Save user profile in database. (If the profile for the particular user does not exist, it will create a new one, or else, it will update existing profile).

Step:7 Call to GET action

Finally, we need a user interface to allow user to launch “Edit Profile” view. And for that, we need to call “EditProfile” HTTP GET action (Step 5) of the controller from some UI element.

@Html.ActionLink("Edit Profile", "EditProfile", "Account")

Our example is specific to deal with logged in user’s profile only. But you can easily tweak it by adding a parameter to accept user name to allow users to view/ manage profile of other users’ in your application.

CodeProject