具有主从细节的Blazor Grid [英] Blazor Grid with master-detail

问题描述

我正在Blazor(.net wasm)中为某大学做一些项目，并且有一些页面应该实现学生的主从视图. 对于表格外观和分页，我使用了BlazorGrid，它很棒，但是现在卡住了，因为当单击学生姓名时，我无法在表格中插入新行.有谁知道如何在Blazor中执行此操作或其他分页方法.

I am doing some project for college in Blazor(.net wasm) and have some page that should implement master-detail view of students. For table look and pagination I used BlazorGrid and it was great but now am stuck because i cannot insert new row in table when name of student is clicked. Does anyone have idea how to do this or some other way of doing pagination in Blazor.

BlazorGrid上的链接git https://github.com/AnkitSharma-007/BlazorGrid

Link on BlazorGrid git https://github.com/AnkitSharma-007/BlazorGrid

这是我屏幕的图片，单击名称后，我想显示有关学生的更多详细信息，但是我现在能做的最好的就是将其显示在桌子上(你好，aaaooooo).我想问的是，你好，我点击了学生的名字后，aaaaoooo在该行下 我的应用程序屏幕

and this is pic of my screen, after clicked on name i want to show some more details about student but the best i could do now is to show it right to table (hello, aaaooooo). What i would like is that hello, aaaaoooo is under the row after I clicked name of student screen of my app

推荐答案

1. 要添加新学生，您可以在学生网格上方放置一个按钮控件创建学生.当用户单击此按钮时，将显示一个新视图，其中包含用于收集学生详细信息的控件.单击保存按钮后，应将新的学生记录添加到数据存储中，并导航到学生网格"，显示所有学生，包括添加的学生.
2. 要在学生记录下方显示学生的详细信息，您可以执行以下操作:A.创建一个StudentDetails组件以显示学生的详细信息.该组件可以是模板化组件，其结构类似于StudentGrid.并且应将其放置在GridRow的末尾.现在，当用户单击学生姓名时，所选学生的StudentDetails组件应显示在学生行"下方.有很多方法可以实现这一点.例如，要在StudentDetails中创建Parameter属性，传递所选学生的Student ID，检索学生的详细信息并显示它们，等等，等等.

1. To add a new student you can place a button control Create Student right above the Student Grid. When the use click this button, a new view is displayed with controls to collect student details. When the Save button is clicked the new student record should be added to the data store and a navigation to the Student Grid performed, displaying all students, including the added one.
2. To display a student's details below the student record you may do the following: A. Create a StudentDetails Component for displaying the student's details. This Component can be a Templated Component, similar in structure to the StudentGrid. And it should be placed at the end of the GridRow. Now, when the user clicks a student name, the StudentDetails Component for the selected student should be displayed beneath the Student Row. There are many ways to implement this. For example, to create a Parameter property in the StudentDetails, pass the Student ID of the selected student, retrieve the student's details and display them, etc., etc.

注意:有很多方法可以实现您的需求.有些比较复杂，有些则更少.我认为您应该创建一个State类，其职责应是检索和处理数据以及事件和事件通知，并创建其主要目标应限于表示(UI)的组件.

Note: There are plenty of ways to implement your requirements. Some are sophisticated other are less. In my opinion you should create a State class whose responsibilities should be retrieving and handling data, as well as events and event notifications, and Components whose main objective should be confined to presentation (UI).

希望这对您有帮助...

Hope this helps...

这篇关于具有主从细节的Blazor Grid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！