Razor Pages

Razor Pages 是基于頁(yè)面的 ASP.NET Core Web App 架構(gòu)。
相比 MVC 模式，Razor Pages的生產(chǎn)效率更快。
Razer Pages 需要兩個(gè)中間件：

• builder…Services.AddRazorPages 添加 Razor Pages services
• app.MapRazorPages 添加 Razor Pages endpoints

.cshtml 與 .cshtml.cs

在最簡(jiǎn)單的頁(yè)面中：

@page
<h1>Hello, world!</h1>
<h2>The time on the server is @DateTime.Now</h2>

看起來(lái)與 MVC 的頁(yè)面差不多，但特別之處是有一個(gè) @page 指令，@page 指令意味著這個(gè)頁(yè)面可以直接接收 http request，而不需要通過(guò) controller。

第2個(gè)頁(yè)面Pages/Index2.cshtml 的代碼是這樣的：

@page
@using RazorPagesIntro.Pages
@model Index2Model

<h2>Separate page model</h2>
<p>
    @Model.Message
</p>

使用了 @using RazorPagesIntro.Pages 指令，
而RazorPagesIntro.Pages的實(shí)現(xiàn)代碼Pages/Index2.cshtml.cs是這樣的：

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
using System;

namespace RazorPagesIntro.Pages
{
    public class Index2Model : PageModel
    {
        public string Message { get; private set; } = "PageModel in C#";
        public void OnGet()
        {
            Message += $" Server time is { DateTime.Now }";
        }
    }
}

一個(gè)Index2.cshtml 頁(yè)面，搭配一個(gè)Index2.cshtml.cs，類似WPF 中的 xaml與 xaml.cs。

URL Path 路由

url 的 Path 與頁(yè)面的 path 相匹配。比如：

• / or /Index 匹配 /Pages/Index.cshtml
• /Contact 匹配 /Pages/Contact.cshtml
• /Store/Contact 匹配 /Pages/Store/Contact.cshtml

一個(gè) Post 例子

有一個(gè)Pages/Customers/Create.cshtml 的 view 頁(yè)面，代碼如下：
@model 指令中的CreateModel 對(duì)應(yīng)一個(gè)名為 Create 的 Model，
而 Form 的 submit 會(huì)發(fā)生 Http Post，

@page
@model RazorPagesContacts.Pages.Customers.CreateModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<p>Enter a customer name:</p>

<form method="post">
    Name:
    <input asp-for="Customer!.Name" />
    <input type="submit" />
</form>

相應(yīng)的Pages/Customers/Create.cshtml.cs 的代碼中的部分如下：
OnPostAsync 處理 cshtml 中的 form submit，
一般還會(huì)有一個(gè)OnGet方法處理Http Get 請(qǐng)求。
RedirectToPage 方法會(huì)重定向到 ./Index 路徑。
[BindProperty] 注解屬性是表示model binding。
Razor Pages 中的BindProperty 一般用于非 GET 的屬性。

[BindProperty]
public Customer? Customer { get; set; }

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }
    if (Customer != null) _context.Customer.Add(Customer);
    return RedirectToPage("./Index");
}

Home Page 的例子

Index.cshtml

@page
@model RazorPagesContacts.Pages.Customers.IndexModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h1>Contacts home page</h1>
<form method="post">
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        @if (Model.Customers != null)
        {
            foreach (var contact in Model.Customers)
            {
                <tr>
                    <td> @contact.Id </td>
                    <td>@contact.Name</td>
                    <td>
                        <!-- <snippet_Edit> -->
                        <a asp-page="./Edit" asp-route-id="@contact.Id">Edit</a> |
                        <!-- </snippet_Edit> -->
                        <!-- <snippet_Delete> -->
                        <button type="submit" asp-page-handler="delete" asp-route-id="@contact.Id">delete</button>
                        <!-- </snippet_Delete> -->
                    </td>
                </tr>
            }
        }
        </tbody>
    </table>
    <a asp-page="Create">Create New</a>
</form>

其中的

<a asp-page="./Edit" asp-route-id="@contact.Id">Edit</a> |

使用asp-route-id 生成指向Edit頁(yè)面的URL，URL 中包含 Contact id，比如：
https://localhost:5001/Edit/1
而delete方法的html

<button type="submit" asp-page-handler="delete" asp-route-id="@contact.Id">delete</button>

由 server 生成后的html是：

<button type="submit" formaction="/Customers?id=1&amp;handler=delete">delete</button>

對(duì)應(yīng)的 Model 的代碼Index.cshtml.cs：

public class IndexModel : PageModel
{
    private readonly Data.CustomerDbContext _context;
    public IndexModel(Data.CustomerDbContext context)
    {
        _context = context;
    }

    public IList<Customer>? Customers { get; set; }

    public async Task OnGetAsync()
    {
        Customers = await _context.Customer.ToListAsync();
    }

    public async Task<IActionResult> OnPostDeleteAsync(int id)
    {
        var contact = await _context.Customer.FindAsync(id);

        if (contact != null)
        {
            _context.Customer.Remove(contact);
            await _context.SaveChangesAsync();
        }

        return RedirectToPage();
    }
}

使用Layouts，Partial，模板和Tag Helpers

待更新文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-701027.html

URL Generation

待更新

ViewData 屬性

待更新

TempData 屬性

待更新

到了這里，關(guān)于ASP.NET Core 中的 Razor Pages的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！