ASP.NET MVC study notes-2.Razor syntax

1. Expression

The expression must follow the "@" sign,

2. Code Blocks

Code blocks must be within "@{}" and each line of code must end with a ";". Variables defined in a code block may be used by other blocks in the same domain. For example, variables defined at the top of a view can be accessed by code blocks and code segments in the same view.

3. Layout

Razor maintains a consistent look and feel of web pages through layouts. Layout templates contain basic tags and can specify where to render view content. for example

Basic layout file (_Layout.cshtml)

<!DOCTYPE Html>
<html lang=”en”>
    <head>
        <mete charset=”utf-8”/>
        <title>@View.Title</title>
     </head>
    <body>
        <div class=”header”>
            @RenderSection(“Header”);
        </div>
        @RenderBody()
        <div class=”footer”>
            @RenderSection(“Footer”);
        </div>
    </body>
</html>

After the layout page is defined, other view pages can reference the layout file, such as

@{Layout=”~/_Layout.cshtml”;}
@section Header {
    <h1>Page Header Content</h1>
}
@section Footer {
    Copyright @DateTime.Now.Year
}
<div class=”main”>
    Page Main Content
</div>

Use Razor layouts and content views to group pages together to present a complete page, each of which defines a different part of the page.

4. Partial view

Use layout to achieve consistency in website appearance by reusing part of HTML code, but in some cases, layout cannot be achieved. For example, some information on a webpage needs to be repeated many times (consistent format, inconsistent display content), for example, shopping website A list of transactions on the page, showing only the transaction name, current price, and summary information.

ASP.NET MVC implements this requirement through the technique of partial views.

First, define a partial view and save it as a separate view file (for example, ~/Views/Shared/Acution.cshtml).

@model Auction
<div class=”auction”>
    <a href=”@Model.Url”><img src=”@Model.ImageUrl”</a>
    <h4><a href=”@Model.Url”>@Model.Title</a></h4>
    <p>Current Price :@Model.CurrentPrice</p>
</div>

Then, in the place where the partial view needs to be used, call it by calling the HTML method that comes with ASP.NET MVC, for example:

@model IEnumerable<Auction>

<h2>Search Result</h2>
@foreach(var auction in Model){
    @Html.Partial(“Auction”,auction);
}

Among them, the first parameter "Auction" of the Html.Partial() method is the partial view name and needs to include the extension. The second parameter is the data model passed to the partial view. The second parameter is not required. If it is not passed, the system will pass the data model of the partial view to be called by default, for example, IEnumerable<Auction> in this example.

It can be seen that using partial views can reduce code duplication and coding complexity in web pages and enhance readability.

5. Display data

MVC architecture is divided into three layers, model, view and controller. The three layers are separated from each other and work together. Among them, the controller needs to play the role of "coordination". The view passes the request to the controller, the controller operates on the model, and feeds back the operation results to the view. data is presented.

The data transfer method between the controller and the view, ASP.NET MVC provides the following implementation methods:

1) ViewData

The implementation of ViewData, its implementation is similar to the operation of Dictionary, which makes data transfer very simple.

In the controller method, use something like ViewData["DataKey"]=dataValue for assignment, and in the view file, use var dataValue=ViewData["DataKey"] to get the data.

2) ViewBag

The usage type of ViewBag is the same as the dynamic type in C#, and its properties can be directly manipulated, for example,

Controller method: ViewBag.DataProperty=dataValue;

View file: var dataValue=ViewBag.DataProperty;

3) Model property

The Model property is strongly typed and dynamically typed, and can be accessed directly by typing "@Model" on the view.

6. HTMLHelper和URLHelper

The goal of a Web request is to send HTML code to the user. In Razor syntax, ASP.NET MVC has two important helper classes to generate the corresponding HTML code, HTMLHelper and URLHelper. The HTMLHelper class is used to generate HTML markup code, and the URLHelper is used to generate URL address links.

<img src=’@Url.Content(“~/Content/images/header.jps”)’/>
@Html.ActionLink(“Home”,”Index”,”Home”)

The rendered HMTL code is:

<img src=’/vdir/Content/images/header.jpg’/>
<a href=”/vdir/Home/Index”>HomePage</a>

ASP.NET MVC study notes-2.Razor syntax

Guess you like