Learn about ASP. NET MVC5 Official Tutorials Summary (iii) Add a view

Source: Internet
Author: User
Tags actionlink

Learn about ASP. NET MVC5 Official Tutorials Summary (iii) Add a view

In the previous chapter we talked about the "C" in MVC, the Controller controllers, this chapter we talk about "V", view views of knowledge.

First, open our project, open our Helloworldcontroller, and modify index ():

<span style= "FONT-SIZE:14PX;" >public ActionResult Index () {       return View ();} </span>

       above index method use a view template to generate the   required by the browser; HTML&NBSP; code. Controller method   (also known as How to do index The &NBSP method typically returns the actionresult (or from   ACTIONRESULT&NBSP; derived classes), But he's not like a primitive type string.

First, Create a View folder for the HelloWorld controller. Right-click View, click Add, and then click New Folder named HelloWorld.

Right-click the HelloWorld folder and click Add, and then click New to build a scaffolding item.

Then select mvc5-View, in the Add View dialog box, name the View Index and leave the default values for other settings, and then click Add.

The index.cshtml file that you created is shown below:

Open the code like this:

@{    viewbag.title = "Index";} 

Add the following HTML code tag below.

<span style= "FONT-SIZE:14PX;" ><p>hello from our View template!</p></span>

then click Run: Http://localhost:XX/HelloWorld/Index

Effect:

The statements we write are below index, and then we find that there are a lot of things that are not written by us on top, and we are going to change them.

        first, you want to change the " application name " link, this text on each page has, is common. Although it appears in every page of the program, it is actually written only in one place. In Solution Explorer, locate the   /views/shared  folder, open the _layout.cshtml  file. This page is called a layout page and is placed in a shared folder that can be used on all pages.

Layout templates allow you to specify an HTML container somewhere on the page and then apply it to multiple pages in the site. Find the @RenderBody () line,renderbody is a placeholder, all you used _layout.cshtml The view page of the file will be displayed in this place," wrapper " in the layout page.

Modify the actionlink in the layout template to change "application name" to "MVC Movie".

@Html. ActionLink ("MVC Movie", "Index", "Home", NULL, new {@class = "Navbar-brand"})


and modify the code at the title tag

<title> @ViewBag. Title-movie app</title>

Effect:


Running the application will now become "MVC Movie" . Click on the About link and you will see this page also shows "MVC Movie". We just modified the layout template to replace all pages in the site with a new title.

Now let's change the title in the Index view .

Open mvcmovie\views\helloworld\index.cshtml. There are two places we need to modify: The text in the title bar of the browser, and then the secondary title ( Element). You can change the code a little bit so you can see which code is affecting which parts.

@{    viewbag.title = "Movie List";} 

To indicate the title of the HTML Display, the ViewBag object (in the index.cshtml view template) is set in the code above. Title property. In the layout template (views\shared\_layout.cshtml) of the node <title> The label uses this value.

Using this ViewBag method, you can easily pass your view templates and layout files between other parameters.

Run the application and browse to Http://localhost:xx/HelloWorld. Notice the change in this page: the browser title, the main title, and this title have all changed (if you do not see these changes, it is possible that the browser cached the previous content, press ctrl+f5 in the browser to force from the Refresh page).

The browser title allows us to pass the parameters to the layout page in index.cshtml, and the layout page adds the "-Movie App" section. As you can see from this example, the layout template provides a simple way to modify all the pages in your application.

So far, we have used a small amount of data (as in the example above"Hello from our View template!") are hard-coded. We're using it.MVCin the"V"(View) and"C"(Controller), but it didn't work."M"(Model).

Next we'll walk through how to create a database and get the data through the model.

before we talk about databases and models , Let's talk about passing data from the controller to the view. The controller class is called when responding to incoming requests, and the controller class is what you write code to handle browser requests, retrieve data from the database, and ultimately decide what type of response to send to the browser. The view template is used by the controller to generate and format HTML responses to the browser.

The controller's responsibility is to provide the view template with the necessary data or objects to draw the HTML Response Browser. A best practice is that the view template never participates in business logic or interacts directly with the database. Instead, the view template works only with the data provided by the Controller. Keeping this " separation of concerns " helps keep your code neat, testable, and easier to maintain.

First, let's modify the Helloworldcontroller controller.

Using system.web;using system.web.mvc;namespace mvcmovie.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 ();}}   }


Currently, the Welcome method in the Helloworldcontroller class requires two parameters: Name and Numtimes, and then outputs the value directly to the browser. Let's modify the controller and use the view to replace the directly corresponding string string. The view template generates a dynamic response, which means that you need to pass some data through the controller to generate the response.

To do this, you need to put the data (parameters) into the ViewBag object in the controller , and the view can access the ViewBag object.

The ASP. NET MVC Model binding system automatically maps named parameters (name and Numtimes) to the method from the address parameters. Then build the Welcome page in the way that you built the index page.

Add this piece of code to the

<ul>    @for (int i = 0; i < viewbag.numtimes; i++)    {        <li> @ViewBag .message</li>    }</ul>

Then run, address http://localhost:15032/HelloWorld/Welcome?name=Scott&numtimes=4

You are going to switch to your port.

Effect:

This is just a way of passing values from the view to the controller. Another way to speak later, this chapter is here.


Learn about ASP. NET MVC5 Official Tutorials Summary (iii) Add a view

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.