Knowledge is power. We love to share it.

News related to Mono products, services and latest developments in our community.

imarusic

Building a custom ASP.NET user registration form

11/17/2011Categories: MonoX

Many custom solutions require development of a custom user registration form. In this article we'll show you how to build a simple MonoX user registration form that includes several custom fields. 

The problem

Most of the MonoX custom sites use MonoX membership editor to collect basic user data. There are many scenarios in which you need to add a few additional fields to the registration form like gender, age, address, first name, last name, ... In that case you can utilize the basic MonoX functionality and extend it as explained in the rest of this article.

MonoX Membership editor web part

MonoX Membership editor comes with the basic registration form which gathers user data such as user name, password, email and the time zone. We will add some additional fields such as the first name, last name and include them into the standard membership editor. First thing we have to do is to add a new user control which extends the MonoX membership editor. This is the standard approach even if you have the full source code: it will allow you to easily upgrade your solution to the new version of MonoX. Changing the original source code "in place" is a bad idea, since it makes the upgrade process much more difficult (it is very difficult to sync the changes made by you and by the original team if they are both made on the same set of files). Custom membership manager code behind file is displayed below: 

namespace YourNamespace
{
    public partial class CustomMembershipEditor : MonoSoftware.MonoX.ModuleGallery.MembershipEditor
    {
    
    }
}

You need to copy the markup code from the MonoX membership editor to your Custom membership editor and replace this code snippet:

<%@ Control
    Language="C#"
    AutoEventWireup="true"
    Inherits="MonoSoftware.MonoX.ModuleGallery.MembershipEditor"    
    Codebehind="MembershipEditor.ascx.cs" %>

with this one:

<%@ Control Language="C#"
  AutoEventWireup="True"
  CodeBehind="CustomMembershipEditor.ascx.cs"
  Inherits="YourNamespace.CustomMembershipEditor"
%>

and add the additional fields.

<dd>
      <label for="<%= txtFirstName.ClientID %>">
          First name:</label>
      <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
</dd>
<dd>
      <label for="<%= txtLastName.ClientID %>">
          Last name:</label>
      <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
</dd>

Your custom membership editor is now ready for customization. MonoX membership editor exposes many events which can be utilized, but in this case we will use only two of them:

/// <summary>
/// Occurs after default membership creation has been done. One can perform custom creation actions in this event. If the actions fail, creation is rolled back.
/// </summary>
public event MembershipModuleEvent AccountCreated;
/// <summary>
/// Occurs after default membership update (password and email change) has been done. One can perform custom update actions in this event. If the actions fail, update is rolled back.
/// </summary>
public event MembershipModuleEvent AccountUpdated;

All we have to do is to attach to AccountCreated and AccountUpdated events, transfer data to and from controls and save the data to our database. For this scenario we will use MonoX DataManager(you can find more about DataManager here) which does all that work for us (you can alternatively use a data access strategy of your choice). Below is an example on how to initialize the data manager and attach it to the MonoX events described above.

DataManager.IsPreviewMode = false;
DataManager.DataBindings.Add(txtFirstName, UserProfileFields.FirstName.Name);
DataManager.DataBindings.Add(txtLastName, UserProfileFields.LastName.Name);
 
this.AccountCreated += new MembershipModuleEvent(TestMembershipEditor_AccountCreated);
this.AccountUpdated += new MembershipModuleEvent(TestMembershipEditor_AccountUpdated);

Last step is to save the data when one of those two events happen. The example below is used on account creation:

UserProfile = UserProfileRepository.GetInstance().GetUserProfile((Guid)(e.MembershipUser.ProviderUserKey));

DataManager.TransferDataFromControls(UserProfile);
BaseMonoXRepository.GetInstance().SaveEntity(UserProfile);

This is a basic example on how to extend MonoX membership and adjust it to you needs. Please find the rest of the code attached.

Please note that if you need to add additional fields that are not present in MonoX user profile table, we advise you to store that data into your custom, separate DB table and create a 1:1 relationship to the original table.

Rated 3.00, 3 vote(s).