【ASP.NET Core學習】Razor頁面

<style>.cnblogs_code { width: auto; border-radius: 4px; box-shadow: 3px 2px 7px rgba(189, 183, 183, 1) } .ws-title { background-color: rgba(40, 120, 156, 1); font-size: 25px; font-family: "微軟雅黑"; padding: 8px 24px; border-radius: 4px; text-align: left; box-shadow: 1px 4px 5px 1px rgba(136, 136, 136, 1); color: rgba(255, 255, 255, 1); clear: both } .ws-content { margin-left: 20px; margin-top: 12px }</style>

 這里介紹了Razor基本用法

1. 創建帶PageModel的Razor 頁面
2. 使用資料庫
3. 展示資料
4. 更新資料
5. 篩選器

準備作業

1. 初始化空的專案（終端輸入：dotnet new web -n=Razor)
2. Nuget添加Microsoft.EntityFrameworkCore.SqlServer 和 Microsoft.EntityFrameworkCore.Design　            
3. 添加必要服務

　　 ConfigureServices添加Razor支持

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
}

　　修改app.UseEndpoints為

app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
});

 

添加資料庫

 1. 添加模型

[Table("Book")]
public class Book
{
    [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int Id { get; set; }

    [Display(Name = "書名")]
    [Required(ErrorMessage = "書名不能為空")]
    [StringLength(50, ErrorMessage = "書名最大長度為50")]
    public string Name { get; set; }

    [Display(Name = "單價")]
    [Column(TypeName = "decimal(18, 2)")]
    [Range(0.01, 10000, ErrorMessage = "單價范圍只能在（0.01 ~ 10000）"), DataType(DataType.Currency)]
    public decimal UnitPrice { get; set; }

    [Display(Name = "出版日期")]
    [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}")]
    public DateTime PublicationDate { get; set; }

    [Display(Name = "創建時間")]
    [DataType(DataType.DateTime), DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm:ss}")]
    public DateTime CreateTime { get; set; }

    [Display(Name = "最后更新時間")]
    [DataType(DataType.DateTime), DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm:ss}")]
    public DateTime? LastUpdateTime { get; set; }
}

View Code

 2. 添加DbContext

public class RazorDbContext : DbContext
{
    public RazorDbContext(DbContextOptions<RazorDbContext> options)
        : base(options)
    {
        
    }

    public DbSet<Razor.Models.Book> Book { get; set; }
}

View Code

3. 安裝dotnet-ef（全域安裝），終端輸入

dotnet tool install --global dotnet-ef

4. 添加遷移

dotnet ef migrations add InitialDb

 5. 更新到資料庫

dotnet ef database update InitialDb

 6. 添加種子資料

public static class SeedData
{
    public static void Initialize(IServiceProvider serviceProvider)
    {
        var options = serviceProvider.GetRequiredService<DbContextOptions<RazorDbContext>>();
        using (var context = new RazorDbContext(options))
        {
            if (context.Book.Any())
            {
                return;
            }

            context.Book.AddRange(
                new Models.Book
                {
                    Name = "演算法之美",
                    UnitPrice = 26.99m,
                    PublicationDate = DateTime.Parse("2016-08-20"),
                    CreateTime = DateTime.Now
                },
                new Models.Book
                {
                    Name = "大話設計模式",
                    UnitPrice = 28.03m,
                    PublicationDate = DateTime.Parse("2015-06-12"),
                    CreateTime = DateTime.Now
                },
                new Models.Book
                {
                    Name = "幸福的陷阱",
                    UnitPrice = 30.59m,
                    PublicationDate = DateTime.Parse("2018-09-13"),
                    CreateTime = DateTime.Now
                },
                new Models.Book
                {
                    Name = "墨菲定律",
                    UnitPrice = 32.12m,
                    PublicationDate = DateTime.Parse("2018-09-13"),
                    CreateTime = DateTime.Now
                }
            );

            context.SaveChanges();
        }
    }
}

View Code

 

經過上面的步驟就可以在程式中使用資料庫

 

Razor頁面

一、路由 @page指令

1. 必須是頁面上的第一個 Razor 指令
2. 默認情況，Url根據檔案夾層次結構生成，也可以在@page 后面指定路由
3. 可以對引數約束，例如：{id:int}

二、讀取資料（以上面模型為例）

　　1. 創建Index頁面

dotnet new page -o=Pages -na="Razor.Pages" -n="Index"

　　2. PageModel 的OnGet讀取資料

public class IndexModel : PageModel
{
    private readonly Data.RazorDbContext _dbContext;
    public IndexModel(Data.RazorDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public List<Models.Book> Books { get; set; }

    public IActionResult OnGet()
    {
        if (_dbContext == null)
        {
            return NotFound();
        }

        Books = _dbContext.Book
                            .AsNoTracking()
                            .ToList();
        return Page();
    }
}

View Code

　　3. 頁面展示資料

@page  
@model IndexModel
@{
    ViewData["Title"] = "圖書管理";
}
<table class="table table-bordered text-center">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Books[0].Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Books[0].UnitPrice)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Books[0].PublicationDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Books[0].CreateTime)
            </th>
            <th >
                @Html.DisplayNameFor(model => model.Books[0].LastUpdateTime)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Books)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.UnitPrice)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PublicationDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CreateTime)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.LastUpdateTime)
                </td>
                <td>
                    <a asp-page="./Edit" asp-route-id="@item.Id">編輯</a> |
                    <a asp-page="./Delete" asp-route-id="@item.Id">洗掉</a>
                </td>
            </tr>
        }
    </tbody>
</table>

View Code

 

三、更新資料

