Pages

Thursday, October 4, 2012

Adding custom fields to a VS2012 MVC4 SimpleMembership system

Add custom columns/fields to your MVC4 SimpleMembership "UserProfile" table


(This is the 2nd of a 3-article series, on using SimpleMembership along with customized fields)
Article 1: Visual Studio 2012 uses SimpleMembership as its new Membership Provider
Article 2: This article.
Article 3: Programatically accessing values in VS2012 SimpleMembership custom fields

MVC 4 in Visual Studio 2012 introduces the new SimpleMembership Provider as its default web-based authentication system. While this system is much simpler than the earlier ASPNETDB system that it replaces, there definitely are a few new and neat tricks to be learnt.

One of them is: How do I add custom fields to my MVC 4 registration system?

It can be done in just 4 simple steps:

1. Start up VS 2012, and create a new MVC 4 web project. Set up your SimpleMembership registration system - for some help, please see my blog post on setting up a SimpleMembership Provider in a VS2012 MVC4 project.

2. Next, run the project and navigate to the login page, so that the tables get created. It is not necessary to create a user at this point.

3. Then, in your database, alter the table UserProfile, and add a column: FullName (nvarchar(50)).

4. Next, add/reference the new FullName field in the following programs in your project:
In class UserProfile, in AccountModels.cs (to ensure the class matches the table columns):

    [Table("UserProfile")]
    public class UserProfile
    {
        [Key]
        [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
        public int UserId { get; set; }
        public string UserName { get; set; }
        // Customization: Field(s) added
        public string FullName { get; set; }
    }

In class RegisterModel, in AccountModels.cs (to enable handling on the registration form):

    public class RegisterModel
    {
        // Existing code
        // ...

        // Customization: Field(s) added
        [Required]
        [Display(Name = "Your full name")]
        [DataType(DataType.Text)]
        public string FullName { get; set; }
    }

In the Register.cshtml view (so it'll appear on the user registration form), add a new li element with the following content:
    @Html.LabelFor(m => m.FullName)
    @Html.TextBoxFor(m => m.FullName)

In the [HttpPost] Register ActionResult, in AccountController.cs, modify the call to the CreateUserAndAccount method (to write the new column to your database):
    // Customization: Field(s) added when creating a new account
    WebSecurity.CreateUserAndAccount(
        model.UserName,
        model.Password,
        new { FullName = model.FullName }
        );

Now run your program and register a new user, supplying a value for the FullName field... success! The new row created in your database table contains the value supplied for the new column!

Note: This post covers how to create a custom column. Another post explains how to access the value of that column from within your VS 2012 MVC 4 projects. The link is given below.

Happy coding!

(This is the 2nd of a 3-article series, on using SimpleMembership along with customized fields)
Article 1: Visual Studio 2012 uses SimpleMembership as its new Membership Provider
Article 2: This article.
Article 3: Programatically accessing values in VS2012 SimpleMembership custom fields

8 comments:

  1. Thank you very much. I've been searching this for a while :)

    ReplyDelete
  2. Thanks! Basic idea - FIRST need to create sql Table with needed columns

    ReplyDelete
  3. How you add more than one column? like this new { FirstName = model.FirstName, LastName = model.LastName}?

    ReplyDelete
    Replies
    1. Here's another example with 2 columns (including how to use them from within your program:

      http://www.dwdmbi.com/2013/07/vs2012-simplemembership-custom-fields.html

      Delete
  4. Thanks. Here's the sequel:

    http://www.dwdmbi.com/2013/07/vs2012-simplemembership-custom-fields.html

    ReplyDelete
  5. You are the best, thank you, works Perfect!!

    ReplyDelete