Russen frauen suchen mann

single view multiple models

Introduction

In wie kann ich einen mann kennenlernen 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 single bedroom ideas pinterest to show data from multiple model on a view. For example we want to show a Blog impotenter mann sucht frau fürs leben 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; } 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; } public int BlogID { 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() single bedroom ideas pinterest { 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 { public ActionResult GetBlogComment() { BlogCommentViewModel BCVM = new BlogCommentViewModel(); BCVM.Blog = GetBlogModel(); BCVM.Comments = GetCommentModel(); frauen aus osteuropa zum kennenlernen 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

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

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.

 public ActionResult GetBlogComment() { 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 

 public ActionResult GetBlogComment() { ViewData["Blog"] = GetBlogModel(); ViewData["Comments"] = GetCommentModel(); return View(); } 

Now change your view (GetBlogComment.cshtml) according to view Data as below

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 
 

 public ActionResult GetBlogComment() { 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 
 

 public ActionResult GetBlogComment() { Session["Blog"] = GetBlogModel(); Session["Comments"] = GetCommentModel(); 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 
 

 public ActionResult GetBlogComment() { 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

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 
 

 public ActionResult GetBlogComment() { 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.
 

 public ActionResult GetBlogComment() { 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) 

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 
 

 public ActionResult GetBlogComment() { return View(); } public JsonResult RenderBlog() { return Json(GetBlogModel()); } public JsonResult RenderComments() { return Json(GetCommentModel()); } 

Change your view as below 

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 int BlogID { get; set; } 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 
 

 public ActionResult GetBlogComment() { BlogModel BM = GetBlogModel(); return View(BM); } public BlogModel GetBlogModel() { BlogModel bModel = new BlogModel() { BlogID = 1, BlogTitle = "MVC Blog", BlogDescription = "This is MVC Blog", CreatedDate = DateTime.Now, Comments = GetCommentModel() //Add Comments here }; return bModel; } public List<CommentModel> GetCommentModel() { List<CommentModel> cModel = new List<CommentModel>(); 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; } 

Now create your view as below 

At Last - If this is helpful and you liked this please vote above.

We do know that in any MVC application we cannot pass multiple models from a controller to a single view.

In this post I will provide you with a workaround for passing multiple models in a single view in MVC.

There are several approaches to achieve this but I will use the List<object> and the object object.

I am going to use EF as my data access layer. More specifically I will use the Database First approach in EF.

Entity Framework is an object-relational mapping (ORM) framework for the.NET Framework.

EF addresses the problem of Object-relational impedance mismatch. I will not be talking about that mismatch because it is well documented in many sites on the Internet.

Through that framework we can program against a conceptual application model instead of programming directly against a relational schema-model.

1) I will create an empty ASP.Net Application (Empty MVC applicatin) and I give it the name .

I am using Visual Studio 2015 Enterprise edition, C# 5.0 and EF 5.0 version.

2) I will use the AdventureWorksLT2012 database. You can download it by visiting this.

I have installed SQL Server 2014 Enterprise edition in my machine. SQL Express edition will work fine.

4) I will add an ADO.Net Entity data model using Database First. Follow the wizzard steps, create the connection string and then import into the conceptual model the ProductCategory and Product tables which will become two new entities in the domain model. 

5) Add a new controller class in the Controllers Folder. Name it ProductController.cs

The code for the Controller (Index method) follows

public class ProductController : Controller
{
// GET: Product

AdventureWorksLT2012Entities ctx = new AdventureWorksLT2012Entities();


   public ActionResult Index()
   {


         List<object> model = new List<object>();

         model.Add(ctx.ProductCategories.ToList());

         model.Add(ctx.Products.ToList());

        return View(model);
    }
}

We create an object of the AdventureWorksLT2012Entities class.

Then we create a List<object> object list. We add the Products collection and ProductCategories collection to that list.

6) Now we need to add a View in our application. Add a view, do not use scaffolding, and name it Index. Place the Index view in the Product folder inside the Views folder.

In the Index.cshtml we have the following code

@model IEnumerable<object>

@{

List<PassingMultipleModelsToAView.ProductCategory> lstPCategory = Model.ToList()[0] as List<PassingMultipleModelsToAView.ProductCategory>;

List<PassingMultipleModelsToAView.Product> lstProduct = Model.ToList()[1] as List<PassingMultipleModelsToAView.Product>;
}

<h3>Categories</h3>

<ul>

@foreach (var item in lstPCategory)
{

<li>@item.Name</li>
}

</ul>


<hr />

<h3>Products</h3>

<ul>

@foreach (var item in lstProduct)
{
<li>@item.Name-@item.Color</li>

}


</ul>

The model we pass to the view is @model IEnumerable<object>.

Then we pass the first list of the model (ProductCategory) to a list of the same type and the second list of the model(Product) to a list of the same type.

Then we just create two foreach statements and iterate through the list of items.

7) Build and run your application. You will see data from ProductCategory and Product entities. So we still passed a model to the view (model IEnumerable<object>) but this model represented two entities/models so in reality we passed 

PassingMultipleModelsToAView.ProductCategory, PassingMultipleModelsToAView.Product models to the view and achieved our goal.

Hope it helps!!!

This post shows how to use multiple models in a single view. The models can be used in separated forms or together in one form. You could use each child model with a separate ajax post if required. Only properties in the parent class affect the child models, but a property in a child model does not effect the Model State of the other child models. In this way multiple models can be used and also validation for each model.

Code

How the ViewModels are implemented:

The parent model class contains all child classes. Each class is another reusable model. In this way, the validation and ModelState can be used.

 namespace MultipleModelsDemo.ViewModels { public class IndexViewModel { public string HeaderText { get; set; } public TestOneModel TestOne { get; set; } public TestTwoModel TestTwo { get; set; } } } 

A child model used for the first form.

 using System.ComponentModel.DataAnnotations; namespace MultipleModelsDemo.ViewModels { public class TestOneModel { [Required] public string PropertyOne { get; set; } [Required] public string PropertyTwo { get; set; } } } 

A second child model used for the second form.

 using System.ComponentModel.DataAnnotations; namespace MultipleModelsDemo.ViewModels { public class TestTwoModel { [Required] public string PropertyThree { get; set; } [Required] public string PropertyFour { get; set; } } } 

In the controller a single action method is used to recieve the form posts. The action method MyEditActionOne uses the Index model. In this action method, the ModelState.IsValid property can be checked. Due to the model structure, separate forms can be sent for each child model, or the whole model as one. Note: Any properties defined in a parent class muss be valid if set as required.

 using System; using System.Web.Mvc; using MultipleModelsDemo.ViewModels; namespace MultipleModelsDemo.Controllers { public class HomeController : Controller { public ActionResult Index() { var model = new IndexViewModel(); model.HeaderText = "Strongly typed model used here, no view bag"; return View(model); } public ActionResult MyEditActionOne(IndexViewModel model) { if (ModelState.IsValid) { return View("Index", model); } throw new Exception("My Model state is not valid"); } } } 

The html uses razor and can send either a form with just the first child model, or the second child model or the whole model as one. Only what is required for each form is validated. This is due to the model structure.

 @model MultipleModelsDemo.ViewModels.IndexViewModel <div> @using (Html.BeginForm("MyEditActionOne", "Home")) { <div> <h4>Send Model One</h4> <fieldset> @Html.ValidationSummary(true, "ValidationSummary") <ol> <li> @Html.LabelFor(m => m.TestOne.PropertyOne) @Html.TextBoxFor(m => m.TestOne.PropertyOne) @Html.ValidationMessageFor(m => m.TestOne.PropertyOne) </li> <li> @Html.LabelFor(m => m.TestOne.PropertyTwo) @Html.TextBoxFor(m => m.TestOne.PropertyTwo) @Html.ValidationMessageFor(m => m.TestOne.PropertyTwo) </li> </ol> </fieldset> <input class="btn" type="submit" value="Send" /> </div> } </div> 
 <div> @using (Html.BeginForm("MyEditActionOne", "Home")) { <div> <h4>Send both Models</h4> <fieldset> @Html.ValidationSummary(true, "ValidationSummary") <ol> <li> @Html.LabelFor(m => m.TestOne.PropertyOne) @Html.TextBoxFor(m => m.TestOne.PropertyOne) @Html.ValidationMessageFor(m => m.TestOne.PropertyOne) </li> <li> @Html.LabelFor(m => m.TestOne.PropertyTwo) @Html.TextBoxFor(m => m.TestOne.PropertyTwo) @Html.ValidationMessageFor(m => m.TestOne.PropertyTwo) </li> <li> @Html.LabelFor(m => m.TestTwo.PropertyThree) @Html.TextBoxFor(m => m.TestTwo.PropertyThree) @Html.ValidationMessageFor(m => m.TestTwo.PropertyThree) </li> <li> @Html.LabelFor(m => m.TestTwo.PropertyFour) @Html.TextBoxFor(m => m.TestTwo.PropertyFour) @Html.ValidationMessageFor(m => m.TestTwo.PropertyFour) </li> </ol> </fieldset> <input class="btn" type="submit" value="Send" /> </div> } </div> 

As shown, it is very easy to implement multiple strongly typed models in a single view. Using this structure it would also be possible to implement a dynamic view with multiple forms or data.

Links:

Tags:,,,

Zahra Doe Morbi gravida, sem non egestas ullamcorper, tellus ante laoreet nisl, id iaculis urna eros vel turpis curabitur.

3 Comments

Zahra Doejune 2, 2017
Morbi gravida, sem non egestas ullamcorper, tellus ante laoreet nisl, id iaculis urna eros vel turpis curabitur.
Zahra Doejune 2, 2017
Morbi gravida, sem non egestas ullamcorper, tellus ante laoreet nisl, id iaculis urna eros vel turpis curabitur.
Zahra Doejune 2, 2017
Morbi gravida, sem non egestas ullamcorper, tellus ante laoreet nisl, id iaculis urna eros vel turpis curabitur.

Leavy Reply

Your Name (required) Your Name (required) Your Message