Home > Developer > Web Develop
Razor is an ASP. Web page engine, which is widely used after ASP 3, I have introduced in the previous blog, need to know more friends please go to "Razor grammar"
In ASP. NET, we still use razor to build Web pages.
First create a Web application using Visual Studio 2017, open the created project, and you can see that VS has created a structure for our project:
| Files/Folders | Description |
|---|---|
| Wwwroot | Static file directory |
| Pages | Razor page |
| Appsettings.json | Configuration |
| Program.cs | Applications that host ASP. |
| Startup.cs | Application startup class for configuring the application |
Unlike a blank application, the Web app defaults to the MVC pipeline that we referenced, and the code in the Startup file:
// This method gets called by the runtime. Use this method to add services to the container.public void ConfigureServices(IServiceCollection services){ services.AddMvc();}// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.public void Configure(IApplicationBuilder app, IHostingEnvironment env){ if (env.IsDevelopment()) { app.UseBrowserLink(); app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Error"); } app.UseStaticFiles(); app.UseMvc();}
Next we create a razor page of our own.
Hello World PageIn Razor folder mail, select Razor, do not use template page, create well later, you can see that two files were generated:
| file name | Description |
|---|---|
| Helloworld.cshtml | Razor page |
| HelloWorld.cshtml.cs | Razor page corresponding to the model |
If you need to modify the HTML code, the Razor page is modified; data, page behavior, and so on are modified in the model file.
Run our HelloWorld page, razor the corresponding page address is: ~/HelloWorld .
To test the model usage, we add two fields to the model and assign values to the Onget method, and the modified model is as follows:
public class HelloWorldModel : PageModel{ /// <summary> /// 操作 /// </summary> public string Method { get; set; } /// <summary> /// 服务器时间 /// </summary> public string ServerTime { get { return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"); } } public void OnGet() { this.Method = "Get"; }}
Modify the page to add the code that displays the fields in the model:
<body>
Compile the application to refresh the page viewing effect in the browser.
Add Post actionTo add a new entity Visitor :
public class Visitor{ public string Name { get; set; } public string Email { get; set; }}
Add the Onpost code to the model:
/// <summary>/// 访客/// </summary>[BindProperty]public Visitor Visitor { get; set; }/// <summary>/// Post操作/// </summary>public void OnPost(Visitor visitor){ this.Method = "Post"; this.Visitor = visitor;}
An attribute was used on the visitor field to BindProperty indicate that the field was bound.
To modify a page:
<form method="post"> <p> <label>姓名：</label> <input type="text" asp-for="Visitor.Name" /> </p> <p> <label>邮箱：</label> <input type="text" asp-for="Visitor.Email" /> </p> <input type="submit" value="提交" /></form>
Refresh the page, fill in the appropriate information, and then click the Submit button, Onpost method can normally receive parameters, the updated page can also bring out the data just submitted.
Add data validationpublic class Visitor{ [Required] [StringLength(20, MinimumLength =5)] public string Name { get; set; } [Required] [EmailAddress] public string Email { get; set; }}
Use DataAnnotations to label the fields in the visitor class. Then verify in Onpost:
/// <summary>/// Post操作/// </summary>public IActionResult OnPost(){ if (!ModelState.IsValid) { return Redirect("~/HelloWorld"); } this.Method = "Post"; return Page();}
At this point, if the submitted data does not pass validation, the page jumps to the GET request.
ASP. NET core uses Razor page
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
