Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

Asp.Net MVC

Learn step by step



ASP.NET MVC - Views

The view is liable for providing the user interface (UI) to the user. It is given a reference to the model (the information the controller require to displayed), and the view transforms that model into a format ready to be presented to the user. In ASP.NET MVC, the view accomplishes this by examining a model object handed off to it by the controller and transforming the contents of that to HTML.

The Views Folder

The Views folder saves the files (HTML files) associated to the display of the application (the UI).These files may have the extensions html, asp, aspx, cshtml, and vbhtml, based on the language content.

  • The Views folder hold one folder for every controller.
  • Visual Web Developer has generated an Account folder, a Home folder, and a Shared folder (inside the Views folder).
  • The Account folder hold pages for registering and logging in to user accounts.
  • The Home folder is used for saving application pages like the home page and the about page.
  • The Shared folder is used to save views shared between controllers (master pages and layout pages).


File Types

The following HTML file types can be available in the Views Folder:

File TypeExtention
Plain HTML.htm or .html
Classic ASP.asp
Classic ASP.NET.aspx
ASP.NET Razor C#.cshtml
ASP.NET Razor VB.vbhtml
How to Add View

We will make a view template file using the Razor view engine announced with ASP.NET MVC 4. Razor-based view templates have a .cshtml file extension, and give an stylish way to make HTML output using C#. Razor reduce the number of characters and keystrokes needed when writing a view template, and enables a fast, fluid coding work flow.

Presently the Index method returns a string with a message i.e. hard-coded in the controller class. Alter the Index method to return a View object, as shown in the below code:


public ActionResult Index()
{
return View();
}

The Index method in above code uses a view template to generate an HTML response to the browser. Controller methods (Action Method),same as the Index method above, normally return an ActionResult , not primitive types like string.

Add a view template that you can use with the Index method.Right-click inside the Index method and click Add View.


The Add View dialog box Show. Left the regular the way they are and click the Add button:


The TutOnMVC\Views\HelloWorld folder and the TutOnMVC\Views\HelloWorld\Index.cshtml file are generated.We can see them in Solution Explorer:


The below image shows the Index.cshtml file that was created:


Add the HTML under the tag as shown.

<p>Hello from our View Template!</p>

The complete TutOnMVC\Views\HelloWorld\Index.cshtml file is shown below.

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

In Visual Studio 2012, in solution explorer, right click the Index.cshtml file and choose View in Page Inspector.


