MVC Part Three (Views)

This is the second part of the tutorial series about MVC.

In the first part, we have dig into a quick start of creating an empty ASP.NET MVC application and defined some basics. In this part, we will try to explain the mechanism of MVC and make the previous example work for the first time.

In the second part, we have given some basic definitions and information about controllers, what they are and how they work.

In the third part of the tutorial series, we will concentrate on the Views and the organization of the UI elements.

Views

Views are one of the complicated parts of the MVC architecture and they serve as the user interface (UI) layer for the application.

In order to add a view to our application, we have some alternative approaches. First of all, we need to decide weather our new view will be dedicated to a specific controller or will be a common view that may be used more than one purpose.

Shared views are placed in a folder named “Shared” just under the “Views” folder. If the view will be associated to a specific controller, we need to put it in a folder named as the controller name (without Controller sufix) under the Views folder.

In either way it is important to notice that Asp.Net MVC views and controllers are not tightly coupled. One action method can refer more than one view and one view can be referred by more than one action method (on the condition that it is placed under the Shared folder).

Creating a View (Method 1)

Create a folder named “Shared” under the “Views” folder (if it is not already present). And right click to Shared folder and select Add>View to create a view named “SharedAction” as shown below.

30

By clicking Add button, a new file “SharedAction.cshtml” is placed in the Shred folder. This simple file looks like this:

@{
ViewBag.Title = “SharedAction”;
}

<h2>SharedAction</h2>

Creating a View (Method 2)

This is an easier way of creating a view. If you remember that we had a DemoController class previously created in our MVC_DemoAPP, we can right clik our MyAction() action method name and click “Add View” option.

Entering a view name and clicking the Add button will be enough for creating the specific view as show below. Here, change the view name to MyAction2 since MyAction view has been already included in our demo app. (In this way, view is located in the specific folder in Views folder having the same name with the Controller.)

32

We have previously said that views are the UI part of the MVC architecture and the default expected UI candicate for web applications be the HTML output. The content of the SharedAction view is far away from a complete HTML syntax. As you probably know, even some basic structure is not defined like <html>, <body> etc.

_Layout.cshtml

At this point we nedd to talk about a special view that is called as the Layout view. ASP.NET MVC has a Layout view that contains common UI components, to prevent repetition of the common code in every page. This layout view is same as the master page of the ASP.NET webform application. Since that view is a common container and will be shared among other views, it is located in the Shared folder in the Views folder.

The layout view allows you to define a common site template, which can be inherited in multiple views to provide a consistent look and feel in multiple pages of an application. The layout view eliminates duplicate coding and enhances development speed and easy maintenance.

If you open the Layout view you see that the layout view contains html tags, head, body etc as the normal html. But if you look at closer, you see that some non html code exists in it. Among them the most important one is the RenderBody() method. RenderBody acts like a placeholder for other views. The content of the other views like SharedAction view  will be rendered in to the layout view, in the palce where the RenderBody() method is being called.

_ViewStart.cshtml

As for the master pages in ASP.NET WebForm applications, ASP.NET MVC applications may have one ore more than one layout views defined. The default layout view is specifid in the “_ViewStart.cshtml” file in the Views folder. That file is included in the Views folder by default ant ist contents look like that:

@{
Layout = “~/Views/Shared/_Layout.cshtml”;
}

As you see, it is a simple file, just setting up the layout page to the defaults. It sets all the views in the Views folder and sub-folders to the defult layout. In the sample code (_ViewStart.cshtml), the Layout property is set to “~/Views/Shared/_Layout.cshtml”.

THis means, “_layout.cshtml” would be layout view of all the views included in Views and its sub-folders. This means, all the views derived the default layout page from _ViewStart.cshtml of Views folder.

One important feature is that the _ViewStart.cshtml can be included in any sub-folder of View folder to set the default layout page for all the views included in that particular sub-folder only.

A new layout page can be created simply right clicking the Shared folder in Views folder and selecting the Add>New Item menu from the dialog and selecting MVC Layout Page under the MVC part of the Web templates as shown below.

31

Setting Layout property in individual views

We can also override the default layout page set by _ViewStart.cshtml by setting Layout property in each individual .cshtml view files. The following code snippet shows how to change the default layout for a particular view:

@{
ViewBag.Title = “My Page”;
Layout = “~/Views/Shared/_myCustomLayoutPage.cshtml”;
}

Specify Layout page in ActionResult method

We can also specify which layout page to use while rendering the view from action method using View() method. The following code snippet, the View() method renders Index view using _myCustomLayoutPage.cshtml.

public ActionResult Index()
{
return View(“Index”, “_myCustomLayoutPage”);
}

Rendering Methods

ASP.NET MVC layout view renders child views using the following methods.

Method Description
RenderBody() Renders the portion of the child view that is not within a named section. Layout view must include RenderBody() method.
RenderSection(string name) Renders a content of named section and specifies whether the section is required. RenderSection() is optional in Layout view.

RenderBody() method is simply where all the content of the guest view is rendered in the Layout view. If the so-called guest view has some contents that is marked vy @section definition, RenderSection(string name) method is the place where these marked content is rendered in. Notice that, the @section defined parts are omitted while rendering by the RenderBody() method.

@section <section-name> definition block starts from the definition line and continues until another @section definition or the guest layout ends.

 

So far so good 🙂 In the next part, we are goingto focus on the models and after that we wil put all together to see a woring example.

 

References:

  1. http://www.tutorialsteacher.com/mvc/layout-view-in-asp.net-mvc

 

 

 

 

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: