ASP.NET MVC > ViewModel

List data using ViewModel in ASP.NET MVC

How to list data from more than one tables (models) in ASP.NET MVC?


ViewModel is a class that represents only the data that we want to display on the view. ViewModel can be used in read only view or in the input form page. Generally these data are combinations of more than one database tables.

ViewModel only contains the properties, so you can say that ViewModel can contain only those properties from more than one Models that we need to display or use in a single view page.

How to create and use ViewModel?

Creation of View model is similar to the creation of Model. Right click Models folder and go to Add > Class…

Give some meaningful name. It is suggested to suffix the name of View mode to “ViewModel” word so that it is can be easily distinguished in the Model folder among other Models. In our case, the View model name is PersonaldetailsFilesViewModel.cs as we are getting properties of from both PersonalDetails and Files entities (database tables).


public class PersonaldetailsFilesViewModel

    // Columns from PersonalDetails table
    public int AutoId { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }

    public int Age { get; set; }
    public bool Active { get; set; }
    // Columns from Files table
    public string FileName { get; set; }


Here, top 5 properties are corresponding to the PersonalDetails model and FileName is from Files model.


Below is our controller action method.

public ActionResult ListCompleteDetails()
            var listWithEmpty = (from p in db.PersonalDetails
                        join f in db.Files
                        on p.AutoId equals f.PersonalDetailsId into ThisList
                        from f in ThisList.DefaultIfEmpty()
                        select new
                            Active = p.Active,
                            Age = p.Age,
                            AutoId = p.AutoId,
                            FileName = f.FileName,
                            FirstName = p.FirstName,
                            LastName = p.LastName
                       .Select(x => new PersonaldetailsFilesViewModel()
                           Active = x.Active,
                           Age = x.Age,
                           AutoId = x.AutoId,
                           FileName = x.FileName,
                           FirstName = x.FirstName,
                           LastName = x.LastName

                  return View(listWithEmpty);

In this method, we are first joining PersonalDetails and Files entities and creating a collection of Anonymous type collection and then converting them into the collection of PersonaldetailsFilesViewModel, that intern is being passed to the View.

Now, right click the controller action method and choose “Add View…”, this gives a Add View dialog box.

Select appropriate Template, Model class and Data context and press Add button from as displayed in above picture. This creates a normal view of List type that lists the data from PersonaldetailsFilesViewModel view model. The view looks like below.


@model IEnumerable<MVCTraining5.Models.PersonaldetailsFilesViewModel>

    ViewBag.Title = "ListCompleteDetails";


   @Html.ActionLink("Create New", "Create")
<table class="table">
            @Html.DisplayNameFor(model => model.FirstName)
            @Html.DisplayNameFor(model => model.LastName)
            @Html.DisplayNameFor(model => model.Age)
            @Html.DisplayNameFor(model => model.Active)
            @Html.DisplayNameFor(model => model.FileName)

@foreach (var item in Model) {
            @Html.DisplayFor(modelItem => item.FirstName)
            @Html.DisplayFor(modelItem => item.LastName)
            @Html.DisplayFor(modelItem => item.Age)
            @Html.DisplayFor(modelItem => item.Active)
            @Html.DisplayFor(modelItem => item.FileName)
            @Html.ActionLink("Edit", "Edit", new { id=item.AutoId }) |
            @Html.ActionLink("Details", "Details", new { id=item.AutoId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AutoId })


Now, build the project and browser to this action method and we should be seeing below output depending on the data from both database tables.



If Edit | Details | Delete links are not required, we may delete those columns from the View.

 Views: 9220 | Post Order: 44

Write for us