MVC Tutorial Part 4 : Create View

In this demo we will be learning :

1. How to create a View
2. Displaying text on screen using View
3. Call different Views associated to a Controller

Lets start by launching VS for web, we will be working on Demo2 project we created in Part 3.

Your EmployeeController.cs file must be as below:

Modify the string Index() Action method to an ActionResult. ActionResult is an abstract class that can have several subtypes. Change EmployeeController.cs controller code to below.

ActionResult is an abstract class that can have several subtypes.

ActionResult Subtypes

·         ViewResult - Renders a specified view to the response stream

·         PartialViewResult - Renders a specified partial view to the response stream

·         EmptyResult - An empty response is returned

·         RedirectResult - Performs an HTTP redirection to a specified URL

·         RedirectToRouteResult - Performs an HTTP redirection to a URL that is determined by the routing engine, based on given route data

·         JsonResult - Serializes a given ViewData object to JSON format

·         JavaScriptResult - Returns a piece of JavaScript code that can be executed on the client

·         ContentResult - Writes content to the response stream without requiring a view

·         FileContentResult - Returns a file to the client

·         FileStreamResult - Returns a file to the client, which is provided by a Stream

·         FilePathResult - Returns a file to the client

To add View right click on Index() method and navigate to Add View.

This will open an Add View window, without changing anything click on Add, we will learn about all other options inside the Add View window in later sessions.

This will create a View called Index.aspx inside Folder Views/Employee folder. Below is what is created.

Make changes to the newly added View as below:

<h4>Index.aspx View inside Employee Controller is called</h4>

Run application and navigate to, localhost:*****/Employee

So, now we are able to display content using View. Our EmployeeController is calling Index View here. If you modify URL as http://localhost:*****/Employee/Index it will display the same page.

Let’s now modify Employee controller as below and try adding some more Views.

Add below ActionsResults to your Employee Controller.

 public ActionResult Create()

        {

            return View();

        }

        public ActionResult Update()

        {

            return View();

        }

        public ActionResult Delete()

        {

            return View();

        }   

Page will look as below:

Now let’s add View for the ActionResults we have just added.

Right click on Create() Action method and navigate to Add View, Click Add. In the same manner add View for Delete() and Update().

Your Solution Explorer should look as below. Your Controller is now using four Views now, Create, Update, Delete and Index.

Navigate by changing your URL to below:

http://localhost:*****/Employee/Create

http://localhost:*****/Employee/Update

http://localhost:*****/Employee/Delete

In next tutorial we will learn how to navigate between Views directly by using links, also navigate between different Views across different Controllers.

To learn more about MVC follow all parts of this tutorial series.

For detailed documentation and Video notes on MVC visit:

www.itsolution4u.com

Created by:

Team: Techies@its4u

ITSolution4U – Technology Expert

ITSolution4U Home Page:

http://www.itsolution4u.com

Blogs:           http://techiesits4u.blogspot.in/

Facebook: https://www.facebook.com/itsolution4u

Twitter:     https://twitter.com/IT_S4U

LinkedIn:   www.linkedin.com/company/itsolution4u