Understanding Views In ASP.NET MVC

Overview

In an earlier part of the series: 

• Understanding Controller In ASP.NET MVC

We saw about controllers and how they work when you specify a controller in routeconfig file; also we saw about traces; i.e, trace and how to enable a trace. Here in this article we will see what are views and how to create views and how to pass data from controller to views. We will use the same application we had used earlier to understand controllers. So let's start! 

Introduction

Now we will run our solution first and see what details we are getting and see what we will do in our article. As you can see the below output is id and name; now I want to display akshay details like address, phone number, and qualification by using view. So let's code:



Now we want to display address, qualification and phone number,  as they are nothing but a list of strings that we want to display, so let's modify our code and change our parameters as,



Remove the parameter id and name as we want to display details -- now they are a string so we will write List<> of string, so just write List<string>. Now, we want to return list of string so let's modify return,



Now let's hardcode our details and see what output are we getting,



Here I had hardcoded the values like name, address, phone number and so on . Now, just run the application and we will see what results we get,



You will see here we got for our output a namespace which says system.Collection.GenericList. Now we will switch back to our code and see,



Look at the intellisence -- it's saying List string class is present in system.Collection.GenericList and that is exactly what is getting displayed. Now, to correct this result we will add a view.

Now a view in MVC is nothing but to render the data or to fomat the data and present that data to the user.

Now let's add a view -- as you can see in our solution, View folder is already present and inside that view folder no files are present, only one file; i.e, web.config file, and we will see in further articles what is the use of that web.config file but for now we will create a view first.



Now just right click on the controller and select Add View.



Click on Add View you will see this prompt,



You will see a View name -- it says Index and when you see our Controller our action name is Index. We will see a strongly typed view in our next article.  In MVC now click on Add and see where this View got created,



You will see in Views folder, that inside that a Home Folder got created and inside that , in Index.cshtml our view got created  -- why??

Because when you see the name of our controller, it is HomeController.cs,

 

And this Controller can have several action methods in it. New Views you create will be createdin Views->Home>Your New View.

Now to return a view we need to change its action method,

Now how this Acction Index() will get displayed is, when you see the name of our controller; i.e, HomeController, as we are returning a view it will search a View Folder for a Home Name and will look to see if there are any views starting with Index -- as our Action method is Index our index.cshtml will be rendered.

Now we will have to pass details to View.  How we are going to do that? By using ViewData, BiewNag or ViewModels.We will see these in detail in the next article. Here we are going to Use ViewData.

But as you noticed I had returned an Action result  -- now just hover the mouse to view and see what it says,



It says ViewResult  -- now just press F12 and on view you will see, 



You will see ViewResult() now press F12 again,


You will see a ViewResultBase --  now press F12 again and you will see that it actually inherits from ActionResult.


Note: A controller can do several things, not just returning a view. It can return to another controller or it can return an XML result .

Now we will be using ViewResult here and will be saving those details in ViewBag,



Now lets go bak to our Index.cshtml page and see how we are going to display details. Intially when we created a page it looks like this,



We will rename ViewBag.Title=”Display Details” and <h2> also,



Now Just run the application lets see what we get,



We are getting a Page saying Title name  -- now we have to pass details. To pass details we have to use foreach here,



As you can see I had added @ before foreach. Why? Because it's a razor conversion. As this is a HTML page bit we require some C# code to display details --  @ is used to switch from HTML to C#,



Now write this code in foreach as a string as we are diaplying details in the string and storing those in a variable called as “strDetails” in ViewBag.Details.

Now we just  have to print that variable and we have to use @strDetails to print. Now just run the application and let's see what we get,



As you can see in the above output, we got the details. We have successfully created view and passed data from controller to view .

Conclusion: This was all about Views in MVC.