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请求。

本文作者：拓荒者IT

本文链接：https://www.cnblogs.com/youring2/p/8687005.html

📌做了个微信公众号【拓荒者IT】，分享各种技术干货，新内容首发到公众号，欢迎关注❤️

posted @ 2018-04-01 16:12 拓荒者IT 阅读(1140) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称：拓荒者IT 园龄：16年3个月粉丝：推荐博客关注：1420

昵称：拓荒者IT
园龄： 16年3个月
荣誉：推荐博客
粉丝： 1420
关注： 25

👉关注【拓荒者IT】公众号

2025年3月

日

一

二

三

四

五

六

拓荒者

ASP.NET Core使用Razor页面

ASP.NET Core使用Razor页面

Hello World 页面

添加Model字段

添加POST操作

添加数据验证

公告

最新随笔

积分与排名

随笔分类 (449)

随笔档案 (356)

阅读排行榜

评论排行榜

推荐排行榜

	// 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();
	}

	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";
	}
	}

	<body>
	<h1>Hello World</h1>
	<p>
	Method:@Model.Method
	</p>
	<p>
	Server time:@Model.ServerTime
	</p>
	</body>

	public class Visitor
	{
	public string Name { get; set; }
	public string Email { get; set; }
	}

	/// <summary>
	/// 访客
	/// </summary>
	[BindProperty]
	public Visitor Visitor { get; set; }

	/// <summary>
	/// Post操作
	/// </summary>
	public void OnPost(Visitor visitor)
	{
	this.Method = "Post";
	this.Visitor = visitor;
	}

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

	public class Visitor
	{
	[Required]
	[StringLength(20, MinimumLength =5)]
	public string Name { get; set; }

	[Required]
	[EmailAddress]
	public string Email { get; set; }
	}