ViewModels – Duncan Halley's Blog

Following on from my previous post on using ViewBag and TempData, this post will show you how to use ViewModels so that you can interact with multiple Models in one object and pass its properties to a View.

ViewModels are strongly typed, so they give you the following advantages over ViewBag:

Compile-time checking (ViewBag is dyanamically typed, so you’ll only see any issues at run time).
Intellisense (it’s worth using ViewModels for this functionality alone!)
Your Data Annotations in the ViewModel won’t be removed, like they are with Database Models when you add to/refresh the Entity diagram.

ViewModel Diagram

When we create a ViewModel, all we’re really doing is combining two Models from our database, into one ViewModel which will exist as a Class.

Creating a ViewModel

In Visual Studio I tend to keep my ViewModels in a ViewModels folder. But they can also be referenced from an imported DLL if required.

Continuing with the Car theme, here’s the ViewModel that we’d create:

namespace CarApp.ViewModels
{
    public class TuningCarViewModel
    {
        public int ID { get; set; }
        public string Make { get; set; }
        public string Model { get; set; }
        public string Colour { get; set; }
        public int TuningID { get; set; }
        public string TurboType { get; set; }
        public bool SuspensionUpgraded { get; set; }
    }
}

namespace CarApp.ViewModels

{

public class TuningCarViewModel

{

public int ID { get; set; }

public string Make { get; set; }

public string Model { get; set; }

public string Colour { get; set; }

public int TuningID { get; set; }

public string TurboType { get; set; }

public bool SuspensionUpgraded { get; set; }

}

Getting the data to the View, via the Controller

You create an instance of your ViewModel the same way you would create an instance of any other Model.

public ActionResult Details(int id = 0)
   {
    tblCar car = db.tblCars.Find(id);
    return View(CarToTuningCar(car));
   }

public ActionResult Details(int id = 0)

{

tblCar car = db.tblCars.Find(id);

return View(CarToTuningCar(car));

}

So we find the Car for the ID that’s been supplied. We then pass this car to another method CarToTuningCar which will convert the Car object into a TuningCarViewModel.

If you don’t have many properties to map, you can do it manually as shown below. But this can become time-consuming if you have lots of properties. In this case, you might want to try out AutoMapper.

private TuningCarViewModel CarToTuningCar(tblCar car)
        {
            TuningCarViewModel tcvm = new TuningCarViewModel();

            // here we set the properties of the new object (tcvm)
            // based on the properties of the existing object (car)
            tcvm.ID = car.ID;
            tcvm.Make = car.Ward;
            tcvm.Model = car.Activity;
            tcvm.Colour = car.Category;
            tvcm.TuningID = car.NoAttending;
            tcvm.TurboType = car.ActivityDate;
            tcvm.SuspensionUpgraded = car.StaffAssignmentNo;
            tcvm.TuningID = car.TuningID; //I'm assuming you have a foreign key to 
                                          // link to the Tuning table

            // now we set the properties that have come from the other Model (Tuning)
            // we use the TuningID to find the relevant record in the Tuning table
            tcvm.TurboType = GetTurboType(car.TuningID);
            tcvm.SuspensionUpgraded = GetSuspensionUpgraded(car.TuningID);

            return wamh;
            
        }

private TuningCarViewModel CarToTuningCar(tblCar car)

{

TuningCarViewModel tcvm = new TuningCarViewModel();

// here we set the properties of the new object (tcvm)

// based on the properties of the existing object (car)

tcvm.ID = car.ID;

tcvm.Make = car.Ward;

tcvm.Model = car.Activity;

tcvm.Colour = car.Category;

tvcm.TuningID = car.NoAttending;

tcvm.TurboType = car.ActivityDate;

tcvm.SuspensionUpgraded = car.StaffAssignmentNo;

tcvm.TuningID = car.TuningID; //I'm assuming you have a foreign key to

// link to the Tuning table

// now we set the properties that have come from the other Model (Tuning)

// we use the TuningID to find the relevant record in the Tuning table

tcvm.TurboType = GetTurboType(car.TuningID);

tcvm.SuspensionUpgraded = GetSuspensionUpgraded(car.TuningID);

return wamh;

}

We use the methods below to get the actual values from the Tuning table:

private string GetTurboType(int? TuningID)
        {
            string turboType;

            turboType = db.tblTuning.Find(TuningID).TurboType;

            return turboType;
        }


private bool GetSuspensionUpgraded(int? TuningID)
        {
            bool suspensionUpgraded;

            suspensionUpgraded = db.tblTuning.Find(TuningID).SuspensionUpgraded;

            return suspensionUpgraded;
        }

private string GetTurboType(int? TuningID)

{

string turboType;

turboType = db.tblTuning.Find(TuningID).TurboType;

return turboType;

}

private bool GetSuspensionUpgraded(int? TuningID)

{

bool suspensionUpgraded;

suspensionUpgraded = db.tblTuning.Find(TuningID).SuspensionUpgraded;

return suspensionUpgraded;

}

Rendering in the View

We need to ensure that the View uses our new ViewModel, so update it accordingly:

@model CarApp.ViewModels.TuningCarViewModel

1	@model CarApp.ViewModels.TuningCarViewModel

You can then access the properties of the ViewModel as usual:

        <div class="editor-label">
            @Html.LabelFor(model => model.TurboType)
        </div>
        <div class="editor-field">
            @Html.DisplayFor(model => model.TurboType)
        </div>


        <div class="editor-label">
            @Html.LabelFor(model => model.SuspensionUpgraded)
        </div>
        <div class="editor-field">
            @Html.DisplayFor(model => model.SuspensionUpgraded)
        </div>

@Html.LabelFor(model => model.TurboType)

</div>

@Html.DisplayFor(model => model.TurboType)

</div>

@Html.LabelFor(model => model.SuspensionUpgraded)

</div>

@Html.DisplayFor(model => model.SuspensionUpgraded)

</div>

Conclusion

ViewModels in ASP.NET allow us to work with multiple Models and present their data in one View. Once you’ve got past the initial trickyness, you’ll find they over you advantages over using ViewBag and TempData.

If you’re new to web development in ASP.NET or perhaps you’re moving over from Web Forms, one aspect of MVC that can be tricky to get your head around is how to combine multiple Models in one View.

By default, Visual Studio will scaffold your Views so that they can only interact with one Model.

But what if you need your Controller Action to interact with more than one Model at a time?

Probably the “easiest” method and the one that you’ll see in most of the official Microsoft tutorials, is to use ViewBag. ViewBag doesn’t have a direct equivalent in Web Forms, but it’s most closely comparable with Page.Items.

So, in your Details view, if you wanted to display data from two separate Models, you would have something like this:

public class HomeController : Controller

{
    public ActionResult Details(int id = 0)

    {
     //get your Car object as normal
     tblCar car = db.tblCars.Find(id);

     // now get your property from the additional table
     // how you get this ID (tuneID) will depend on your application 
     // - it could be passed in via the querystring, 
     // or it could be obtained from the Car object.
     tblTuning tuning = db.tblTuning.Find(tuneID) 
     string turbo = tuning.turboType.toString();

     //finally, add the turbo propety to the ViewBag
     ViewBag.turbo = turbo;

     //return your View as standard
     return View();
     }
}

public class HomeController : Controller

{

public ActionResult Details(int id = 0)

{

//get your Car object as normal

tblCar car = db.tblCars.Find(id);

// now get your property from the additional table

// how you get this ID (tuneID) will depend on your application

// - it could be passed in via the querystring,

// or it could be obtained from the Car object.

tblTuning tuning = db.tblTuning.Find(tuneID)

string turbo = tuning.turboType.toString();

//finally, add the turbo propety to the ViewBag

ViewBag.turbo = turbo;

//return your View as standard

return View();

}

Next, in your Car Details View (Details.cshtml), you would access the ViewBag to render out your turbo string:

<h1>Car Details</h1>

<!-- display the properties from your Car Model -->
    <div class="display-label">
         @Html.DisplayNameFor(model => model.Ward)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Ward)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Activity)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Activity)
    </div>

<!-- Use ViewBag to render your turbo property -->
<h4>This car has the following tune-ups</h4>
<p>@ViewBag.turbo</p>

<h1>Car Details</h1>

@Html.DisplayNameFor(model => model.Ward)

</div>

@Html.DisplayFor(model => model.Ward)

</div>

@Html.DisplayNameFor(model => model.Activity)

</div>

@Html.DisplayFor(model => model.Activity)

</div>

<h4>This car has the following tune-ups</h4>

<p>@ViewBag.turbo</p>

Bear in mind that ViewBag can only be used in a Controller and then displayed in the corresponding View. If you do a redirect, you’ll lose the value stored in the ViewBag.

If you need the data to survive a redirect, use TempData instead. TempData’s equivalent in Web Forms would be a Session variable.

Controller:
TempData["turbo"] = turbo;

1 2	Controller: TempData["turbo"] = turbo;

View:
@TempData["turbo"]

1 2	View: @TempData["turbo"]

This is nothing particularly wrong with using ViewBag and TempData (although the pedants on StackExchange would say otherwise!), but there is another method called ViewModels that has some advantages. I’ll look at ViewModels in my next post.

Feel free to post any questions or comments down below.

Tag: ViewModels

Multiple Models in one View – ViewModels in ASP.NET MVC

Creating a ViewModel

Getting the data to the View, via the Controller

Rendering in the View

Conclusion

Multiple Models in one View – ASP.NET MVC ViewBag and TempData