Asp.net MVC3.0 Getting Started Guide 3.2 View

Last Update:2018-12-05 Source: Internet

Author: User

Tags actionlink

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Change view and layout page

First, you want to change the title "My MVC Application" at the top of the page ". These text for each

The page is the same. In fact, it is implemented only once in the project, even though it appears on every page.

Go to Solution Explorer/Views/SharedUnder_ Layout. cshtmlFile. This

A file is called a layout page. It is shared as the "shell" of all pages ".

// Translator's note: it is similar to masterpage in webform.

The layout template allows you to specify the HTML container of the website and apply it to all the pages of the website.

Pay attention to the @ RenderBody () line at the bottom of the file. RenderBody is a list of all view pages.

Is enclosed in the layout page. Place the title "My MVC Application" on the layout page"

Change to "MVC Movie App ".

<div id="title">
      </div>

Run the program. Note that the "MVC Movie App" is displayed. Click the About link,

You can see that the page still displays "MVC Movie App". We changed it in the layout page.

After one, a new title is output on all pages.

The complete code on the template page is as follows:

<!DOCTYPE html>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />


<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">

</script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript">

</script>
<body>
    <div class="page">
                    <div id="title">
                            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
                <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>

  
 Now, let's change the title of the View Index page.
 Open a fileMvcMovieViewsHelloWorldIndex. cshtml. There are two requirements
 Modify: first, modify the text displayed in the title bar of the browser, and then modify the label 
 The code will be slightly adjusted, you can see that some of the Code in the program has undergone a small change.
  
 @{
    ViewBag.Title = "Movie List";
}


<p>Hello from our View Template!</p>
  
 To specify the HTML display title, the preceding Code sets a view template.Index. cshtml 
 The Title attribute of ViewBag. If you look back at the source code of the layout template, you will find the Template
 UseThe <title> element is part of the  

 In this way, you can easily pass other parameters between the view template and the layout file. 
 
 Run and browseHttp: // localhost: xx/HelloWorld. Notice the browser title, 
 The main title and secondary title have changed (if you do not see the change, you may 
 View the content cached by the browser on your machine. Press Ctrl + F5 to force the refresh and force the slave Service 
 Server load response ). 
 
 Also noted that the view TemplateIndex. cshtmlContent is merged into the layout file, an HTML response 
 Sent to the browser. The layout template ensures that all changes are easily applied to all pages. 
  
 
 Although we have a little bit of "data" ("Hello from our View Template! "Message) 
 It is hard-coded. The MVC application already has the view "V" and controller "C", but it still does not 
 Model "M". Now we will learn how to create data from a model and obtain data (using codefirst technology ). 
 
 Slave controllerControllerPass data to viewView 
 
 Although we used to access the database and discuss the model, this time we will discuss how to transmit data from the Controller to the view.
 The Controller class you write is to process incoming parameters, obtain data from the database, and ultimately decide the class
 Response to the client browser. View templates can be used by controllers to generate and
 Format the HTML response to the browser.
  
 The Controller is responsible for providing various forms of data and objects, in order to present a response to the browser in the view template.
 View templates may never show business logic or directly interact with databases. Instead, only the Controller
 Data Work provided to it. Keep this separation of concerns ("separation of concerns ").
 Make your code clean and easy to maintain.
  
 Currently, the ControllerHelloWorldController classThe Welcome method passes the Parametername、 
 NumTimes, and their values are directly output in the browser. Instead of sending a controller
 For string response, let's change the Controller to replace it with a View template. View Template
 Generate dynamic responses, which means that you need to pass appropriate data from the Controller to the view template so that
 Generate a response. You can add dynamic data in the Controller to implement this function. The view template needs it.
 The ViewBag object that can be accessed.
  
 BackHelloWorldController. csFile to change itsWelcome, for the ViewBag object 
 Increase the value of Message and NumTimes.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More