Ant for Blazor做單個表的增刪查改

Ant for Blazor做單個表的增刪查改

2024年02月27日花了一天時間弄出來了，基本弄好了，vs2022+blazor server+net8,引用的AntDesign版本是0.17.4 代碼裏的model和repository是用自己牛腩代碼生成器生成的東西，sqlsugar的，記得在program裏注入就好

相關代碼：

@page "/Student"
@using System.Text.Json
@inject IMessageService _message
@inject ModalService _modalService
@inject DAL.IRepository<Model.Student,int> _repository;
<div style="padding:10px;">




    <Table TItem="Model.Student" DataSource="@datalist" @bind-PageSize="pageSize">
        <TitleTemplate>
            <GridRow>
                <GridCol Span="16">
                    <Title Level="3">Student</Title>
                </GridCol>
                <GridCol Span="4">
                    <Button Type="primary" Icon="@IconType.Outline.PlusSquare" @onclick="PopAdd">新增</Button>
                </GridCol>
                <GridCol Span="4"> 
                    <Search @bind-Value="searchKey" Placeholder="搜索關鍵字" OnSearch="HandleSearch" />
                </GridCol>
            </GridRow>
        </TitleTemplate>
        <ChildContent>
            <PropertyColumn Title="ID" Property="c=>c.Id">
            </PropertyColumn>
            <PropertyColumn Title="學號" Property="c=>c.StuNo"></PropertyColumn>
            <PropertyColumn Title="姓名" Property="c=>c.StuName">
            </PropertyColumn>
            <PropertyColumn Title="生日" Property="c=>c.Birthday">
            </PropertyColumn>
            <PropertyColumn Title="餘額" Property="c=>c.Balance">
            </PropertyColumn>
            <ActionColumn Title="操作">
                <Space>
                    <SpaceItem>
                        <Button Icon="@IconType.Outline.Edit" @onclick="(()=>Edit(context.Id))">編輯</Button>
                    </SpaceItem>
                    <SpaceItem>

                        <Button Danger Icon="@IconType.Outline.Delete" @onclick="(()=>Delete(context.Id))">刪除</Button>
                     </SpaceItem>
                 </Space>
             </ActionColumn>
         </ChildContent>
         <PaginationTemplate>
             <div style="margin:10px;">
                 <Pagination ShowTotal=showTotal Total="total" PageSize="pageSize" OnChange="HandlePageChange" />
             </div>
         </PaginationTemplate>
     </Table>

     <Modal Title="@popTitle"
            @bind-Visible="@_visible"
            OnOk="@HandleOk">
         <Form Model="@model"
               LabelColSpan="8"
               WrapperColSpan="16">
             <FormItem Label="學號">
                 <Input @bind-Value="@context.StuNo" />
             </FormItem>
             <FormItem Label="姓名">
                 <Input @bind-Value="@context.StuName" />
             </FormItem>
             <FormItem Label="生日">
                 <DatePicker @bind-Value="@context.Birthday" />
             </FormItem>
             <FormItem Label="餘額">
                 <AntDesign.InputNumber @bind-Value="@context.Balance"></AntDesign.InputNumber>
             </FormItem>
         </Form>
     </Modal>
 </div>
 @code {
    Func<PaginationTotalContext, string> showTotal = ctx => $"總共 {ctx.Total} 條數據";
    private List<Model.Student> datalist = new List<Model.Student>();
    private Model.Student model = new Model.Student();
    bool _visible = false;
    private int total = 0;  //總記錄數
    private int pageIndex = 1; //第幾頁
    private int pageSize = 3;  //每頁顯示多少條數據
    private string popTitle = "新增";
    private string searchKey = "";

    //頁面初始化方法
    protected override void OnInitialized()
    {
        base.OnInitialized();
        BindListData();
    }

    //顯示分頁數據
    public void BindListData()
    {
        var q = _repository.GetAll();
        q = q.Where(a => a.StuName.Contains(searchKey));
        total = q.Count();
        datalist = q.OrderByDescending(a=>a.Id).ToPageList(pageIndex, pageSize);
        StateHasChanged();
    }

    //彈出新增的框框
    public void PopAdd()
    {
        popTitle = "新增";
        _visible = true;
        model = new Model.Student();
    }
    //新增,編輯
    private async Task HandleOk(MouseEventArgs e)
    {
        try
        {
            if (string.IsNullOrEmpty(model.StuNo) || string.IsNullOrEmpty(model.StuName))
            {
                throw new Exception("請把學號和姓名填寫完整。");
            }

            Console.WriteLine($"提交的數據:{JsonSerializer.Serialize(model)}");

            if (model.Id == 0)
            { 
                _repository.Insert(model);
                _message.Info("新增成功！");
            }
            else
            { 
                _repository.Update(model);
                _message.Info("編輯成功！");
            }
            _visible = false;
            BindListData();
        }
        catch (Exception ex)
        {
            _visible = true;
            _message.Error("出錯：" + ex.Message);
        }


    }

    //分頁點擊
    public void HandlePageChange(PaginationEventArgs e)
    {
        pageIndex = e.Page;
        BindListData();
    }

    //顯示刪除確認框
    private void Delete(int id)
    {
        _modalService.Confirm(new ConfirmOptions()
            {
                Title = "是否確認刪除?",
                Content = "ID爲【" + id + "】的數據！",
                OnOk = (e) =>
                          {
                              Console.WriteLine("刪除："+id);
                              _repository.Delete(a => a.Id == id);
                              BindListData();
                              
                              _message.Info("刪除成功！");

                              return Task.CompletedTask;
                          },
                OkType = "danger",
            });
    }

    //顯示編輯的框框
    public void Edit(int id)
    {
        popTitle = "編輯";
        model = _repository.FirstOrDefault(a => a.Id == id);
        _visible = true;
    }


    //查詢
    public void HandleSearch()
    {
        pageIndex = 1;
        BindListData(); 
    }

}