Home > Developer > Web Develop
Describe
The content of this article belongs to the ASP. NET MVC series view, which mainly explains the view, the content is as follows:
1.Views folder Explanation
2.View type
3.Razor syntax
4. Basic operation of view
A views folder
(a) Views folder of commonly used file types
Analysis:
The 1.asp.net MVC page is basically placed under the Views folder;
2. Using the Aps.net MVC template to generate the framework, the default page under the Views folder is the. cshtml page;
3.asp.net MVC default page is Razor format page, so the default page is. cshtml page;
In 4.asp.net MVC, support for webform pages, i.e.. aspx pages;
5.asp.net MVC, support static HTML page;
(ii) Default Views folder contains content
Analysis:
1. The account controller is not added here;
2). Default convention: In controllers add a controller, will default to the Views folder under the new view ask price, to hold the view added by the controller, such as adding home controller,
Under the views of the automatic new home file, used to store the home controller view;
Two view types
(a) Starting view--_viewstart.cshtml
Analysis:
1. Opens the _viewstart.cshtml file, we found the file is referring to _layout.cshtml file under shared folder, _layout.cshtml what file? Layout page, which will be analyzed later;
2. Let's do the following actions
(1) Comment out the _viewstart.cshtml content and add a div content
(2) Add controller _viewstartdemocontroller and index.cshtml view
(3) Run program, Access view: Http://localhost:2016/_ViewStartDemo/Index
Analysis:
View HTML
(ii) Layout view
As above, we analyzed the _veiwstart.cshtml file, and we found a piece of code inside
@{ Layout = "~/views/shared/_layout.cshtml";}Do not understand this game does not matter, it uses the Razor syntax format, will later share with you razor, but we see the _layout.cshtml file, the file is the Views folder under the shared folder _layout.cshtml view
1. View _layout.cshtml View
Analysis:
(1) _layout.cshtml basic structure is the basic structure of HTML (in fact, the. aspx and. cshtml structures are HTML structures);
(2) We found in the <body></body> area, there are two backend codes: @RenderBody () and @rendersection (). @RenderBody () represents the view body, @RenderSection () represents some views and nodes;
(3) We will run the program and see
Analysis:
(1) We found that the final rendered page consists of two parts: the Layout.cshtml page (which is implemented by the _viewstart.cshtml page reference _layout.cshtml page) and the index page under the home controller;
(2) What exactly is _layout.cshtml? Layout page, equivalent to the WebForm template page;
(3) Let's define a template page
(iii) Strongly typed views
What is a "strongly typed view"? The controller passes a small amount of data to the view, which, in general, can be categorized into two categories: weak class Pass (Viewbag,viewdata,tempdata) and strong category delivery (strongly typed view). However, in the actual operation, when a large amount of data is involved,
Weak categories are not so convenient, and in this case, a strongly typed view is generally used. Strongly-typed views are generally composed of three parts, the controller layer, the view layer, and the model layer, and the invocation relationship between the three is represented as:
1. Create a strongly typed view
(1) Add a UserInfo class to the Model folder
public class UserInfo { string UserName {get; set;} String UserAddress {get; set;} }(2) Add a method qiangleixing () to the controller Partialviewdemo and add the view
(3) Strongly typed view analysis
With strongly typed views, a model object that is strongly typed at both ends is passed from the controller to the view, from which the person obtains the benefits of IntelliSense, compilation checking, and so on. In the Controller method, you can specify the model by passing the model instance to the overloaded view method.
Public ActionResult Qiangleixingview () { list<userinfo> list_userinfo = new list<userinfo> (); for (int i = 0; i < 2; i++) { list_userinfo.add (new UserInfo () {UserName = "alan_beijing" + I, useraddress = " Shanghai "+ (i++)}); Viewbag.list_userinfo = List_userinfo; Return View (List_userinfo); }The next step is to tell the view which type of model is using the @model declaration. Note that you need to enter the fully qualified name of the model (namespace and type name)
@model ienumerable<viewdemo.models.userinfo>
Corresponding view
@model ienumerable<viewdemo.models.userinfo>@{ Layout = null;} <! DOCTYPE html>Of course, you can also use the following limits
@using Viewdemo.models@model ienumerable<userinfo>The corresponding view
@using Viewdemo.models@model ienumerable<userinfo>@{ Layout = null;} <! DOCTYPE html>2. For data transfer between controller and view, please refer to my other article: "ASP. NET MVC" View and controller transfer
Because this article about the page transfer value is more detailed, so here is not analyzed.
3. Let's analyze why it's not very convenient to use a weak type for transmission.
For this example, just for example ViewBag (ViewData and tempdata the same principle)
(1) Adding a method to the controller Partialviewdemo
<summary>// Weak type view, use ViewBag to pass data///</summary>// <returns></returns> Public ActionResult Ruoleixingview () { list<userinfo> list_userinfo = new list<userinfo> (); for (int i = 0; i < 2; i++) { list_userinfo.add (new UserInfo () {UserName = "alan_beijing" + I, useraddress = " Shanghai "}); } Viewbag.list_userinfo = List_userinfo; return View (); }(2) receiving data in the view
@{ Layout = null;} <! DOCTYPE html>We find it troublesome to convert dynamic Viewbag.list_userinf to ienumerable<userinfo> type before enumeration, and of course you can use dynamic instead of
<! DOCTYPE html>The use of dynamic seems to be convenient for many, but careful you may have found that the variable has no intelligent sensing function.
In this, we should understand the viewbag of the inconvenience, of course, careful you will find that the strong type view, just have the above two advantages.
(d) Partial view
What is the "distribution View"? In WebForm development, we often use user-defined control, its function is to improve the reusability of code, reduce the redundancy of code, make the program more modular, then, in ASP. NET MVC, the corresponding introduction of the distribution page based on the razor structure, its role and
The user-defined control in WebForm development is similar.
1. Create a Distribution page
We create a distribution page _partialpagedemo.cshtml under the/views/shared folder and add a piece of code to the page:
<H1 style= "color:red" > I am the distribution pageThe creation process is as follows:
2. Call Distribution page
(1) Add controller Partialviewdemo and view index.cshtml
(2) Call _partialpagedemo.cshtml in the index.cshtml page
3. Several ways to call distribution pages
Way One:
@Html. Partial ()Way two:
@Html. Action ()Way three:
Called by Ajax;
Three Razor grammar
The Razor view engine is the new extension in ASP. MVC3, and is his default view engine, designed to be simple and intuitive. The Razor view engine can be divided into MVC and WebForm view engines, and this article only analyzes the MVC Razor view engine based on space limitations. The core in Razor
Replace "@", which means: tag-code or code-the meaning of the tag. There are generally two basic transformations, code expressions and blocks of code.
(a) Code expression
1. Support Implicit code expression Solver
This feature, in the strongly typed view, is evident.
<div> <ul> @foreach (UserInfo v_userinfo in Model) { @V_UserInfo. UserName @V_ Userinfo.useraddress <br/> } </ul> </div>2. Support Display Code expression
<div>[email protected] (1+2) <div>3.Razor is very smart, you can know that the space character behind the expression is not a valid identifier, so it can smoothly go back to the markup language.
4. Automatically identify message formats
Messages are automatically recognized, not as variables.
<div> @www .qq.com</div>5. Support Text Volume
@{ string blogname= "Alan_beijing";} <div> @BlogName .views</div>This code returns an error indicating that the string has no views property.
In fact we want to output the result: alan_beijing. views, but @blogname.views, view is parsed as a property of Blogname, so an error occurs, at which point the application literal
@{ string blogname= "Alan_beijing";} <div>@ (Blogname). Views</div>6. Support for escape characters
If I want to output: @Alan_beijing
<div>@ @Alan_beijing </div>(ii) Support HTML encoding
We know that in the prevention of XSS attacks (cross-site script injection attacks), the first to do HTML coding, Razor is just HTML-encoded.
@{ string message= "<script>alert (' haacked! ') </script> ";} <span> @message <span>This code will not pop up the warning box and will only render the encoded HTML
<span>&alt;script>alert (' haacked! '); &alt;/script></span>This is not discussed here, but later in the "ASP. NET MVC series" in the following space, specifically explained.
(c) block of code
This should be a lot of people, foreach.
<div> <ul> @foreach (UserInfo v_userinfo in Model) { @V_UserInfo. UserName @V_ Userinfo.useraddress <br/> } </ul> </div>Four basic operations of view
In the template provided by ASP., when creating a view, six models were provided, Create,delete,detail,edit,empty,empty (no model), List. Based on this model, we can easily create additions and deletions for specific entities. Because it is relatively simple, this example only
Simple combination of UserInfo entity demo Create, other operations, please the reader to operate, the principle of thinking, here is a discussion.
We create a base userinfo entity that creates
Test results
Four reference documents
"01" "01" ASP MVC5 Advanced Programming (Jon Galloway,brad Wilson,k.scott allen,david Matson, Sun translation)
"02" Aps.net MVC4
Five copyright areas
"ASP. NET Series "Detailed views
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
