Of Stack

ASP. NET MVC Learning Tutorial Razor Syntax

  • 2021-10-24 19:23:15
  • OfStack

Preface

ASP. NET MVC 3 comes with a new view engine option called "Razor" (in addition to the existing. aspx view engine). Razor minimizes the number of characters typed in writing a view template, and realizes fast and smooth programming workflow. Unlike the syntax of most templates, you don't have to interrupt programming in HTML to clearly mark the beginning and end of a service module. The Razor parser is smart enough to infer from your code. This makes its concise, expressive grammar input clean, fast and interesting. The following words are not much to say, let's take a look at the detailed introduction

1. Expressions

The expression must follow the "@" symbol,

2. Code blocks

The code block must be located in "@ {}", and each line of code must be marked with ";" End. Variables defined in code blocks may be used by other blocks in the same domain. For example, variables defined at the top of the view can be accessed by code blocks and snippets in the same 1 view.

3. Layout

Razor maintains the uniformity of web page appearance layout through layouts. Layout templates contain basic labels 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>

Using the Razor layout and content view, the pages are grouped into one, showing one complete page, each of which defines a different part of the page.

4. Partial view

Layout is used to achieve the uniformity of website appearance by reusing part of HTML code, but there are 1 cases where layout cannot be realized. For example, 1 part of information on web page needs to appear repeatedly (format 1, display content not 1). For example, the transaction list on shopping website page only displays transaction name, current price and summary information.

ASP. NET MVC implements this requirement through partial view technology.

First, define partial views and save them as separate view files (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, call ASP. NET MVC's own HTML method where you need to use this partial view, such as: 


@model IEnumerable<Auction>

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

Where the first parameter "Auction" of the Html. Partial () method is a partial view name and needs to include an 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 call the data model of this part of the view and pass it by default, for example, IEnumerable in this example < Auction > .

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

Step 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, in which the controller needs to play the role of "coordination", the view gives the request to the controller, the controller operates the model, and feeds back the operation results to the view, which presents the data of the model.

ASP. NET MVC provides the following implementations of data transfer between controllers and views:

1) ViewData

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

In the controller method, use something similar to ViewData[“DataKey”]=dataValue In the view file, use the var dataValue=ViewData[“DataKey”] Get data.

2) ViewBag

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

Controller method: ViewBag.DataProperty=dataValue;

View file: var dataValue=ViewBag.DataProperty;

3) Model Attributes

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

6. HTMLHelper and URLHelper

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


<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>

Summarize

Related articles: