(ASP.NET Razor) Giới thiệu Razor Page và Route trong Razor Page

• Giới thiệu Razor Page và tạo dự án Website
• Routing đến trang Razor Page
• Đổi thư mục gốc chứa Razor Page (.cshtml)
• Routing với dữ liệu đến Razor Page
• Rewrite với Url đến Razor Page
• Biên dịch Razor (.cshtml) ở thời điểm thực thi

Giới thiệu Razor Page và tạo dự án Website dùng Razor Page

Razor Page là một phần của ASP.NET, nó cho phép bạn bạn viết code C# trong một văn bản HTML (nói cách khác bạn có thể trộn giữa HTML và code C# trong một file). Các file này có phần mở rộng .cshtml. Ứng dụng dùng Razor Page giúp bạn tập trung vào code tạo trang, phát triển nhanh và dễ dàng hơn mô mình MVC. Hãy cố gắng sử dụng thành thạo Razor Page, nó làm cơ sở để phát triển mô hình lập trình phức tạp hơn là MVC ở các phần sau.

Tạo dự án đầu tiên kích hoạt Razor Page ASP.NET Core

Tạo thư mục razor01.basic và thực hiện lệnh:

dotnet new webapp

Sau lệnh này nó khởi tạo một ứng dụng Web Asp.net đã kích hoạt Razor Page. Cấu trúc thư mục so với các ứng dụng ASP.NET Core đã thực hành ở phần trước nó có thêm thư mục Pages trong đó là các file .cshtml (Razor Page). Thư mục wwwroot thì nó có sẵn CSS BootStrap, JS JQuery.

Tương tự các phần trước, bạn chạy thử bằng cách gõ lệnh:

dotnet run

Truy cập địa chỉ https://localhost:5001

Kích hoạt SSL (truy cập với https) ở môi trường phát triển

Thực hiện lệnh sau:

dotnet dev-certs https --clean
dotnet dev-certs https --trust

Dự án này đã kích hoạt Razor page với sự thay đổi với các bài thực hành trước gồm (trong lớp Startup).

public void ConfigureServices(IServiceCollection services)
{
    // Thêm các dịch vụ liên quan đến Razor Page
    services.AddRazorPages();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }
    // Chuyển hướng https
    app.UseHttpsRedirection();
    // Kích hoạt truy cập file tĩnh (file trong wwwroot)
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        // Thêm endpoint chuyển đến các trang Razor Page
        // trong thư mục Pages
        endpoints.MapRazorPages();
    });
}

Routing đến trang Razor Page trong thư mục Pages và Area

Khi sử dụng đoạn code tạo endpoint cho middleware EndpointRoutingMiddleware

endpoints.MapRazorPages();

Thì các Url phù hợp sẽ được phục vụ và trả về bởi trang Razor tương ứng lưu trong Pages. Khi truy cập địa chỉ URL / hoặc /index thì gọi tới /Pages/Index.cshtml, URL là /Privacy thì gọi tới /Pages/Privacy.cshtml ... Khi URL là /abc/xyz/1 thì tương ứng gọi tới file /Page/abc/xyz/1.cshtml

Một tùy chọn nữa bạn có thể để các file .cshtml trong thức mục có tên Areas, ví dụ tạo ra cấu trúc thư mục và các file như sau:

Areas
  Admin
    Pages
        Index.cshtml
        EditPost.cshtml
  Product
    Pages
        Index.html
        Detail.html

Nhớ là các file .cshtml đặt trong thư mục Pages, với cấu trúc tên bạn có thể truy cập với các địa chỉ như:

• /Admin
• /Admin/Index
• /Admin/EditPost
• /Product/
• /Product/Index
• /Product/Detail

Đổi thư mục chứa Razor Page (.cshtml)

Mặc định thì thư mục gốc lưu trữ Razor Page là /Pages, tuy nhiên bạn có thể sửa đổi để thay thư mục này.

// Thêm các dịch vụ liên quan đến Razor Page, đổi thư mục lưu trữ thành /Contents
services.AddRazorPages().WithRazorPagesRoot("/Contents");

