View in Asp.net MVC

Here we will discuss View in MVC with an example , As we discuss before that View in MVC is used to show the data to user.

Step(1) :- Go to your application and right click on Controller and add a new controller and give name it as “HomeController” and give Scaffolding option as Empty MVC Controller, And click ADD.

After Click add there is Default Function name is “index” with return type is “ Action result” will be available.

Step(2) :- Now here we want to display list of courses available in IT filed. So for that we have to change the return type of this Index Method As List of String because Courses will be in String format. So let’s change the return type of this method.

using System.Web.Mvc; namespace MvcApplication1.Controllers {     public class HomeController : Controller     {         public List<string> Index()         {             return new List<string>()     {         "COMPUTER SCIENCE",         "DOT NET",         "C++",         "INFORMATION TECHNOLOGY"     };         }     } }

We can assess these courses name from database but here we are doing as hardcoded.

  Step(3):-  At  this point if we run our application we will see output as not expected means it will not shoe the name of courses “System.Collections.Generic.List`1[System.String]”  for showing the output as we want we have to add the view to our application

The purpose of view to render the data or format of data as end user wants , in view we can change the format of data means if we want data as bold , colour we can do. So the work of view is to present the data to the end user .

Step(4): Now add a view for this method , so right click on index function add a view

After click on Add view you will see a view window there you will see that the view name is same as Controller name and View engine as Razor Engine after click on ADD. Then you will see a View in View Folder of your application.

If we see that where this Index View add then go to solution explore in View folder there is another folder as HOME and then you will your Index View. Actually here why is view is under home folder because this View is for Home Controller method  , So all the view which are related to this home controller will come under this home Folder.

Step(5):- Now we have to change the return type of this index method which exists in Home controller for showing result in home controller. Now return type will be “Action result”

using System.Web.Mvc; namespace MvcApplication1.Controllers {     public class HomeController : Controller     {         public ActionResult Index()         {             return new List<string>()     {         "COMPUTER SCIENCE",         "DOT NET",         "C++",         "INFORMATION TECHNOLOGY"     };             return View();         }     } }

Here it return a view but how it will find a Index View for that while executing application it will go to View folder and there it will see Home Folder (because Controller name is home) then it will find a View name as Index(Because controller method name is Index).

Step(6): Now here we want list of Courses for showing list of courses here need to pass Courses list from Controller to View . There are several method for passing data from controller to view.

We can use ViewData, View Bag or View modal. Here for passing the data from Controoler to view we will use ViewBag, Means we have to store this information to a property so here we will store this courses information into ViewBag.Courses(Here Courses is any meaningful name) .

using System.Web.Mvc; namespace MvcApplication1.Controllers {     public class HomeController : Controller     {         public ActionResult Index()         {             ViewBag.Courses = new List<string>()     {         "COMPUTER SCIENCE",         "DOT NET",         "C++",         "INFORMATION TECHNOLOGY"     };             return View();         }     } }

Step(7) :- So now for showing list of Coruses we have to change in Index.csHtml class go to Index.csHtml class and give the title name.

For showing the data in list we have to make the foreach loop using the HTML helper  for getting this HTML Helper control start with “@” symbol.

This  "@" symbol is used to switch b/w  html and c# code

@{     ViewBag.Title = "Courses Name"; } <h2>Courses Name</h2> <ul> @foreach (string Courses in ViewBag.Courses) {     <li>@Courses</li> } </ul>

Now Run your application and you will see the courses name as List.

Here if we see the return type of view is ViewResult but we wrote index method with ActionResult return type that because if you will go to definition of this view you will see that this ViewResult is inherited from the ActionResult.

Note:- For Passing the data from Controller to View , we should use Strongly type View modal instead of using ViewData And ViewBag.