Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding ViewModel in ASP.NET MVC

 Print 
  Author : Shailendra Chauhan
Posted On : 27 Jul 2012
Total Views : 175,340   
Updated On : 17 Feb 2014
 

In ASP.NET MVC, ViewModel is a class that contains the fields which are represented in the strongly-typed view. It is used to pass data from controller to strongly-typed view.

Key Points about ViewModel

  1. ViewModel contain fields that are represented in the view (for LabelFor,EditorFor,DisplayFor helpers)

  2. ViewModel can have specific validation rules using data annotations or IDataErrorInfo.

  3. ViewModel can have multiple entities or objects from different data models or data source.

ViewModel Example

Designing ViewModel

 public class UserLoginViewModel 
{ 
[Required(ErrorMessage = "Please enter your username")] 
[Display(Name = "User Name")]
[MaxLength(50)]
public string UserName { get; set; }
 [Required(ErrorMessage = "Please enter your password")]
 [Display(Name = "Password")]
 [MaxLength(50)]
 public string Password { get; set; } 
} 

Presenting the viewmodel in the view

 @model MyModels.UserLoginViewModel 
@{
 ViewBag.Title = "User Login";
 Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm())
{
<div class="editor-label">
 @Html.LabelFor(m => m.UserName)
</div>
<div class="editor-field">
 @Html.TextBoxFor(m => m.UserName)
 @Html.ValidationMessageFor(m => m.UserName)
</div>
<div class="editor-label">
 @Html.LabelFor(m => m.Password)
</div>
<div class="editor-field">
 @Html.PasswordFor(m => m.Password)
 @Html.ValidationMessageFor(m => m.Password)
</div>
<p>
 <input type="submit" value="Log In" />
</p>
</div>
} 

Working with Action

 public ActionResult Login()
{ 
return View();
}
[HttpPost]
public ActionResult Login(UserLoginViewModel user)
{
// To acces data using LINQ
DataClassesDataContext mobjentity = new DataClassesDataContext();
 if (ModelState.IsValid) 
{ 
try
 {
 var q = mobjentity.tblUsers.Where(m => m.UserName == user.UserName && m.Password == user.Password).ToList(); 
 if (q.Count > 0) 
 { 
 return RedirectToAction("MyAccount");
 }
 else
 {
 ModelState.AddModelError("", "The user name or password provided is incorrect.");
 }
 }
 catch (Exception ex)
 {
 } 
 } 
 return View(user);
} 

Some Tips for using ViewModel

  1. In ViewModel put only those fields/data that you want to display on the view/page.

  2. Since view reperesents the properties of the ViewModel, hence it is easy for rendering and maintenance.

  3. Use a mapper when ViewModel become more complex.

In this way, ViewModel help us to organize and manage data in a strongly-typed view with more flexible way than complex objects like models or ViewBag/ViewData objects.

Summary

In this article I try to expose the ViewModel with example. I hope you will refer this article for your need. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article.



Free Interview Books
 
COMMENTS
18 NOV
Angular with Firebase (Classroom)
04:00 PM-07:00 PM IST(+5:30)
18 NOV
Angular2+4 with Firebase (Online)
10:30 AM-12:30 PM IST(+5.30 GMT)
11 NOV
ASP.NET MVC (Online)
08:00 AM-10:00 AM IST / 09:30 PM To 11:30 PM(CST)
11 NOV
ASP.NET MVC (Classroom)
09:00 AM to 12:00 AM
7 NOV
Developing Microsoft Azure Solutions (Online)
07:00 AM-08:30 AM IST/ 8:30 Pm -10:00 PM CST
14 OCT
Angular2 and Angular4 (Online)
03:00 PM-05:00 PM IST (+5.30GMT)
12 OCT
ASP.NET Core (Online)
09:00 PM - 11:00 PM IST(+5:30 GMT)
10 OCT
Microsoft Azure Infrastructure Solutions (Online)
08:00 AM-09:30 AM IST / 09:30 PM -11:00 PM CST
LIKE US ON FACEBOOK
 
+