　　1. 創建Edit頁面

dotnet new page -o=Pages -na="Razor.Pages" -n="Edit"

　　2. PageModel拉去資料

public IActionResult OnGet(int? id)
{
    if (id == null)
    {
        return NotFound();
    }

    Book = _dbContext.Book  
                     .AsNoTracking()
                     .FirstOrDefault(m => m.Id == id);

    if(Book == null)
    {
        return NotFound();
    }

    return Page();
}

View Code

　　3. 編輯Edit頁面

@page "{id:int}"
@model Razor.Pages.EditModel
@{
    ViewData["Title"] = "編輯書本";
}
<div class="row">
    <div class="col-md-4">
        <form method="post">            
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="Book.Id" />            
            <div class="form-group">
                <label asp-for="Book.Name" class="control-label"></label>
                <input asp-for="Book.Name" class="form-control" />
                <span asp-validation-for="Book.Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Book.UnitPrice" class="control-label"></label>
                <input asp-for="Book.UnitPrice" class="form-control" />
                <span asp-validation-for="Book.UnitPrice" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Book.PublicationDate" class="control-label"></label>
                <input asp-for="Book.PublicationDate" class="form-control" />
                <span asp-validation-for="Book.PublicationDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="保存" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

View Code

　　4. OnPost處理請求

public IActionResult OnPost()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }

    var model = _dbContext.Book.FirstOrDefault(m => m.Id == Book.Id);

    if (model == null)
    {
        return NotFound();
    }

    model.Name = Book.Name;
    model.PublicationDate = Book.PublicationDate;
    model.UnitPrice = Book.UnitPrice;

    _dbContext.SaveChanges();

    return RedirectToPage("Index");
}

View Code

用asp-for生成的輸入框，會加上客戶端驗證，查看原代碼可以發現

<input class="form-control" type="text" data-val="true" data-val-length="&#x4E66;&#x540D;&#x6700;&#x5927;&#x957F;&#x5EA6;&#x4E3A;50" data-val-length-max="50" data-val-required="&#x4E66;&#x540D;&#x4E0D;&#x80FD;&#x4E3A;&#x7A7A;" id="Book_Name" maxlength="50" name="Book.Name" value="&#x5927;&#x8BDD;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;" />

它是根據模型定義的驗證，生成屬性，然后用jquery-validation驗證，這樣我們沒有寫一行前端代碼就能達到客戶端驗證效果，微軟真的把DRY做到極致，當然后端的驗證也是不能漏的

 

篩選器

Razor 頁面篩選器提供的以下方法可在全域或頁面級應用：

同步方法：

• OnPageHandlerSelected：在選擇處理程式方法后但在模型系結發生前呼叫，
• OnPageHandlerExecuting：在執行處理器方法前，模型系結完成后呼叫，
• OnPageHandlerExecuted：在執行處理器方法后，生成操作結果前呼叫，

異步方法：

• OnPageHandlerSelectionAsync：在選擇處理程式方法后，但在模型系結發生前，進行異步呼叫，
• OnPageHandlerExecutionAsync：在呼叫處理程式方法前，但在模型系結結束后，進行異步呼叫，

一、全域篩選器 　　1. 創建GlobalPageFilter類，實作IPageFilter介面

public class GlobalPageFilter : IPageFilter
{
    private readonly ILogger _logger;

    public GlobalPageFilter(ILogger logger)
    {
        _logger = logger;
    }

    public void OnPageHandlerExecuted(PageHandlerExecutedContext context)
    {
        _logger.LogDebug("Global Filter OnPageHandlerSelected called.");
    }

    public void OnPageHandlerExecuting(PageHandlerExecutingContext context)
    {
        _logger.LogDebug("Global Filter OnPageHandlerExecuting called.");
    }

    public void OnPageHandlerSelected(PageHandlerSelectedContext context)
    {
        _logger.LogDebug("Global Filter OnPageHandlerSelected called.");
    }
}

View Code

 　　2. 創建過濾器工廠類，實作IFilterFactory介面

public class GlobalPagerFilterWithFactory : IFilterFactory
{
    public bool IsReusable => false;

    public IFilterMetadata CreateInstance(IServiceProvider serviceProvider)
    {
        var logger = serviceProvider.GetService<ILogger<Filters.GlobalPageFilter>>();

        return new Filters.GlobalPageFilter(logger);
    }
}

View Code

　　3. ConfigureServices添加RazorPage選項

services.AddRazorPages()
        .AddRazorPagesOptions(options =>
        {
            options.Conventions.ConfigureFilter(new Factories.GlobalPagerFilterWithFactory());
        });

 

二、特定PageModel篩選器

　　在PageModel里面多載

public override void OnPageHandlerSelected(Microsoft.AspNetCore.Mvc.Filters.PageHandlerSelectedContext context)
{
    _logger.LogDebug("OnPageHandlerSelected");
}
//在執行處理器方法前，模型系結完成后呼叫
public override void OnPageHandlerExecuting(Microsoft.AspNetCore.Mvc.Filters.PageHandlerExecutingContext context)
{
    _logger.LogDebug("OnPageHandlerExecuting");
}
//在執行處理器方法后，生成操作結果前呼叫
public override void OnPageHandlerExecuted(Microsoft.AspNetCore.Mvc.Filters.PageHandlerExecutedContext context)
{
    _logger.LogDebug("OnPageHandlerExecuted");
}

View Code

 

示例代碼：https://github.com/WilsonPan/AspNetCoreExamples/tree/master/Razor

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/98042.html

標籤：.NET Core

上一篇：優化 .net core 應用的 dockerfile

下一篇：.Net Core實作健康檢查