10 ways to bind multiple models on a view in mvc code project

12/5/2017 10 ways to Bind Multiple Models on a View in MVC - CodeProject
https://www.codeproject.com/Articles/1108855/ways-to-Bind-Multiple-Models-on-a-View-in-MVC 1/10
Introduction
In MVC we cannot use multiple model tag on a view. But Many times we need to pass multiple models from controller to view or we want to show data from multiple model on a view. For example we
want to show a Blog and List of Comments of this Blog on a Single View or suppose if we want to show a Category and List Of Products related to this category on a View. So in such situations we need
to pass multiple models to a Single View . We have many solutions of this problem. So in this article we will see different approaches to Bind Multiple Models on a View.
Problem Statement
We have two models named Blog and Comment and we want to create a view where we will show Blog Title and Blog Description and List of Comments related to the Blog.
Problem while binding two Models
If we will try to Bind Blog and Comment Model on a View as below then at run time we will get an exception that we can not Bind Multiple Models on a View.
And the exception
So In MVC we need some approach through which we can achieve this and luckily i am giving 10 approaches to achieve the same. I am not an expert, I'm sure I'll make mistakes or go against best
practices several times . I will not discuss the pros and cons of different approaches. My intent is to show different approaches through which we can solve this problem.
Different ways to achieve
we will see below 10 ways to bind multiple models on a single view
1. View Model
2. View Bag
3. View Data
4. Temp Data
5. Session
6. Dynamic
7. Tuples
8. Render Action
9. JSON
10. Navigation Properties
We will see all these approaches with the help of an example (Solution of above problem statement ). So in our problem statement we want to display a Blog and List of Comments on a view.
Below are the main players of this article
1. Blog Model
2. Comment Model
3. GetBlog() : In this method where i will create dummy data for Blog.
4. GetComments() : In this method where i will create dummy data for comments.
5. A Controller (I will name it BlogCommentCotroller)
6. View
I created a project named MultipleModels and now i will create all the required elements before starting different approaches.
1. Blog Model :- Create a Model named BlogModel . Right click on Models Folder and add a class named BlogModel . I created below BlogModel class in Models folder.
public class BlogModel
{
public int BlogID { get; set; }
public string BlogTitle { get; set; }
public string BlogDescription { get; set; }
Hide Copy Code

public DateTime CreatedDate { get; set; }
}
2. Comment Model :- Right click on Models folder and add another class named CommentModel as below
public class CommentModel
{
public int CommentID { get; set; }
public string Comment { get; set; }
public string CommentedBy { get; set; }
}
1. View Model
ViewModel is a class which contains the properties which are represented in view or represents the data that you want to display on your view/page.
Suppose if we want to create a View where we want to display a Blog and List of Comments then we will create our View Model (BlogCommentViewModel.cs) .Create a folder named ViewModel in your
project and right click on that folder and create a class file named "BlogCommentViewModel.cs"
public class BlogCommentViewModel
{
public BlogModel Blog { get; set; }
public List<CommentModel> Comments { get; set; }
}
In above ViewModel (BlogCommentViewModel) we created a property named Blog of BlogModel Type becuase we want to display a single Blog Detail on our View/Page and a second property
named Comments of List of CommentModel type becuse we want to display the list of comments associated to the Blog.
Note : We can place the viewmodel (BlogCommentViewModel) in any folder in our project but i created a folder named ViewModel where i will place all the viewmodels created for this project.
Its time to create a controller named BlogController and create a action method inside named GetBlogComment as below
public class BlogController : Controller
{
public ActionResult GetBlogComment()
{
return View();
}
}
Now first create a object of view Model and then set Blog and Comments properties as below. I created two functions for Blog (GetBlogModel()) and Comment (GetCommentModel())dummy data.
public class BlogController : Controller
{
{
BlogCommentViewModel BCVM = new BlogCommentViewModel();
BCVM.Blog = GetBlogModel();
BCVM.Comments = GetCommentModel();
return View(BCVM);
}
public BlogModel GetBlogModel()
{
BlogModel bModel = new BlogModel() { BlogID = 1,
BlogTitle = "MVC Blog",
BlogDescription = "This is MVC Blog",
CreatedDate = DateTime.Now };
return bModel;
}
public List GetCommentModel()
{
List cModel = new List();
cModel.Add(new CommentModel() { BlogID = 1, CommentID = 1, Comment = "Good One", CommentedBy = "Vijay" });
cModel.Add(new CommentModel() { BlogID = 1, CommentID = 2, Comment = "Nice", CommentedBy = "Nishant" });
cModel.Add(new CommentModel() { BlogID = 1, CommentID = 2, Comment = "Perfect", CommentedBy = "Saurabh" });
return cModel;
}
}
Note : Don't forget to add Models and ViewModels namespaces.
Now right click on GetBlogComment() action method and select Add View and while creating view select "Create a Strongly-Typed view" and select your view model named 'BlogCommentViewModel'
and select "empty"" in scaffold Template as below
Hide Copy Code
Hide Copy Code
Hide Copy Code
Hide Shrink Copy Code

Now change your created view (GetBlogComment.cshtml)as below
I added some table css also in Style.css
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
Now run the application and type /Blog/GetBlogComment(ControllerName/ActionName) in browser and we will get output as below
Hide Copy Code

