学习ASP.NET Core Blazor编程系列十四——修改

科技网编 2023-03-18 12:16 199 0

学习ASP.NET Core Blazor编程系列一——综述

学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（上）
学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（完）学习ASP.NET Core Blazor编程系列三——实体学习ASP.NET Core Blazor编程系列四——迁移学习ASP.NET Core Blazor编程系列五——列表页面学习ASP.NET Core Blazor编程系列七——新增图书学习ASP.NET Core Blazor编程系列八——数据校验学习ASP.NET Core Blazor编程系列十——路由（上）学习ASP.NET Core Blazor编程系列十二——路由（下）学习ASP.NET Core Blazor编程系列十三——路由（完）

通过前面几篇文章的学习，我们的图书修改页面已经能正常运行了，但现在的呈现效果不是很理想，主要标题显示的是英文。我们不想看到的时间（如下图所示0:00:00），并且希望把“ReleaseDate”修改成“出版日期”。现在的程序运行效果如下图。

本文所实现的图书信息修改功能，在前面的路由篇中已经实现了，本文只是将其拿出来，单独讲解一下。

1. 我们在Visual Studio 2022的解决方案资源管理器中打开Pages/BookIndex.razor文件，修改代码如下：

@page "/BookIndex"

@using BlazorAppDemo.Models

@using Microsoft.EntityFrameworkCore



@inject IDbContextFactory<BookContext> dbFactory

@inject NavigationManager NavigationManager



<PageTitle>图书列表</PageTitle>

<h3>图书列表</h3>

<table class="table-responsive" width="90%">

    <tr><td>书名</td>

    <td>作者</td>

    <td>价格</td>

    <td>出版日期</td>

   <td>库存数量</td>

    <td>已租数量</td>

    <td>操作</td>



    </tr>

    @foreach (var item in books)

    {

        <tr>

        <td>@item.Name</td>

        <td>@item.Author</td>

        <td>@item.Price</td>

        <td>@item.ReleaseDate.ToShortDateString()</td>

        <td>@item.StockQty</td>

        <td>@item.Qty</td>

            <td><a href="/AddBook?Id=@item.ID">编辑</a>

                <button id="edit" class="btn btn-primary" @onclick="@(e => EditBook(e, @item.ID))">修改</button>

            </td>

    </tr>

    }

</table>



@code {

    private   static BookContext _context;

    private List<Book> books = new List<Book>();

    protected override async Task OnInitializedAsync()

    {

        _context = dbFactory.CreateDbContext();

        books=_context.Book.ToList();

        await base.OnInitializedAsync();

    }

    public void EditBook(MouseEventArgs e ,int Id)

    {

        NavigationManager.NavigateTo("/AddBook?Id="+Id.ToString());

    }

}

2.在Visual Studio 2022的解决方案资源管理器中，找到 AddBook.razor 组件，使用鼠标左键双击，在文本编辑器中打开。修改代码如下：

@page "/AddBook"

@using BlazorAppDemo.Models

@using Microsoft.EntityFrameworkCore

@inject IDbContextFactory<BookContext> dbFactory

@inject NavigationManager NavigationManager



<h3>AddBook</h3>

<EditForm Model=@addBook OnValidSubmit=@ValidSubmitInfo  OnInvalidSubmit=@InvalidSubmitInfo>

    <DataAnnotationsValidator />

   <ValidationSummary />



    <div>@Message</div>

    <p> 图书名称：

    <InputText @bind-Value=addBook.Name></InputText>

        <ValidationMessage For="@(() => addBook.Name)" />

    </p>

    <p>作者：

    <InputText @bind-Value=addBook.Author></InputText>

        <ValidationMessage For="@(() => addBook.Author)" />

    </p>



    <p>出版日期：

    <InputDate @bind-Value=addBook.ReleaseDate></InputDate>

     </p>

    <p>价格：

    <InputNumber @bind-Value=addBook.Price></InputNumber>

     </p>

    <p>类型：

     <InputText @bind-Value=addBook.Type></InputText>

        <ValidationMessage For="@(() => addBook.Type)" />

      </p>

    <p>总页数：

    <InputNumber @bind-Value=addBook.TotalPages></InputNumber>

     </p>

    <p>库存数量：

    <InputNumber @bind-Value=addBook.StockQty></InputNumber>

        <ValidationMessage For="@(() => addBook.StockQty)" />

     </p>

    <p>已租数量：

    <InputNumber @bind-Value=addBook.Qty></InputNumber>

    </p>

    <input type="submit" class="btn btn-primary" value="Save" />

</EditForm>

@code {

    private string Message = string.Empty;

    private static BookContext _context;

    private Models.Book addBook = new Book();

    protected override Task OnInitializedAsync()

    {

        _context = dbFactory.CreateDbContext();

        return base.OnInitializedAsync();

    }



    public string Id { get; set; }



    protected override void OnParametersSet()

   {

        var query = new Uri(NavigationManager.Uri).Query;

        var queryDic = Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(query);



        if (queryDic.Count > 0)

        {

            Id = queryDic["Id"].ToString() ?? "0";

            if (!string.IsNullOrEmpty(Id))

            {

                if (Id != "0")

                {

                    int iId = int.Parse(Id);

                    var book = _context.Book.Find(iId);

                    if (book != null)

                    {

                        addBook = book;

                    }

                }



            }

        }

    }





    private void ValidSubmitInfo(EditContext editContext)

    {



        if (editContext.Model is not  Book addBook)

        {

            Message = "你编辑的不是图书信息，校验通过。正在保存。";



        }

        Save(editContext);

    }

    private void InvalidSubmitInfo(EditContext editContext)

    {

        if (editContext.Model is not Book addBook)



        {

            Message = "你编辑的图书信息校验不通过，请修改。";

        }



    }



    private void Save(EditContext editContext)

    {

        bool dataIsValid = editContext.Validate();

        if (!dataIsValid)

        {

            Message = "你编辑的图书信息校验不通过，请修改。";

            return;

        }



        if (editContext.Model is not Book addBook)

        {

            Message = "你编辑的不是图书信息。";

            return;

        }

        if (string.IsNullOrEmpty(Id) || Id == "0" )

        {

            _context.Add(editContext.Model);

        }

        int cnt=  _context.SaveChanges();

        if (cnt>0)

        {

        Message = "图书信息保存成功！";

        }else

       {

            Message = "图书信息保存失败！";



       }



    }

}

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

学习ASP.NET Core Blazor编程系列十四——修改