Hoặc thiết lập trong AddRazorPagesOptions:

services.AddRazorPages().AddRazorPagesOptions(options => {
    options.RootDirectory = "/Contents";
});

Routing dữ liệu đến Razor Page (.cshtml)

Xem lại ví dụ trên, bạn có Razor Page Detail.cshtml, truy cập bởi URL /product/detail để hiện thị một sản phẩm nào đó, ví dụ dữ liệu là theo tên sản phảm, thì bạn có thể sử dụng query để truy cập, ví dụ: /product/detail?name=ten-san-pham

Lúc này ở Razor Page sẽ đọc được giá trị trong query gửi đến, biết được tên sản phẩm, qua đó hiện thị tên sản phẩm.

Nhưng bạn muốn hiện thị URL một cách thân thiện hơn, ví dụ như /product/detail/ten-san-pham, thì sẽ thiết lập như sau:

Mở file Detail.cshtml, chỉ thị đầu tiên @page sửa thành:

@page "{name?}"
@{
    @*  Đọc name trực tiếp từ Razor @
    String name = this.Request.RouteValues["name"] as String;
    ViewData["Title"] = name;
}
<h1>@ViewData["Title"]</h1>

    /.. thành phần khác

"{name?}" gọi là Route Template, nó hoàn toàn giống với cách sử dụng đã trình bày tại: EndpointMiddleware, bạn có thể áp dụng để xây dựng route phức tạp với giá trị mặc định, dàng buộc ...

Rewrite URL đến Razor Page (.cshtml)

Để thiết lập Route mềm dẻo hơn, tạo Url thân thiện ví dụ: thay vì phải truy cập đến /product/detail/ten-san-pham bạn có thể thiết lập là truy cập /sanpham/ten-san-pham.html tức có thể thay thế, loại bỏ thư mục chứa Razor, tên file Razor trong URL. Để làm điều này, thiết lập trong lớp Startup, thiết lập sau khi thêm dịch vụ AddRazorPages

services.AddRazorPages().
         AddRazorPagesOptions(options => {

             // Thêm Page Route (Rewrite) cho thư mục gốc
             // Truy cập /chinh-sach.html  là truy cập /Privacy
             options.Conventions.AddPageRoute(
                 "/Privacy",
                 "/chinh-sach.html"
             );

             // Thêm Page Route cho trang trong Areas
             // Truy cập /sanpham/ten-san-pham = /Product/Detail/ten-san-pưham
             options.Conventions.AddAreaPageRoute(
                 areaName : "Product",
                 pageName : "/Detail",
                 route : "/sanpham/{nameproduct?}"
                 );
         });

Trong ConfigureServices bạn còn có thể thiết lập chung có các Route bằng cách truy cập cấu hình RouteOptions (Xem thêm về Cấu hình ứng dụng Wep Asp.net)

services.Configure<RouteOptions> (options => {
    options.LowercaseUrls = true;               // Url viết chữ thường
    options.LowercaseQueryStrings = true;       // Query trong Url viết chữ thường
});

Tham khảo mã nguồn ASP_NET_CORE/razor01.basic/ hoặc tải về ex055

Biên dịch Razor (.cshtml) ở thời điểm thực thi

Các Razor Page (.cshtml) sử dụng trong ứng dụng mặc định nó được biên dịch và đóng gói vào ứng dụng ở thời điểm biên dịch (build, publish). Có một tùy chọn, khi ứng dụng đã biên dịch, chạy ... bạn có thể sửa đổi file .cshtml và ứng dụng sẽ sử dụng file sửa đổi này - có nghĩa là biên dịch ở thời điểm thực thi (runtime).

Nếu bạn tạo dự án mới có tham số dòng lệnh --razor-runtime-compilation thì tính năng này sẽ kích hoạt

dotnet new webapp --razor-runtime-compilation

Trong trường hợp dự án đã có, muốn kích hoạt thì thực hiện các bước sau:

Cài gói RuntimeCompilation

dotnet add package Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation

Mở file Startup ra, chỉnh sử mã nguồn để kích hoạt tính năng sử dụng .cshtml ở thời điểm thực thi

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

"editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
},