2. View Bag
We use view Bag to pass data from controller to view.ViewBag use the property that takes advantage of the new dynamic features in C# 4.0.There is no typecasting needed in case of ViewBag. So we
can take help of ViewBag to pass multiple data from controller to View. ViewBag is a property of ControllerBase class.View Bag scope is only during the current request.
To pass multiple model we will create two view bag in our action method as below.
{
ViewBag.Blog = GetBlogModel();
ViewBag.Comments = GetCommentModel();
return View();
}
Now change your view (GetBlogComment.cshtml) according to view Bag as below
Run the application and we will get the required output.
3. View Data
ViewData is used to pass data from controller to view.View Data scoper is only during the current request.View Data needs typecasting for getting data.ViewData is a property of ControllerBase
class.ViewData is a derivative of the ViewDataDictionary class, so we can access with “key/value”
To use the ViewData for multiple models change your action method as below
{
ViewData["Blog"] = GetBlogModel();
ViewData["Comments"] = GetCommentModel();
return View();
}
Now change your view (GetBlogComment.cshtml) according to view Data as below
Hide Copy Code
Hide Copy Code

Run the application and we will get the same result as in approach 1.
4. Temp Data
TempData is also a dictionary derivative from TempDataDictionary class. TempData stored in short lives session. We can pass multiple models through TempData also.
Change your action method as below

{
TempData["Blog"] = GetBlogModel();
TempData["Comments"] = GetCommentModel();
return View();
}
Now change your view (GetBlogComment.cshtml) according to Temp Data as below
Now run the application and we will get the required result.
5. Session
Session is used to pass data across controllers in MVC Application.Session data never expires (by default session expiration time is 20 minutes but it can be increased).Session is valid for all requests, not
for a single redirect.
For Session, Change your action Method as below

{
Session["Blog"] = GetBlogModel();
Session["Comments"] = GetCommentModel();
Hide Copy Code
Hide Copy Code

return View();
}
Now change your view (GetBlogComment.cshtml) according to Session as below
Run the application and we will get the expected result.
6. Dynamic (ExpandoObject)
The ExpandoObject class enables us to add and delete members at run time.So If we want to build up an object to work with on the fly at runtime then we can use Expando Object.
I am not going in detail about ExpandoObject. let's see how can we use Expando with Multiple Models.
Change the action method as below

{
dynamic BCVM = new ExpandoObject();
BCVM.Blog = GetBlogModel();
BCVM.Comments = GetCommentModel();
return View(BCVM);
}
Note :To use ExpandoObject Add System.Dynamic Namespace.
Change your view as below
Run the application and we will get the expected result.
7. Tuples
Hide Copy Code

Tuple is an ordered sequence, immutable, fixed-size and of heterogeneous objects. each object in tuple is being of a specific type.
Tuples are not new in programming. They are already used in F#, Python and databases. They are new to C#. The tuples were introduced in C# 4.0 with dynamic programming.
we can use Tuples also to pass multiple models to view as below

{
var BCVM = new Tuple<BlogModel, List<CommentModel>>(GetBlogModel(), GetCommentModel());
return View(BCVM);
}
And now change your view as below
Run the application to see the result.
8. Render Action
Render actions are special controller methods defined only to be called from view. We create Render Action Method same as we create regular Action Method.
A Render action is a public method on the controller class. Render Action is called from view not from URL so we should decorate RenderAction with the [ChildActionOnly] attribute.
I am creating two Action Methods from where i will return partial view Results and will render those results on view using RenderAction Methods.

{
return View();
}
public PartialViewResult RenderBlog()
{
return PartialView(GetBlogModel());
}
public PartialViewResult RenderComments()
{
return PartialView(GetCommentModel());
}
Right click on RenderBlog() and add a view as below (Make sure we need to create a partial view so check that option)
Hide Copy Code
Hide Copy Code

Now change the code of your created partial(RenderBlog.cshtml) view as below
Same way right click on RenderComments and create another partial view as below
change this partial view(RenderComments.cshtml) as below

Its time to render these two partial view on our main view named GetBlogComment.cshtml.
Now run the application and we will get the required result.
9. JSON
We can Bind Multiple Models with the help of Json as well. We will retun JsonResult from action Method and on View through JQuery we can pasrse the JSON data and Bind on View. Here is the code
Change your action method so that Action Method can return the JSON

{
return View();
}
public JsonResult RenderBlog()
{
return Json(GetBlogModel());
}
public JsonResult RenderComments()
{
return Json(GetCommentModel());
}
Change your view as below
Hide Copy Code

10. Navigation Properties
If we have two related models then we can bind a model into another model as a property and can pass to a View. For example we have a Blog Model and Comment Model and A blog can contains
multiple comments so we can declare a Navigation Property in Blog Model as below

public class BlogModel
{
public string BlogTitle { get; set; }
public string BlogDescription { get; set; }
public DateTime CreatedDate { get; set; }
public List<CommentModel> Comments { get; set; } //Navigation Property
}
Now change your GetBlogModel() function and GetBlogComment() Action as below

{
BlogModel BM = GetBlogModel();
return View(BM);
}
public BlogModel GetBlogModel()
{
BlogModel bModel = new BlogModel()
{
BlogID = 1,
BlogTitle = "MVC Blog",
BlogDescription = "This is MVC Blog",
Hide Copy Code
Hide Shrink Copy Code

10 ways to bind multiple models on a view in mvc code project

Recommended

More Related Content

What's hot (20)

Similar to 10 ways to bind multiple models on a view in mvc code project (20)

Recently uploaded (20)

10 ways to bind multiple models on a view in mvc code project