feat(Table): Support 查詢結果Dto，新增Dto 及 更新 Dto

[rainmakerho]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

Table 可設定 TItem ，目前為 查詢結果Dto ，
如果 新增、更新有各別的 Dto 時，
不知如何設定呢?

Describe the solution you'd like

建議擴充可設定 查詢結果Dto，新增Dto 及 更新 Dto。

<Table TItem="BookDto" CreItem="CreateBookDto" UpdItem="UpdateBookDto" 
OnQueryAsync="@OnQueryAsync"
       IsStriped="true" IsBordered="true" IsPagination="true"
       ClickToSelect="true" ShowToolbar="true" ShowEditButton="true"
       OnEditAsync="@OpenEditModalAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.Name" Text="@L["Name"]" />
        <TableColumn @bind-Field="@context.Type" Text="@L["Type"]">
            <Template Context="value">
                @L[$"Enum:BookType.{(int)value.Value}"]

            </Template>
        </TableColumn>
        <TableColumn @bind-Field="@context.Price" Text="@L["Price"]" />
        <TableColumn @bind-Field="@context.PublishDate" Text="@L["PublishDate"]" />
        <TableColumn @bind-Field="@context.LastModificationTime" Text="@L["LastModificationTime"]" />
    </TableColumns>
</Table>

Additional context

No response

[bb-auto[bot]]

@rainmakerho Thank you for contacting us. We will give feedback later.

[rainmakerho]

這個跟需求比較有關系，例如，
員工這個 Table 會有 Id, EmpNo, EmpName, BirthDay, Gender, JobTitle, Salary ...
查詢出來的資料有可能只會有 Id, EmpNo, EmpName, JobTitle 欄位
而按下編輯時，卻會是 Id, EmpNo, EmpName, BirthDay, Gender, JobTitle, Salary ... 這些欄位

[rainmakerho]

我用 Employee 這個建立一個範例，

Employee.razor.cs 包含 AppService, Dto class

public partial class Employee
{
    protected Table<EmployeeQueryDto> DataGrid { get; set; }

    protected async Task<QueryData<EmployeeQueryDto>> OnQueryAsync(QueryPageOptions options)
    {
        var appService = new EmployeeAppService();
        var employeeList = await appService.GetEmployeesAsync();
        var totalCount = employeeList.Count;

        return new QueryData<EmployeeQueryDto>()
        {
            Items = employeeList,
            TotalCount = totalCount,
            IsFiltered = false,
            IsSearch = true
        };
    }

    public class EmployeeDto
    {
        public int Id { get; set; }
        public string EmpNo { get; set; } = "";
        public string EmpName { get; set; } = "";
        public string JobTitle { get; set; } = "";
        public DateTime BirthDay { get; set; }
        public decimal Salary { get; set; }
    }

    public class EmployeeQueryDto
    {
        public int Id { get; set; }
        public string EmpNo { get; set; } = "";
        public string EmpName { get; set; } = "";
        public string JobTitle { get; set; } = "";
    }

    public class UpdateEmployeeDto
    {
        public int Id { get; set; }

        [Required]
        public string EmpNo { get; set; } = "";

        [Required]
        [MaxLength(64)]
        public string EmpName { get; set; } = "";

        [Required]
        [MaxLength(64)]
        public string JobTitle { get; set; } = "";

        [Required]
        public DateTime BirthDay { get; set; }

        [Required]
        public decimal Salary { get; set; }
    }

    public class EmployeeAppService
    {
        public List<EmployeeDto> EmployeeList { get; set; } = new List<EmployeeDto> { 
            new EmployeeDto { Id = 1, EmpNo = "001", EmpName = "张三", JobTitle = "工程师", BirthDay = new DateTime(1990, 1, 1), Salary = 10000 },
            new EmployeeDto { Id = 2, EmpNo = "002", EmpName = "李四", JobTitle = "工程师", BirthDay = new DateTime(1991, 2, 2), Salary = 20000 },
        };

        public Task<List<EmployeeQueryDto>> GetEmployeesAsync()
        {
            return Task.FromResult(EmployeeList.Select(e => new EmployeeQueryDto
            {
                Id = e.Id,
                EmpNo = e.EmpNo,
                EmpName = e.EmpName,
                JobTitle = e.JobTitle
            }).ToList());
        }

        public Task<EmployeeDto> GetEmployeeAsync(int id)
        {
            return Task.FromResult(EmployeeList.FirstOrDefault(e => e.Id == id));
        }

        public async Task UpdateBookAsync(UpdateEmployeeDto input)
        {
            var employee = await GetEmployeeAsync(input.Id);
            if (employee == null)
            {
                throw new Exception("Employee not found");
            }
            employee.EmpNo = input.EmpNo;
            employee.EmpName = input.EmpName;
            employee.BirthDay = input.BirthDay;
            employee.JobTitle = input.JobTitle;
            employee.Salary = input.Salary;
            //call update EmployeeList
        }
    }
}

Employee.razor

@page "/employee"

<h3>Employee</h3>


<Table @ref="DataGrid" TItem="EmployeeQueryDto"
       OnQueryAsync="@OnQueryAsync" ShowEmpty="true"
       IsStriped="true" IsBordered="true" IsPagination="true"
       ClickToSelect="true" ShowToolbar="true" ShowEditButton="true"
       ShowSkeleton="true" AutoGenerateColumns="true">
</Table>

所以當我按下 Table 中的 Edit ，它只會顯示 EmployeeQueryDto 的內容，
我想要的是可以操作 UpdateEmployeeDto，如下圖，

[ArgoZhang]

为什么就是不给一个工程呢？我们免费帮你解决问题，你就非要我们创建项目，然后 cv 你的代码自己做一个工程复现你的问题吗？能不能换位思考一下问题，帮我们节约一些时间？

[rainmakerho]

Sorry，現在才了解"工程"的意思。

透過 VS 2022 BootStrapBlazor Template 建立 Blazor Server ，
同時再建立一個 Employee Page , 方案原始碼如附件，請參考，
BootstrapBlazor.OnlyServer1.zip
測試網頁為: http://localhost:5200/employee

視頻說明檔案，
https://1drv.ms/v/s!Amctqf6I8YYKmO5ajiX7FVP82i1UVQ?e=wwVAiH

[ArgoZhang]

感谢感谢。这样有了工程有了视频，我们就非常清楚你的需求了。对我们帮助非常大