Run the application and browse to the HelloWorld controller (http://localhost:xxxx/HelloWorld). The Index method in your controller did not do much work; it simply run the statement return View(), which identify that the method should use a view template file to return a response to the browser. Because you did not explicitly identify the name of the view template file to use, ASP.NET MVC defaulted to applying the Index.cshtml view file in the \Views\HelloWorld folder. The below image shows the string "Hello from our View Template!".


Changing Views and Layout Pages

Firstly,we want to replace the "your logo here." title at the top of the page. That text is common to each page. It is actually apply in only one place in the project, even though it show on each page in the application. open the /Views/Shared folder in Solution Explorer and open the _Layout.cshtml file. This file is also called a layout page(Master Page) and it's the shared that all other pages use.


Layout templates permit you to particular the HTML container layout of your site in one place and then implement it across multiple pages in your site.Search the @RenderBody() line.RenderBody is a placeholder where all the view-particular pages you make show up, "wrapped" in the layout page.For example,if you choose the About link, the Views\Home\About.cshtml view is return inside the RenderBody method.

Replace the title heading in the layout template from "your logo here" to TutOnMVC".

<div class="float-left">
<p class="site-title">@Html.ActionLink(TutOnMVC", "Index", "Home")</p>
</div>

Replace the contents of the title element with the following markup:

<title>@ViewBag.Title - TutOnMVC App</title>

Run the application and notice title site TutOnMVC ". Click the About link, and we see how that page shows TutOnMVC". We were free to make the change once in the layout template and have all pages on the site send back the new title.


Now,change the title of the Index view.

Open TutOnMVC\Views\HelloWorld\Index.cshtml. There are two places to make a change: first, the text that shows in the title of the browser, and then in the second header (the <h2> element).We will make them slightly different so we can see which bit of code replaces which part of the app.

@{
ViewBag.Title = "TutOnMVC list";
}

<h2>My TutOnMVC List</h2>

<p>Hello from our View Template!</p>

To specify the HTML title to show, the code above sets a Title property of the ViewBag object. If we look back at the source code of the layout template, we will notice that the template uses this value in the <title> element as part of the <head> section of the HTML that we changed previously. Using this ViewBag approach,we can simply pass other variable between your view template and your layout file.

Run the application and browse to http://localhost:xx/HelloWorld. See that the browser title, the main heading, and the secondary headings have replaced.(If we do not see changes in the browser,we might be seeing cached content.Press Ctrl+F5 in your browser to force the response from the server to be loaded.) The browser title is make with the  ViewBag.Title we put in the Index.cshtml view template  and the additional  "- TutOnMVC App" added in the layout file.

Also see how the content in the Index.cshtml view template was combined with the _Layout.cshtml view template and HTML response was sent to the browser. Layout templates create it really simple to make changes that apply across every pages in your application.


Our little bit of "data" (in this case the "Hello from our View Template!" message) is hard-coded, though. The MVC application has a "V" (view) and we have got a "C" (controller), but no "M" (model) yet.we will walk through how make a database and retrieve model data from it.

Passing Data from the Controller to the View

First we go to a database and talk about models, though,first talk about passing data from the controller to a view.Controller classes are bring in response to an incoming URL request. A controller class is where we write the code that manage the receiving browser requests,received data from a database,and ultimately determine what type of response to send back to the browser. View templates can be used from a controller to produce and format an HTML response to the browser.

Controllers are liable for giving whatever data or objects are needed in order for a view template to render a response to the browser. A good habit: A view template should never achieve business logic or communicate with a database instantly.A view template should work only with the data that is given to it by the controller. Maintaining this "separation of concerns" helps keep your code simple, testable and more maintainable.

Presently,the Welcome action method in the HelloWorldController class consider a name and a numTimes variable and then outputs the values directly to the browser. Rather than have the controller receive this string,let change the controller to use a view template instead. The view template will produce a dynamic response, which way that we require to pass acquire bits of data from the controller to the view in order to produce the response.We can done by having the controller put the dynamic data that the view template required in a ViewBag object that the view template can then access.

Back to the HelloWorldController.cs file and replace the Welcome method to add a Message and NumTimes value to the ViewBag object. ViewBag is a dynamic object, which meaning we can put whatever we want in to it; the ViewBag object has no explain properties until you put something inside it. The MVC model binding system automatically maps the named variable (numTimes and name ) from the query string in the address bar to variable in your method. The HelloWorldController.cs file :


using System.Web;
using System.Web.Mvc;

namespace TutOnMvc.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}

public ActionResult Welcome(string name, int numTimes = 1)
{
ViewBag.Message = "Hello " + name;
ViewBag.NumTimes = numTimes;

return View();
}
}
}

Now the ViewBag object holds data that will be passed to the view automatically.

Next, we require a Welcome view template! In the Build menu, choose Build TutOnMVC to create sure the project is compiled.

Then right-click inside the Welcome method and click Add View.


Here is what the Add View dialog box


Click Add, and then add the following code under the <h2> element in the new Welcome.cshtml file. You'll create a loop that says "Hello" as many times as the user says it should. The complete Welcome.cshtml file is shown below.


@{
ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul>
@for (int i=0; i < ViewBag.NumTimes; i++) {
<li>@ViewBag.Message</li>
}
</ul>

Run the application and browse to the below URL:

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Now data is received from the URL and send to the controller using the model binder. The controller packages the data into a ViewBag object and passes that object to the view. The view then shows the data as HTML to the user.




Related Videos