Authentication and Dynamic content in MVC using Model Binding

In previous posts I touched upon some basic topics related to MVC4 in VS11. I talked about setting up simple MCV 4 project and then how to use layout as mater page for MVC web applications. In this post I will discuss the next step in building a web application and that would be how to use MVC framework to build dynamic content.

Authentication and authorization are the one of the common tasks that we all perform on most of the applications. One of the best things about using MVC framework is that you can leverage all the ASP.Net features. This means we will be using forms authentication. So we will be implementing a login view that will take input (login and password) from the user and then post it back to controller to authenticate credentials and then redirect request to appropriate view. Here are some of the questions that will get answers by this post.

  • How to set up FORM in MVC
  • How to put input controls like text box on MVC view
  • How to handle postback in MVC framework
  • How to dynamically bind controls on view to data
  • How to redirect response to different page

Set up Login Form in MVC

To allow user to enter credentials, we will create Login controller and related views in the project. Following screenshot how the project looks like after controller and associated view has been added.

mvc4 login controller

Following razor markup shows how you can add FORM, text box and other controls on your view.

@model MvcAuth.Models.User

@{
    ViewBag.Title = "Login";
}

<h2>Login</h2>
<div class="loginForm">
@using (Html.BeginForm())
{
    <div><span>Login:</span> @Html.TextBoxFor(u => u.Login)</div>
    <div><span>Password:</span> @Html.PasswordFor(u =>u.Password)</div>
    <div><input type="submit" value="Login" /></div>
}
</div>
    

As you can see for the markup that Html.BeginForm is used to insert FORM tag on the page. Use of "using" clause automatically inserts closing tag for FORM tag. Text box contols have been added using Html.TextBoxFor method. These methods for forms, text box controls etc. hve few overloaded versions for different situations. I will discuss these in subsequent posts.

Using Model to bind FORM in MVC

Notice the use of Html.TextBoxFor method and use of lambda function to fill the control with values from some object. This is model binding of the control. At the top of the page we defined model to which the control is bound. I have added User class in the application under Model folder. This object is model for User data.

namespace MvcAuth.Models
{
    public class User
    {
        public string Login { get; set; }
        public string Password { get; set; }
    }
}
    

You can see from the code snippet how lambda function was refering to the properties of this object when filling the data for the text box.

IsPostBack in MVC

In classic ASP.Net application we are used to writing code that checks for IsPostBack property to identify if the request is GET or POST. In MVC this is accomplished by assigning HttpGet and HttpPost attributes to methods that will serve GET and POST requests. In LoginController, I have added two methods that will take action based on type of action a user is performing.

[HttpGet]
public ActionResult Index()
{
   return View();
}

[HttpPost]
public ActionResult Index(User user)
{
   if (string.Compare(user.Login, "naveen", true) == 0)
   {
     // Mark the request authenticated.
     FormsAuthentication.SetAuthCookie(user.Login, false);
     return Redirect("Home");
   }
   return View();
}
    

HttpGet marked method renders the page for the user to enter credentials for login. When user clicks on Submit button, POST request is routed to method that has been marked with HttpPost attribute. This is pretty neat separate of tasks based on attributes. Now I don't have to worry about checking for IsPostBack to make decisions. In ASP.Net I used to write methods for POST and GET based on this check. Now MVC framework is doing that job for you.

Reading FORM data for POST request

When page sends POST request, it send input data in FORM. Now you would want to read the input data and like to map it to some model object. MVC framework does this work for you when define model for your page like I did for login page. I have coupled text boxes to specific properties of User object. When page sends POST request when submit button is clicked, MVC framework creates an instance of User object and populates the properties from the FORM values for those text boxes. Notice the signature of Index method that is marked with HttpPost attribute.

public ActionResult Index(User user)
    

When MVC framework routes the requests to this method, all the information from text box controls have been read and used to populate the properties of User object and sent to you in that method.

Redirect to page in MVC

In ASP.Net after user is authenticated we redirect the user to page that initiated the request or based on some business rules, you redirect the user to some other page. You can use Redirect method to redirect requests. There are some overloads of this method to use for different use cases. I will discuss these in detail in subsequent posts.

In this post I have shown you how you can bind the page to model and populate page with dynamic content. In next post I will discuss some advanced features of dynamic content population. Download the attached project to see all this in action.

Search

Social

Weather

7.2 °C / 45.0 °F

weather conditions Clouds

Monthly Posts

Blog Tags