Summary of ASP. NET MVC5 official tutorials (3) Add a view,. netmvc5

Source: Internet
Author: User
Tags actionlink

Summary of ASP. NET MVC5 official tutorials (3) Add a view,. netmvc5
Summary of ASP. NET MVC5 official tutorials (3) Add a view

In the previous chapter, we talked about "C" and controller Controllers in MVC. In this chapter, we will talk about "V" and view Views.

First, open our project, open our HelloWorldController, and modify Index ():

<span style="font-size:14px;">public ActionResult Index(){       return View();}</span>

The Index method above uses a view template to generate the HTML code required by the browser. The Controller method (also called the operation method). As mentioned above, the Index method usually returns the ActionResult (or a class derived from the ActionResult), but it is not a string of the primitive type.

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. Then, click Create a project.

 

Select MVC5-view. In the add view dialog box, name the View Index and default values of other settings that are retained, and click Add.

The created Index. cshtml file is shown below:

Open the following code:

@{    ViewBag.Title = "Index";}

Add the following html code

<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 under the Index, and we find that there are many things we did not write on them, so we can change them.

First, you want to change the "Application name" link at the top of the page. This text is available on every page and is public. Although it appears on every page in the program, it is actually written in only one place. Find the/Views/Shared folder in Solution Explorer and 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.

The layout template allows you to specify an HTML container somewhere on the page and then apply it to multiple pages on the website. Find the @ RenderBody () line. RenderBody is a placeholder. All the view pages that you use the _ layout. cshtml file will be displayed in this place, and "Wrap" in the layout page.

Modify ActionLink in the layout template and 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:


The application is now "MVC Movie. Click the About link and you will see the "MVC Movie" page ". We modified the layout template and changed the title for all pages on the website.

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

Open MvcMovie \ Views \ HelloWorld \ Index. cshtml. We need to modify the text in the title bar of the browser, followed by the secondary title (

@{    ViewBag.Title = "Movie List";}

To specify the Title displayed in HTML, the above Code sets the Title attribute of the ViewBag object (in the Index. cshtml view template. This value is used for the <title> label of the

With this ViewBag method, you can easily transfer your view template and layout file between other parameters.

Run the application and browse http: // localhost: xx/HelloWorld. Note the changes on this page: the browser title, main title, and title have all changed. (If you do not see these changes, the browser may cache the previous content, press CTRL + F5 in the browser to force the page from refresh ).

The browser title allows us to pass the layout page parameters in Index. cshtml. The layout page is added with the "-Movie App" section. In this example, you can see that the layout template provides a simple way to modify all pages in an application.

So far, we have used a small amount of data (like "Hello from our View Template!" in the above example !") All are hard-coded. We use "V" (View) and "C" (Controller) in MVC, but we have never used "M" (Model ).

Next we will show you how to create a database and obtain data through the model.

Before discussing databases and models, let's talk about transferring data from controllers to views. The Controller class is called in response to incoming requests. The controller class is used to write code to process browser requests, retrieve data from the database, and finally decide what type of response is sent to the browser. The view template is used by the Controller to generate and format HTML responses to the browser.

The Controller is responsible for providing necessary data or objects for the view template to draw HTML response browsers. One best practice is: View templates never participate in business logic or directly interact with databases. On the contrary, the view template only works with the data provided by the Controller. Keeping this separation of focus helps keep the code clean, testable, and easier to maintain.

First, 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 directly outputs the value to the browser. Let's modify the controller and use the view to replace the string. The view template generates a dynamic response, which means you need to pass some data through the Controller to generate a response.

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

ASP. net mvc model binding system automatically maps named parameters (name and numTimes) to methods from address parameters. Then create the Welcome Page Based on the Index page.

Add the following code under the

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

Then run the command at http: // localhost: 15032/HelloWorld/Welcome? Name = Scott & numtimes = 4

You need to switch to your port.

Effect:

This is just a way to pass values from the view to the Controller. This chapter will be discussed later in other ways.

 

 

 

 


 

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.