Go ASP. NET MVC 5-View

Source: Internet
Author: User
Tags button type actionlink

In this section, you are going to modify the Helloworldcontroller class, using the view template file, in a cleanly encapsulated process: The client browser generates HTML.

You will create a view template file that uses the Razor view engine (Razor view engines) introduced by ASP. NET MVC 3. The Razor view template file uses the. cshtml file extension and provides an elegant way to create the HTML that you want to output using the C # language. When writing a view template file with razor, the required number of characters and keystrokes is minimized and a fast and smooth coding workflow is achieved.

The index method currently in the Controller class returns a hard-coded string. Changing the index method returns a View object, such as the following sample code:

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

The index method above uses a view template to generate an HTML return to the browser. The controller's method (also known as action method), such as the index method above, typically returns a ActionResult (or type inherited from ActionResult), rather than the original type, such as a string.

In this project, you can use the index method to add a view template. To do this, on the views\helloworld folder, right-click, and then click Add, selectMVC 5 View page with (Layout Razor) /c3>.

In the specify the item name (Specify name for item) dialog box, enterIndex , and then click OK.

In the Select Layout page (selecta layoutpages)dialog box, accept the default _ Layout.cshtml, and click OK .

In the dialog box above, the " views\shared" shared folder layout is selected in the left pane. If you have a custom layout in another folder, you can also select it. Later in this tutorial, we'll talk about the layout file.

You can see the Mvcmovie\helloworld folder and the mvcmovie\view\helloworld\index.cshtml file that has been created in Solution Explorer :

Add the following highlight tag code.

@{layout = "~/views/shared/_layout.cshtml";} @{viewbag.title = "Index";} 

In Solution Explorer, locate the index.cshtml file, right-click, and select view in Browser .

More information about this tool is available in the Page Inspector tutorial.

At the same time, run the application and browse in the browser: HelloWorld controller (http://localhost:xxxx/HelloWorld "). The index method of your controller does not do much work, it simply executes the return view (), which specifies that a view template file is used to render the HTML returned to the browser. Because you do not explicitly specify the use of that view template file, ASP. NET MVC uses the index.cshtml view file under the \views\helloworld folder by default. Displays the hard-coded string "Hello from our view template!" in the View file

It looks pretty good. Note, however, that the title bar of the browser appears as "Index-my ASP. Appli" and the large link at the top of the page appears as "Application name." Depending on the size of the browser window, you may need to click on the " three bar " in the upper-right corner, the homepage (home), Introduction (about) contacts, registration (register) and login (log in) links.

modifying views and Layout pages

First, you want to modify the link "application name" at the top of the page. This text is the common text for each page, even if the text appears on each page, but in fact it is only saved in one place in the project. Locate the /views/shared folder in Solution Explorer and open the _layout.cshtml file. This file is called the layout page , and all other sub-pages are shared using this layout page.

Layout templates allow you to place the HTML container required for a placeholder in one place and then apply it to all page layouts in your site. Find @RenderBody (). All view pages that you create are " wrapped " in a layout page, and Renderbody is just a placeholder. For example, if you click on the About link, theviews\home\about.cshtml view will render within the Renderbody method.

Modify the ActionLink content within the Layout template page, modify the site title from "Application Name" to "MVC Movie" and modify the controller parameters from home to movies.

The complete layout file looks like this:

<! DOCTYPE html>

Run the application and you will see "MVC Movie". Click the about link, and you can see that the page also appears as MVC Movie. We can modify the layout template again, so that the title of all the pages in the site are modified at the same time.

To open the created views\helloworld\index.cshtml file, you can find the following code:

@{layout = "~/views/shared/_layout.cshtml";}

The above Razor code, which shows the settings of the layout page. Open the views\_viewstart.cshtml file, which also has the same razor tag code. The views\_viewstart.cshtml file defines the common layout of all the views we use, so you can also annotate or delete the code in the views\helloworld\index.cshtml file.

@*@{layout = "~/views/shared/_layout.cshtml";} *@@{viewbag.title = "Index";} 

You can use the Layout property to set a different layout page, or set to NULL to indicate that you are not using a layout file

Now, let's modify the index view:

Opens the mvcmovie\views\helloworld\index.cshtml file, there are two places that need to be modified:

· Title text on the browser

· Second, level two title text ( element).

Make them slightly different, so you can see that the code in the program is modified.

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

If you want to specify the title element of the HTML, the above code sets the ViewBag properties of the object (in the index.cshtml view template) Title . If you go back to the source code of the layout template, you will find that the template will output this value in the inverted <title> element, as part of the HTML we have previously modified .

<! DOCTYPE html>

With this ViewBag method, you can easily pass additional parameters from the view template to the Layout template page.

Run the application and browse Http://localhost:xx/HelloWorld. The browser's title, main title, and level two headings have all been modified. (If you don't see the changes in your browser, it's possible that the page is cached.) Press Ctrl + F5 to force the browser to re-request and load the HTML returned by the server) in the index.cshtml view template Set the output of the ViewBag.Title browser title, the additional "-Movie App" is added in the layout template file.

Also note how the contents of the index.cshtml view template are merged into the _layout.cshtml template, thus forming a full HTML return to the client browser. With the Layout Templates page, you can easily make a modification and apply it to all pages.

We do this (in this example, "Hello from US View template!" The "Data" of the string) is just a hard code. This MVC application has a "V" (view) and a "C" (Controller), but not "M" (model). But later, we'll show you how to create a database and retrieve the data model.

Views are the way data is presented, and this knowledge can be better used for MVC development. At the same time, some development tools are also available to help with the development process. ComponentOne Studio ASP. This lightweight control integrates seamlessly with visual Studio and is fully compatible with MVC6 and ASP. NET 5.0, which greatly increases development efficiency.

-----------------------------------------------------------------------------------------

The 12 articles in the ASP. NET MVC 5 Getting Started Guide are summarized below:

1. asp 5-Start MVC 5 Tour

2. ASP. NET MVC 5-Controller

3. ASP. NET MVC 5-View

4. asp 5-pass data from the controller to the view

5. ASP. 5-Add a model

6. asp 5-Create a connection string (Connection string) and use SQL Server LocalDB

7. ASP. 5-access the data model from the controller

8. ASP. 5-Validation editing method and edit view

9. asp 5-Add new fields to movie tables and models

ASP. NET MVC 5-Add a validator to the data model

ASP. NET MVC 5-query details and Delete methods

ASP. NET MVC 5-Create an app with the Wijmo MVC 5 template for 1 minutes

Hopefully these articles will be helpful to interested friends, plus a PDF version of the summary document:

The ASP. NET MVC 5 Starter Guide PDF version

Go ASP. NET MVC 5-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.