Working With User Controls in ASP.NET MVC

Introduction

In this article we will see how to work with user controls in ASP.Net MVC. Already all of you know how to create user controls i.e. ascx and use them in an ASP.Net web page but in the ASP.Net MVC framework this kind of stuff is different. As usual we can create user controls but instead of registering tagprefix in an ASP.Net page we have to render this user control in ASP.Net MVC. In this article we will see various ways of returning user controls in ASP.Net MVC.

Create User Controls and use at design time in ASP.NET MVC

All of you are familiar with user controls in ASP.Net so I'm assuming that you know how to create user controls but we will see the same user controls creation in MVC. In this section we will create one login status control to display the login status of the user.

Step 1:

Start a new ASP.Net MVC web Application. Add a new master page in the Views/Shared folder called SiteMaster.master. On this master page we will show the loginstatus user control but we don't have one so right-click on the shared folder by selecting add new item and select MVC3/2 user control and provide the name as LoginStatus.

Step 2:

Now we have a master page as well as a user control; now paste the following code into you user control source view to display the login status.

<%
if (Request.IsAuthenticated) {
%>
Welcome <strong><%: Page.User.Identity.Name %></strong>!
[ <%: Html.ActionLink("Logout", "Logout", "Home") %> ]
<%
}
else {
%>
[ <%: Html.ActionLink("LogIn", "Login", "Home") %> ]
<%
}
%>

In the above markup we have two action links; one for login and another for logout. Here we are checking that if the user is authenticated then show logout and show the user name else show the login which redirects to login page. For login and logout you can check my previous article Custom Login in ASP.NET MVC . In this article we will see how to use the user controls.

Step 3:

Now we have our user controls and we can show this LoginStatus control on our master page so let us keep on the master page like below.

<div id="loginstatus">
<%Html.RenderPartial("LoginStatus"); %>
</div>

In the above markup I'd kept one div tag inside the div tag; we have written the Html.RenderPartial method which will render our user control on the master page now. In ASP.Net you need to register one tagprefix and then use the user control by tagprefix registered but in ASP.Net MVC using simple Thml.RenderPartial we can use the user control.

Render User Control at Runtime On Modal Popup

On various sites we see login, registration, contact us forms are designed as only modal popup and we are taking the input from those windows. For popup you can see my previous article Popup Windows in ASP.NET MVC In this article we will create one Registration popup to register the user so lets create.

Step 1:

First you need to create one user control so just create user control name with RegisterControl and one modal called RegisterModel.

Step 2:

Paste the following code in RegisterModel class.

[Required]
[Display(Name = "User name")]
public string UserName { get; set; }

[Required]
[DataType(DataType.EmailAddress)]
[Display(Name = "Email address")]
public string Email { get; set; }

[Required]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }

[DataType(DataType.Password)]
[Display(Name = "Confirm password")]
[Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
public string ConfirmPassword { get; set; }