學習ASP.NET Core Blazor編程系列十四——修改 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程序（上）

學習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="/[email protected]">編輯</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頁面，我們我們使用鼠標左鍵點擊左邊菜單上的“圖書列表”菜單項，瀏覽器會顯示我們修改過的圖書列表頁面。如下圖。

     4.在瀏覽器的圖書列表頁面，將鼠標指針懸停在“編輯”按鈕上以查看，鏈接背後的URL值。使用鼠標左鍵點擊我們要修改的圖書信息的“編輯”按鈕，瀏覽器會自動跳轉到AddBook頁面，並將我們需要修改的圖書信息顯示出來。如下圖。

    5.在AddBook頁面中的“類型”與“已租數量”中分別填入“A”與“2”，然後使用鼠標點擊“保存”按鈕。如下圖。