21
votes

Am I right in thinking it's almost like a wrapper for all the objects necessary for a View?

For example, say you had an online store that sold music and dvds. On your browse page you'd want to display a list of all your dvds and music. Would you therefore construct a ViewModel object that has two properties containing an albums list and a dvds list?

From my understanding it seems that you have all your model classes ie. an Album/Dvd class, but simply passing these alone wouldn't be enough for your View. Does a ViewModel basically act as a carrier for all the data your View requires?

2
possible duplicate of What is ViewModel in MVC?HaveNoDisplayName
@HaveNoDisplayName Unfortunately though this question is 4 months older than the one you marked it to be duplicate of, the other one is viewed far more than this one. The title makes all the difference I see.Sнаđошƒаӽ
The other question has better answers so this should be closed as a duplicate, not the other way around.Liam

2 Answers

21
votes

Your understanding is mostly correct, but it's not complete.

The ViewModel may also perform conversions from the type of data that your Model carries to the type of data your View can conveniently work with; this might even mean that the ViewModel does not carry Models directly but other vessels that carry (possibly a subset of) the same information in a more suitable format.

Consider that you could have a Library model that aggregates Albums and DVDs -- the difference between such a model and the corresponding ViewModel is precisely that the Model doesn't care (or even know about) the View while the ViewModel has the express purpose of facilitating it.

3
votes
  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.

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);
} 
  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.