ASP.NET Core使用Razor页面
Razor是ASP.NET的页面引擎，在ASP.NET MVC 3以后被广泛使用，我在之前的博客中有所介绍，需要更多了解的朋友请移步【Razor语法】
在ASP.NET中，我们仍然使用Razor来构建Web页面。
首先使用Visual Studio 2017创建一个Web应用程序，打开创建好的项目，可以看到VS已经为我们创建好了项目的结构：
| 文件/文件夹 | 说明 |
|---|---|
| wwwroot | 静态文件目录 |
| Pages | Razor页面 |
| appsettings.json | 配置 |
| Program.cs | 托管ASP.NET Core的应用 |
| Startup.cs | 应用启动类，用于配置应用程序 |
与空白应用程序不同的是，Web应用默认为我们引用了MVC管道，代码在Startup文件中：
// 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();
}接下来我们创建一个自己的Razor页面。
Hello World 页面
在Razor文件夹邮件，选择Razor，不使用模板页，创建好以后，可以看到生成了两个文件：
| 文件名 | 说明 |
|---|---|
| HelloWorld.cshtml | Razor页面 |
| HelloWorld.cshtml.cs | Razor页面对应的Model |
如果需要修改HTML代码，则在Razor页面中进行修改；数据、页面行为等内容则在Model文件中进行修改。
运行我们的HelloWorld页面，Razor对应的页面地址为:~/HelloWorld。
添加Model字段
为了测试Model的用法，我们在Model中添加两个字段，并在OnGet方法中赋值，修改后的Model如下：
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";
}
}对页面进行修改，添加显示Model中字段的代码：
<body>
<h1>Hello World</h1>
<p>
Method:@Model.Method
</p>
<p>
Server time:@Model.ServerTime
</p>
</body>编译应用程序，刷新浏览器中的页面查看效果。
添加POST操作
添加新的实体Visitor：
public class Visitor
{
public string Name { get; set; }
public string Email { get; set; }
}在Model中添加OnPost代码：
/// <summary>
/// 访客
/// </summary>
[BindProperty]
public Visitor Visitor { get; set; }
/// <summary>
/// Post操作
/// </summary>
public void OnPost(Visitor visitor)
{
this.Method = "Post";
this.Visitor = visitor;
}对Visitor字段使用了BindProperty特性，表明这个字段进行绑定操作。
对页面进行修改：
<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>刷新页面，填写相应的信息，随后点击提交按钮，OnPost方法可以正常接收到参数，更新后的页面也可以带出刚才提交的数据。
添加数据验证
public class Visitor
{
[Required]
[StringLength(20, MinimumLength =5)]
public string Name { get; set; }
[Required]
[EmailAddress]
public string Email { get; set; }
}使用DataAnnotations对Visitor类中的字段进行标注。然后在OnPost中进行验证：
/// <summary>
/// Post操作
/// </summary>
public IActionResult OnPost()
{
if (!ModelState.IsValid)
{
return Redirect("~/HelloWorld");
}
this.Method = "Post";
return Page();
}此时，如果提交的数据不能通过验证，则页面跳转到Get请求。
原文地址：https://www.cnblogs.com/youring2/p/8687005.html
时间： 2024-10-16 15:57:28