学习ASP.NET Core Blazor编程系列五——列表页面

上一篇文章中我们已经创建了书籍租赁管理系统中所需要的图书信息表，本文介绍一下如何在blazor中呈现图书信息列表。

1. 在Visual Studio 2022的解决方案资源管理器中，鼠标右键单击“Pages”文件夹。在弹出菜单中选择，添加-->Razor组件。如下图。

2.在弹出对话框，名称中输入BookIndex.razor。如下图。

3. 在Visual Studio 2022的解决方案资源管理器中，鼠标左键双击“Pages\BookIndex.razor”文件，在文本编辑器中打开，在文件的顶部添加@page指令。代码如下。

@page "/BookIndex"
 
<PageTitle>图书列表PageTitle>

<h3>图书列表h3>

@code {
 
}

4. 在Visual Studio 2022的解决方案资源管理器中，鼠标左键双击“Shared\NavMenu.razor”文件，在文本编辑器中打开，我们在此文中添加指向BookIndex的菜单。具体代码如下：

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorAppDemoa>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">

            <span class="navbar-toggler-icon">span>
        button>
    div>
div>
 
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true">span> Home
            NavLink>
        div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true">span> Counter
            NavLink>
        div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true">span> Fetch data
            NavLink>
        div>
        <div class="nav-item px-3">

            <NavLink class="nav-link" href="BookIndex">

                <span class="oi oi-list-rich" aria-hidden="true">span> 图书列表
            NavLink>
        div>
    nav>
div>

 
@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {

        collapseNavMenu = !collapseNavMenu;

    }
}

4. 在Visual Studio 2022的菜单栏上，找到“生成à生成解决方案”，通过Vs2022的生成操作，测试我们写的代码有没有问题。

5.在Visual Studio 2022 的文本编辑器中打开“Pages\BookIndex.razor”文件，输入以下代码。如下图。

@page "/BookIndex"
@using BlazorAppDemo.Models
 
<PageTitle>图书列表PageTitle>
 
<h3>图书列表h3>
 
<table class="table-responsive" width="90%">
    <tr><td>Nametd>
    <td>Authortd>
    <td>Pricetd>
    <td>ReleaseDatetd>
    <td>StockQtytd>
    <td>Qtytd>
 
 
    tr>

    @foreach (var item in books)
    {
        <tr> 
        <td>@item.Nametd>
        <td>@item.Authortd>
        <td>@item.Pricetd>
        <td>@item.ReleaseDatetd>
        <td>@item.StockQtytd>
        <td>@item.Qtytd>
        tr>

    }
table>


@code {
    private List<Book> books = new List<Book>();

}

6. 在Visual Studio 2022的菜单栏上，找到“调试à开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，我们使用鼠标点击左边的菜单栏上的“图书列表”菜单项，页面会进入“BookIndex”页面，我们会看到我们写的图书列表页面，如下图。

相关阅读:
高性能云原生数据对象存储MinIO实战-中
开源的网站数据分析统计平台——Matomo
电脑重装系统后Win11安全中心无法打开如何解决
Vue使用基本教程（基本介绍及对比，初步使用，构建项目，编辑器等）
LeetCode13——罗马数字转整数
分布式调度器xxl-job
mysql与oracle的区别
curl测试api接口状态
Python函数（一）
10_Linux基础-SHELL入门1

原文地址：https://www.cnblogs.com/chillsrc/p/16750400.html