目录
基本配置
Startup.cs
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages(); //RazorPages
....
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...
//RazorPages
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
});
}
}
Pages
Pages/Shared/_Layout.cshtml
...
@RenderBody()
...
_ViewStart.cshtml
@{
Layout = "_Layout";
}
_ViewImports.cshtml
@using ThreeRazorPage
@namespace ThreeRazorPage.Pages
@addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"
@addTagHelper "*, ThreeRazorPage"
Index.cshtml
@page
@using Three.Models
@using Three.Services
@inject IDepartmentService departmentService;
<div class="row">
<div class="col-md-10 offset-md-2">
<table class="table">
<tr>
<th>Name</th>
<th>Location</th>
<th>Employee</th>
<th>操作</th>
</tr>
@Html.DisplayFor(p => p.departments)
</table>
</div>
</div>
<div class="row">
<div class="col-md-4">
@await Component.InvokeAsync("CompanySummary", new { title = "汇总" })
</div>
</div>
<div class="row">
<div class="col-md-4">
<vc:company-summary title="汇总2"></vc:company-summary>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a asp-page="Department/AddDepartment">Add</a>
</div>
</div>
@functions{
public IEnumerable<Three.Models.Department> departments { get; set; }
public async Task OnGetAsync()
{
departments = await departmentService.GetAll();
}
}
要点
asp-page的跳转
<a asp-page="Department/AddDepartment">Add</a>
依赖注入
@inject IDepartmentService departmentService;
OnGetAsync 获取本页面
public async Task OnGetAsync()
{
departments = await departmentService.GetAll();
}
DisplayTemplates
@Html.DisplayFor(p => p.departments)
使用的是 Pages/DisplayTemplates/Department.cshtml:
@model Three.Models.Department
@inject Microsoft.Extensions.Options.IOptions<Three.ThreeOptions> options
<tr>
@if (Model.EmployeeCount > options.Value.BoldDepartmentEmployeeCountThreshold)
{
<td><strong>@Model.Name</strong></td>
}
else
{
<td>@Model.Name</td>
}
<td>@Model.Loaciton</td>
<td>@Model.EmployeeCount</td>
<td>
<a asp-page="Employee/EmployeeList" asp-route-departmentId="@Model.Id">
Employees
</a>
</td>
</tr>
Component组件
- 使用Component的两种调用方式:
<div>
<vc:company-summary title="汇总2"></vc:company-summary>
</div>
<div>
@await Component.InvokeAsync("CompanySummary", new { title = "汇总" })
</div>
-
Component的定义包括两部分：
-
Pages/Components/CompanySummary/Default.cshtml@model Three.Models.CompanySummary <div class="small"> <div class="row h3"> @ViewBag.Title </div> <div class="row"> <div class="col-md-8"> 员工人数: </div> <div class="col-md-4"> @Model.EmployeeCount </div> </div> <div class="row"> <div class="col-md-8"> 部门平均人数: </div> <div class="col-md-4"> @Model.AvgDepartmentEmployeeCount </div> </div> </div> -
ViewComponents/CompanySummaryViewComponent.csnamespace ThreeRazorPage.ViewComponents { public class CompanySummaryViewComponent : ViewComponent { private readonly IDepartmentService departmentService; public CompanySummaryViewComponent(IDepartmentService departmentService) { this.departmentService = departmentService; } public async Task<IViewComponentResult> InvokeAsync(String title) { ViewBag.Title = title; var summary = await departmentService.GetCompanySummary(); return View(summary); } } }
添加RazorPage
在Pages文件夹下，选择“添加/Razor页面”，名称为“AddDepartment.cshtml”，将自动生成 AddDepartment.cshtml和AddDepartment.cshtml.cs
-
AddDepartment.cshtml.cs
public class AddDepartmentModel : PageModel { private readonly IDepartmentService departmentService; [BindProperty] public Three.Models.Department Department { get; set; } public AddDepartmentModel(IDepartmentService departmentService) { this.departmentService = departmentService; } public async Task<IActionResult> OnPostAsync() { if (!ModelState.IsValid) { return Page(); } await departmentService.Add(Department); return RedirectToPage("/Index"); } } -
AddDepartment.cshtml
@page @model ThreeRazorPage.Pages.Department.AddDepartmentModel <form asp-action="Add"> <div class="row form-group"> <div class="col-md-2 offset-md-2"> <label asp-for="Department.Name"></label> </div> <div class="col-md-6"> <input class="form-control" asp-for="Department.Name" /> </div> </div> <div class="row form-group"> <div class="col-md-2 offset-md-2"> <label asp-for="Department.Loaciton"></label> </div> <div class="col-md-6"> <input class="form-control" asp-for="Department.Loaciton" /> </div> </div> <div class="row form-group"> <div class="col-md-2 offset-md-2"> <label asp-for="Department.EmployeeCount"></label> </div> <div class="col-md-6"> <input class="form-control" asp-for="Department.EmployeeCount" /> </div> </div> <div class="row"> <div class="col-md-2 offset-md-2"> <button type="submit" class="btn btn-primary">Add</button> </div> </div> </form>
要点:
[BindProperty]
当在Page页中定义的Mode是
@model ThreeRazorPage.Pages.Department.AddDepartmentModel
而实际绑定的是Three.Models.Department Department ,则使用[BindProperty]
public class AddDepartmentModel : PageModel{
...
[BindProperty]
public Three.Models.Department Department { get; set; }
...
}
@page 和 @model
@page
@model ThreeRazorPage.Pages.Department.AddDepartmentModel
添加PageRazor空页
新建文件夹 Pages/Employee，并且在其下面，选择“添加/Razor视图- 空”，名称为“EmployeeList.cshtml”
- EmployeeList.cshtm
@page "{departmentId:int}"
@using Microsoft.AspNetCore.Mvc.RazorPages
@using Three.Services
@using Three.Models
@model EmployeeListMode
<div class="row">
<div class="col-md-10 offset-md-2">
<table class="table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>IsFire</th>
<th>操作</th>
</tr>
@Html.DisplayFor(p => p.Employees)
</table>
<a asp-page="AddEmployee" asp-route-departmentId="@ViewData["DepartmentId"]">Add</a>
</div>
</div>
@functions{
public class EmployeeListMode : PageModel
{
private readonly IEmployeesService _employeesService;
public IEnumerable<Employee> Employees { get; set; }
public EmployeeListMode(IEmployeesService employeesService)
{
_employeesService = employeesService;
}
public async Task OnGetAsync(int departmentId)
{
Employees = await _employeesService.GetByDepartmentId(departmentId);
ViewData["DepartmentId"] = departmentId;
}
public async Task<IActionResult> OnGetFireAsync(int employeeId, int departmentId)
{
await _employeesService.Frie(employeeId);
//int dpId = Convert.ToInt32( ViewData["DepartmentId"]);
//return RedirectToPage("EmployeeList", new { dpId });
return RedirectToPage("EmployeeList", new { departmentId });
}
}
}
要点
带参数的Page
@page "{departmentId:int}"
@functions 和 PageModel
在Page中定义PageModel,使用
@functions{
public class EmployeeListMode : PageModel
{
...
}
...
@model EmployeeListMode
...
@Html.DisplayFor(p => p.Employees)
...
@functions{
public class EmployeeListMode : PageModel
{
...
public IEnumerable<Employee> Employees { get; set; }
public async Task OnGetAsync(int departmentId)
{
Employees = await _employeesService.GetByDepartmentId(departmentId);
...
}
}
}
OnGetAsync`获取本页面
public async Task OnGetAsync(int departmentId)
{
Employees = await _employeesService.GetByDepartmentId(departmentId);
ViewData["DepartmentId"] = departmentId;
}
跳转连接添加页面
<a asp-page="AddEmployee" asp-route-departmentId="@ViewData["DepartmentId"]">Add</a>
DisplayTemplates
@Html.DisplayFor使用DisplayTemplates
Pages/DisplayTemplates/Employee.cshtml
@model Three.Models.Employee
<tr>
<td>@Model.FirstName</td>
<td>@Model.LastName</td>
<td>@Model.Gender</td>
<td>@(Model.Fired ? "是": "")</td>
<td>
@if (!Model.Fired)
{
<a asp-page="EmployeeList"
asp-page-handler="Fire"
asp-route-employeeId="@Model.Id"
asp-route-departmentId="@Model.DepartmentId">Fire</a>
}
</td>
</tr>
asp-page-handler
其中 <a ... asp-page-handler="Fire"...>
@functions{
public class EmployeeListMode : PageModel
{
...
public async Task<IActionResult> OnGetFireAsync(int employeeId, int departmentId)
{
await _employeesService.Frie(employeeId);
//int dpId = Convert.ToInt32( ViewData["DepartmentId"]);
//return RedirectToPage("EmployeeList", new { dpId });
return RedirectToPage("EmployeeList", new { departmentId });
}