ASP.NET MVC5: Multiple View Models in Single View
There is a common scenario which is being asked quite a lot in ASP.NET MVC platform.
So, I have decided to demonstrate my take on this particular scenario. The scenario is as follow i.e. create a single page that will display the data from two different view models. Now the question arise here that ASP.NET MVC platform only attaches single model to a single view, so, how can this be achieved? Let me demonstrate how this is done.
Today, I shall be demonstrating about how to utilize multiple view models into a single view in ASP.NET MVC5 platform. Following are some prerequisites before you proceed further in this tutorial:
- Knowledge of ASP.NET MVC5.
- Knowledge of HTML.
- Knowledge of Bootstrap.
- Knowledge of Jquery.
- Knowledge of C# Programming.
1) We have two independent models "Register Model" & "ResultSet Model" i.e.
3) After combining our two separate models into a single model, we then can easily attach our common place holder model to our single view as shown below i.e.
Now, let's see, how can we code this.
1) Create a new MVC web project and name it "MultiModelSingleView".
2) Create a file "LoginObj.cs" under "Models" folder and replace following code in it i.e.
3) Now, create our view models files i.e. "AccountViewModel.cs", "ResultSetViewModel.cs" & "CommonViewModel.cs" under "Models" folder and replace following code in each file accordingly as shown below i.e. Replace the following code in "AccountViewModel.cs" file i.e.
Replace the following code in "ResultSetViewModel.cs" file i.e
Replace the following code in "CommonViewModel.cs" file i.e
In all the above snippets, we have created our view models according to the conceptual understanding that we have developed.
4) Create a new controller file "AccountController.cs" under "Controllers" folder and replace the following code in it i.e.
Lets break down the above code method by method i.e.
The above code, creates a "LoadData()" method, which will load the data from a file, if the file contains any data, initially, the file is empty, since we have not register any account.
Now the above code, creates a "StoreData(...)" method, which will store the data into the file, as we register any new account.
The above code, creates our view method "Register()" HTTP GET, which will simply loads our data to "ResultSetViewModel ". Notice here that now in our view instead of returning an individual model to the view, we are returning our common view model, since, we have attached that with our view.
The above code, creates our view method "Register()" HTTP POST, which will simply loads our data to "ResultSetViewModel " after storing the register account details received via account view model. Notice here again that now in our view instead of returning an individual model to the view, we are returning our common view model, since, we have attached that with our view.
5) Now, create a new view file "Register.cshtml" under "Views\Account" folder and replace the following code in it i.e.
In the above code, we have created a single view, which is attached to our common model and display data from the result set view model and send register account request via account view model.
6) Create a our standard view layout file "_Layout.cshtml" under "Views\Shared" folder and replace the following code in it i.e.
7) Now, execute the project and register some accounts, you will be able to see output as below i.e.