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