Megosztás a következőn keresztül:

ASP.NET Core BlazorQuickGrid komponens

Jegyzet

Ez nem a cikk legújabb verziója. Az aktuális kiadásról a cikk .NET 10-es verziójában olvashat.

A QuickGrid összetevő egy Razor összetevő, amely gyorsan és hatékonyan jeleníti meg az adatokat táblázatos formában. QuickGrid egyszerű és kényelmes adatrács-összetevőt biztosít a gyakori rácsmegjelenítési forgatókönyvekhez, és referenciaarchitektúraként és teljesítménykonfigurációként szolgál az adatrács-összetevők létrehozásához. QuickGrid rendkívül optimalizált, és fejlett technikákat használ az optimális renderelési teljesítmény eléréséhez.

Csomag

Adjon hozzá egy csomaghivatkozást a Microsoft.AspNetCore.Components.QuickGrid csomaghoz.

Jegyzet

A csomagok .NET-alkalmazásokhoz való hozzáadásáról a Csomagok telepítése és kezeléseCsomaghasználati munkafolyamat (NuGet-dokumentáció)című cikkben talál útmutatást. Ellenőrizze a megfelelő csomagverziókat a NuGet.org.

Minta alkalmazás

Különböző QuickGrid bemutatókért lásd a QuickGrid a Blazor mintaalkalmazást. A bemutató webhelyet a GitHub Pages üzemelteti. A webhely gyorsan betöltődik a közösség által fenntartott BlazorWasmPrerendering.Build GitHub-projekthasználatával végzett statikus előrendelésnek köszönhetően.

QuickGrid implementáció

A QuickGrid komponens implementálása:

  • Adja meg a QuickGrid összetevő címkéit a Razor jelölésben (<QuickGrid>...</QuickGrid>).
  • Nevezzen meg egy lekérdezhető adatforrást a táblázathoz. Használja az alábbi adatforrások valamelyikét:
    • Items: Null értékkel rendelkező IQueryable<TGridItem>, ahol a TGridItem annak az adattípusnak felel meg, amelyet a rács minden egyes sora képvisel.
    • ItemsProvider: Visszahívás, amely adatokat szolgáltat a táblázathoz.
  • Class: Választható CSS-osztálynév. Ha meg van adva, az osztály neve szerepel a renderelt tábla class attribútumában.
  • Theme: Témanév (alapértelmezett érték: default). Ez befolyásolja, hogy mely stílusszabályok felelnek meg a táblának.
  • Virtualize: Ha igaz, a rács virtualizálással kerül megjelenítésre. Ezt általában görgetéssel együtt használják, és a rács csak az aktuális görgetőnézet körüli adatokat olvassa be és rendereli. Ez nagy adathalmazok görgetésekor jelentősen javíthatja a teljesítményt. Ha Virtualizehasznál, meg kell adnia egy értéket a ItemSize számára, és biztosítania kell, hogy minden sor állandó magasságú legyen. Általában célszerű nem Virtualize használni, ha a megjelenített adatok mennyisége kicsi, vagy ha lapozást használ.
  • ItemSize: Csak Virtualizehasználatakor alkalmazható. ItemSize az egyes sorokhoz tartozó képpontmagasságot határozza meg, így a virtualizálási mechanizmus a megfelelő számú elem beolvasását teszi lehetővé a megjelenítési méretnek megfelelően, és biztosítja a pontos görgetést.
  • ItemKey: Igény szerint az egyes renderelt sorok @key értékét határozza meg. Ez általában az egyes adatelemek egyedi azonosítójának, például elsődleges kulcsértékének megadására szolgál. Ez lehetővé teszi, hogy a rács megőrizze a sorelemek és az adatelemek közötti társítást az egyedi azonosítójuk alapján, még akkor is, ha a TGridItem példányokat új másolatok váltják fel (például az alapul szolgáló adattárra irányuló új lekérdezés után). Ha nincs beállítva, a @key a TGridItem példányként funkcionál.
  • OverscanCount: Meghatározza, hogy hány további elemet jelenítsen meg a látható régió előtt és után, hogy csökkentse a megjelenítés gyakoriságát a görgetés során. Míg a magasabb értékek a görgetés simítását növelhetik azáltal, hogy több elemet jelenítenek meg a képernyőn kívül, a magasabb érték a kezdeti betöltési idők növekedéséhez is vezethet. Javasoljuk, hogy az adatkészlet mérete és a felhasználói élmény követelményei alapján keressen egyensúlyt. Az alapértelmezett érték 3. Csak Virtualizehasználata esetén érhető el.
  • Pagination: Igény szerint összekapcsolja ezt a TGridItem-példányt egy PaginationState modellel, így a rács csak az aktuális adatoldalt olvassa be és jeleníti meg. Ezt általában egy Paginator összetevővel vagy más olyan felhasználói felületi logikával együtt használják, amely megjeleníti és frissíti a megadott PaginationState-példányt.
  • A QuickGrid gyermektartalomban (RenderFragment) adja meg az PropertyColumn<TGridItem,TProp> elemeket, amelyek TGridItem oszlopokat jelölnek, amelyek cellái értékeket jelenítenek meg.
    • Property: Meghatározza az oszlop celláiban megjelenítendő értéket.
    • Format: Az érték formátumsztringjének megadása opcionálisan. A Format használatához a TPropimplementálásához IFormattable típus szükséges.
    • Sortable: Azt jelzi, hogy az adatoknak rendezhetőnek kell-e lenniük az oszlop szerint. Az alapértelmezett érték az oszloptípustól függően változhat. Például egy TemplateColumn<TGridItem> tekinthető rendezettnek, amennyiben bármely SortBy paraméter meg van adva.
    • InitialSortDirection: A rendezési irányt jelzi, ha IsDefaultSortColumntrue.
    • IsDefaultSortColumn: Azt jelzi, hogy az oszlopot alapértelmezés szerint kell-e rendezni.
    • PlaceholderTemplate: Ha meg van adva, a virtualizált rácsok ezzel a sablonnal renderelik azokat a cellákat, amelyek adatai nincsenek betöltve.
    • HeaderTemplate: Az oszlop fejléccellájának nem kötelező sablonja. Ha nincs megadva, az alapértelmezett fejlécsablon tartalmazza a Title, valamint a vonatkozó rendezési mutatókat és beállításgombokat.
    • Title: Az oszlop címszövege. A cím automatikusan megjelenik, ha HeaderTemplate nincs használatban.
  • Adja meg a QuickGrid összetevő címkéit a Razor jelölésben (<QuickGrid>...</QuickGrid>).
  • Nevezzen meg egy lekérdezhető adatforrást a táblázathoz. Használja az alábbi adatforrások valamelyikét:
    • Items: Null értékkel rendelkező IQueryable<TGridItem>, ahol a TGridItem annak az adattípusnak felel meg, amelyet a rács minden egyes sora képvisel.
    • ItemsProvider: Visszahívás, amely adatokat szolgáltat a táblázathoz.
  • Class: Választható CSS-osztálynév. Ha meg van adva, az osztály neve szerepel a renderelt tábla class attribútumában.
  • Theme: Témanév (alapértelmezett érték: default). Ez befolyásolja, hogy mely stílusszabályok felelnek meg a táblának.
  • Virtualize: Ha igaz, a rács virtualizálással kerül megjelenítésre. Ezt általában görgetéssel együtt használják, és a rács csak az aktuális görgetőnézet körüli adatokat olvassa be és rendereli. Ez nagy adathalmazok görgetésekor jelentősen javíthatja a teljesítményt. Ha Virtualizehasznál, meg kell adnia egy értéket a ItemSize számára, és biztosítania kell, hogy minden sor állandó magasságú legyen. Általában célszerű nem Virtualize használni, ha a megjelenített adatok mennyisége kicsi, vagy ha lapozást használ.
  • ItemSize: Csak Virtualizehasználatakor alkalmazható. ItemSize az egyes sorokhoz tartozó képpontmagasságot határozza meg, így a virtualizálási mechanizmus a megfelelő számú elem beolvasását teszi lehetővé a megjelenítési méretnek megfelelően, és biztosítja a pontos görgetést.
  • ItemKey: Igény szerint az egyes renderelt sorok @key értékét határozza meg. Ez általában az egyes adatelemek egyedi azonosítójának, például elsődleges kulcsértékének megadására szolgál. Ez lehetővé teszi, hogy a rács megőrizze a sorelemek és az adatelemek közötti társítást az egyedi azonosítójuk alapján, még akkor is, ha a TGridItem példányokat új másolatok váltják fel (például az alapul szolgáló adattárra irányuló új lekérdezés után). Ha nincs beállítva, a @key a TGridItem példányként funkcionál.
  • Pagination: Igény szerint összekapcsolja ezt a TGridItem-példányt egy PaginationState modellel, így a rács csak az aktuális adatoldalt olvassa be és jeleníti meg. Ezt általában egy Paginator összetevővel vagy más olyan felhasználói felületi logikával együtt használják, amely megjeleníti és frissíti a megadott PaginationState-példányt.
  • A QuickGrid gyermektartalomban (RenderFragment) adja meg az PropertyColumn<TGridItem,TProp> elemeket, amelyek TGridItem oszlopokat jelölnek, amelyek cellái értékeket jelenítenek meg.
    • Property: Meghatározza az oszlop celláiban megjelenítendő értéket.
    • Format: Az érték formátumsztringjének megadása opcionálisan. A Format használatához a TPropimplementálásához IFormattable típus szükséges.
    • Sortable: Azt jelzi, hogy az adatoknak rendezhetőnek kell-e lenniük az oszlop szerint. Az alapértelmezett érték az oszloptípustól függően változhat. Például egy TemplateColumn<TGridItem> tekinthető rendezettnek, amennyiben bármely SortBy paraméter meg van adva.
    • InitialSortDirection: A rendezési irányt jelzi, ha IsDefaultSortColumntrue.
    • IsDefaultSortColumn: Azt jelzi, hogy az oszlopot alapértelmezés szerint kell-e rendezni.
    • PlaceholderTemplate: Ha meg van adva, a virtualizált rácsok ezzel a sablonnal renderelik azokat a cellákat, amelyek adatai nincsenek betöltve.
    • HeaderTemplate: Az oszlop fejléccellájának nem kötelező sablonja. Ha nincs megadva, az alapértelmezett fejlécsablon tartalmazza a Title, valamint a vonatkozó rendezési mutatókat és beállításgombokat.
    • Title: Az oszlop címszövege. A cím automatikusan megjelenik, ha HeaderTemplate nincs használatban.

Adja hozzá például a következő összetevőt egy rács megjelenítéséhez.

Az Blazor Web App-összetevők esetében a QuickGrid összetevőnek interaktív renderelési módot kell alkalmaznia az interaktív funkciók, például a lapozás és a rendezés engedélyezéséhez.

PromotionGrid.razor:

@page "/promotion-grid"
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Promotion Grid</PageTitle>

<h1>Promotion Grid Example</h1>

<QuickGrid Items="people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
    private record Person(int PersonId, string Name, DateOnly PromotionDate);

    private IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

@page "/promotion-grid"
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Promotion Grid</PageTitle>

<h1>Promotion Grid Example</h1>

<QuickGrid Items="people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.PromotionDate)" Format="yyyy-MM-dd" Sortable="true" />
</QuickGrid>

@code {
    private record Person(int PersonId, string Name, DateOnly PromotionDate);

    private IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

Az összetevő megtekinthető böngészőben a /promotion-gridrelatív elérési úton keresztül.

Nincs jelenlegi terv arra, hogy a QuickGrid-t olyan funkciókkal bővítsék, amelyeket a teljes körű kereskedelmi rácsok általában kínálnak, például hierarchikus sorok, oszlopok átrendezése húzással vagy Excel-szerű tartománykijelölések. Ha olyan speciális funkciókat igényel, amelyeket nem szeretne önállóan fejleszteni, folytassa a harmadik féltől származó rácsok használatát.

Rendezés oszlop szerint

A QuickGrid összetevő oszlopok szerint rendezheti az elemeket. Az Blazor Web Apps-ben a rendezéshez az összetevőnek interaktív renderelési módot kell alkalmaznia.

Adja hozzá Sortable="true" (Sortable) a PropertyColumn<TGridItem,TProp> címkéhez:

<PropertyColumn Property="..." Sortable="true" />

A futó alkalmazásban rendezze a QuickGrid oszlopot a renderelt oszlop címének kiválasztásával.

Lapelemek a Paginator összetevővel rendelkező

A QuickGrid összetevő képes adatokat betölteni az adatforrásból. Az Blazor Web Apps-ben a lapozáshoz az összetevőnek interaktív renderelési módot kell alkalmaznia.

Vegyen fel egy PaginationState-példányt az összetevő @code blokkjára. Állítsa be a ItemsPerPage értékét a laponként megjelenítendő elemek számát. A következő példában a példány neve pagination, és oldalanként tíz elem van beállítva:

PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

Állítsa be a QuickGrid komponens Pagination tulajdonságát pagination-re:

<QuickGrid Items="..." Pagination="pagination">

Ha felhasználói felületet szeretne biztosítani a lapozáshoz, adjon hozzá egy Paginator összetevőt, a QuickGrid összetevő fölé vagy alá. Állítsa be Paginator.State-tól pagination-ig:

<Paginator State="pagination" />

A futó alkalmazásban lapozza végig az elemeket egy renderelt Paginator összetevő használatával.

QuickGrid további üres sorokat jelenít meg az adatok utolsó oldalának kitöltéséhez, ha Paginator összetevővel használják. A .NET 9 vagy újabb verzióiban a rendszer üres adatcellákat (<td></td>) ad hozzá az üres sorokhoz. Az üres sorok célja, hogy megkönnyítsék a QuickGrid stabil sormagassággal és stílussal való megjelenítését az összes oldalon.

Sorstílusok alkalmazása

Stílusok alkalmazása sorokra CSS-izoláció segítségével, amely tartalmazhatja az üres sorok stílusozását is azoknál az összetevőknél, amelyek egy QuickGrid komponens segítségével Paginator.

Burkolja be a QuickGrid összetevőt egy burkoló blokk-elemet, például egy <div>-be.

+ <div>
    <QuickGrid ...>
        ...
    </QuickGrid>
+ </div>

Sorstílus alkalmazása a(z) ::deeppseudoelemmel. Az alábbi példában a sormagasság 2emértékre van állítva, beleértve az üres adatsorokat is.

{COMPONENT}.razor.css:

::deep tr {
    height: 2em;
}

Másik lehetőségként használja a következő CSS-stílust:

  • Adatokkal kitöltött sorcellák megjelenítése.
  • Ne jelenjenek meg üres sorcellák, ami megakadályozza, hogy az üres sorcellaszegélyek Bootstrap-stílusonként jelenjenek meg.

{COMPONENT}.razor.css:

::deep tr:has(> td:not(:empty)) > td {
    display: table-cell;
}

::deep td:empty {
    display: none;
}

A ::deeppszeudoelemek CSS-elkülönítéssel használatáról további információt a ASP.NET Core Blazor CSS-elkülönítésicímű cikkben talál.

Egyéni attribútumok és stílusok

QuickGrid támogatja az egyéni attribútumok és stílusosztályok (Class) továbbítását a renderelt táblaelemnek:

<QuickGrid Items="..." custom-attribute="value" Class="custom-class">

Alakítsa ki a táblázatsor stílusát a sorelem alapján.

Stíluslaposztály alkalmazása a rács egy sorára a sorelem alapján a RowClass paraméter használatával.

Az alábbi példában:

  • A sorelem a Personrekord által van ábrázolva. A Person rekord tartalmaz egy FirstName tulajdonságot.
  • A GetRowCssClass metódus a highlight-row osztálystílusokat alkalmazza minden olyan sorra, ahol a személy utóneve "Julie".
<QuickGrid ... RowClass="GetRowCssClass">
    ...
</QuickGrid>

@code {
    private record Person(int PersonId, string FirstName, string LastName);

    private string GetRowCssClass(Person person) =>
        person.FirstName == "Julie" ? "highlight-row" : null;
}

QuickGrid oszlopbeállítások bezárása

Zárja be a QuickGrid oszlopbeállítások felhasználói felületét a HideColumnOptionsAsync metódussal.

Az alábbi példa a címszűrő alkalmazása után bezárja az oszlopbeállítások felhasználói felületét:

<QuickGrid @ref="movieGrid" Items="movies">
    <PropertyColumn Property="@(m => m.Title)" Title="Title">
        <ColumnOptions>
            <input type="search" @bind="titleFilter" placeholder="Filter by title" 
                @bind:after="@(() => movieGrid.HideColumnOptionsAsync())" />
        </ColumnOptions>
    </PropertyColumn>
    <PropertyColumn Property="@(m => m.Genre)" Title="Genre" />
    <PropertyColumn Property="@(m => m.ReleaseYear)" Title="Release Year" />
</QuickGrid>

@code {
    private QuickGrid<Movie>? movieGrid;
    private string titleFilter = string.Empty;
    private IQueryable<Movie> movies = new List<Movie> { ... }.AsQueryable();
    private IQueryable<Movie> filteredMovies => 
        movies.Where(m => m.Title!.Contains(titleFilter));
}

Entity Framework Core (EF Core) adatforrás

A gyári mintával feloldhat egy EF Core adatbázis-környezetet, amely adatokat biztosít egy QuickGrid összetevőnek. A gyári minta ajánlásának okairól további információt az ASP.NET Core Blazor az Entity Framework Core-ral (EF Core) című cikkben talál.

Az adatbáziskörnyezet-előállítót (IDbContextFactory<TContext>) a rendszer a @inject irányelvvel injektálja az összetevőbe. A gyári megközelítés megköveteli az adatbázis-környezet ártalmatlanítását, ezért az összetevő implementálja a IAsyncDisposable interfészt a @implements irányelvvel. A QuickGrid összetevő elemszolgáltatója egy DbSet<T>, amely az injektált adatbáziskörnyezet-előállító létrehozott adatbázis-környezetéből (CreateDbContext) származik.

QuickGrid felismeri az EF által biztosított IQueryable-példányokat, és tudja, hogyan oldhatja meg a lekérdezéseket aszinkron módon a hatékonyság érdekében.

Adjon hozzá egy csomaghivatkozást a Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter NuGet csomaghoz.

Jegyzet

A csomagok .NET-alkalmazásokhoz való hozzáadásáról a Csomagok telepítése és kezeléseCsomaghasználati munkafolyamat (NuGet-dokumentáció)című cikkben talál útmutatást. Ellenőrizze a megfelelő csomagverziókat a NuGet.org.

Hívja meg a AddQuickGridEntityFrameworkAdapter a Program fájlban található szolgáltatásgyűjteményt egy EF-tudatos IAsyncQueryExecutor implementáció regisztrálásához.

builder.Services.AddQuickGridEntityFrameworkAdapter();

Az alábbi példa egy ExampleTable adatbázis-környezetből (DbSet<TEntity>) származó AppDbContextcontext (táblázatot) használ egy QuickGrid-összetevő adatforrásaként:

@using Microsoft.AspNetCore.Components.QuickGrid
@using Microsoft.EntityFrameworkCore
@implements IAsyncDisposable
@inject IDbContextFactory<AppDbContext> DbFactory

...

<QuickGrid ... Items="context.ExampleTable" ...>
    ...
</QuickGrid>

@code {
    private AppDbContext context = default!;

    protected override void OnInitialized()
    {
        context = DbFactory.CreateDbContext();
    }

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

Az előző példa kódblokkjában (@code):

  • A context mező az adatbázis-környezetet tartalmazza, AppDbContexttípusként.
  • A OnInitialized életciklus-metódus új adatbázis-környezetet (CreateDbContext) rendel a context mezőhöz az injektált gyárból (DbFactory).
  • Az aszinkron DisposeAsync metódus elveti az adatbáziskontextust, amikor az összetevő eldobásra kerül.

Bármely EF által támogatott LINQ-operátor használatával is szűrheti az adatokat, mielőtt továbbítanák azokat a Items paraméternek.

Az alábbi példa egy keresőmezőbe beírt filmcím alapján szűri a filmeket. Az adatbázis-környezet BlazorWebAppMoviesContext, a modell pedig Movie. A filmnek a Title tulajdonságát a szűrőművelethez használják.

@using Microsoft.AspNetCore.Components.QuickGrid
@using Microsoft.EntityFrameworkCore
@implements IAsyncDisposable
@inject IDbContextFactory<BlazorWebAppMoviesContext> DbFactory

...

<p>
    <input type="search" @bind="titleFilter" @bind:event="oninput" />
</p>

<QuickGrid ... Items="FilteredMovies" ...>
    ...
</QuickGrid>

@code {
    private string titleFilter = string.Empty;
    private BlazorWebAppMoviesContext context = default!;

    protected override void OnInitialized()
    {
        context = DbFactory.CreateDbContext();
    }

    private IQueryable<Movie> FilteredMovies => 
        context.Movie.Where(m => m.Title!.Contains(titleFilter));

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

Egy működő példáért tekintse meg a következő erőforrásokat:

Megjelenített név támogatása

Az oszlopcím a ColumnBase<TGridItem>.Titlecímkéjében a PropertyColumn<TGridItem,TProp> használatával rendelhető hozzá. A következő filmes példában az oszlop a "Release Date" nevet kapja a filmbemutató dátumához:

<PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />

Az oszlopcímek (nevek) kötött modelltulajdonságokból való kezelése azonban általában jobb választás az alkalmazások karbantartásához. A modell szabályozhatja egy tulajdonság megjelenítendő nevét a [Display] attribútummal. A következő példában a modell a "Release Date" megjelenítési nevet adja meg a film megjelenési dátumának ReleaseDate tulajdonságához.

[Display(Name = "Release Date")]
public DateTime ReleaseDate { get; set; }

Ha engedélyezni szeretné, hogy a QuickGrid összetevő használja a DisplayAttribute.Name tulajdonságot, hozza létre a(z) PropertyColumn<TGridItem,TProp>osztály egy alosztályát, akár az összetevőben, akár egy külön osztályban. Hívja meg a GetName metódust, hogy adja vissza a honosított DisplayAttribute.Name értéket, ha egy nem lokális DisplayName ([DisplayName] attribútum) nem tárolja az értéket:

public class DisplayNameColumn<TGridItem, TProp> : PropertyColumn<TGridItem, TProp>
{
    protected override void OnParametersSet()
    {
        if (Title is null && Property.Body is MemberExpression memberExpression)
        {
            var memberInfo = memberExpression.Member;
            Title = 
                memberInfo.GetCustomAttribute<DisplayNameAttribute>().DisplayName ??
                memberInfo.GetCustomAttribute<DisplayAttribute>().GetName() ??
                memberInfo.Name;
        }

        base.OnParametersSet();
    }
}

Használja az alosztályt a QuickGrid komponensben. Az alábbi példában az előző DisplayNameColumn használjuk. A "" nevet a modellben attribútum adja meg, így nincs szükség megadására:

<DisplayNameColumn Property="movie => movie.ReleaseDate" />

A [DisplayName] attribútum is támogatott:

[DisplayName("Release Date")]
public DateTime ReleaseDate { get; set; }

A [Display] attribútum azonban ajánlott, mert további tulajdonságokat tesz elérhetővé. A [Display] attribútum például lehetővé teszi egy erőforrástípus hozzárendelését a honosításhoz.

Távoli adatok

Az Blazor WebAssembly alkalmazásokban gyakori követelmény az adatok lekérése egy JSON-alapú webes API-ból egy kiszolgálón. Ha csak az aktuális laphoz/adatnézethez szükséges adatokat szeretné lekérni, és rendezési vagy szűrési szabályokat szeretne alkalmazni a kiszolgálón, használja a ItemsProvider paramétert.

ItemsProvider akkor is használható kiszolgálóoldali Blazor alkalmazásokban, ha az alkalmazás külső végpont lekérdezéséhez szükséges, vagy más olyan esetekben, amikor a követelményekre nem vonatkozik egy IQueryable.

Adjon meg egy visszahívást, amely megfelel a GridItemsProvider<TGridItem> delegált típusának, ahol TGridItem a rácson megjelenített adatok típusa. A visszahívás egy GridItemsProviderRequest<TGridItem>típusú paramétert kap, amely meghatározza a visszaadandó adatok kezdőindexét, maximális sorszámát és rendezési sorrendjét. Az egyező elemek visszaadása mellett a lapozás és a virtualizálás helyes működéséhez a teljes elemszám (totalItemCount) is szükséges.

Az alábbi példa adatokat kér le az OpenFDA Élelmiszer-végrehajtás adatbázisának nyilvános részéből .

A GridItemsProvider<TGridItem> a GridItemsProviderRequest<TGridItem>-t egy OpenFDA-adatbázis elleni lekérdezéssé alakítja. A lekérdezési paraméterek a külső JSON API által támogatott adott URL-formátumra lesznek lefordítva. A rendezést és szűrést csak a külső API által támogatott rendezéssel és szűréssel lehet elvégezni. Az OpenFDA-végpont nem támogatja a rendezést, ezért egyik oszlop sem lesz rendezhetőként megjelölve. Azonban támogatja a rekordok kihagyását (skip paraméter) és a rekordok visszatérésének korlátozását (limit paraméter), így az összetevő lehetővé teszi a virtualizálást, és gyorsan görgethet több tízezer rekordon.

FoodRecalls.razor:

@page "/food-recalls"
@inject HttpClient Http
@inject NavigationManager Navigation

<PageTitle>Food Recalls</PageTitle>

<h1>OpenFDA Food Recalls</h1>

<div class="grid" tabindex="-1">
    <QuickGrid ItemsProvider="@foodRecallProvider" Virtualize="true">
        <PropertyColumn Title="ID" Property="@(c => c.Event_Id)" />
        <PropertyColumn Property="@(c => c.State)" />
        <PropertyColumn Property="@(c => c.City)" />
        <PropertyColumn Title="Company" Property="@(c => c.Recalling_Firm)" />
        <PropertyColumn Property="@(c => c.Status)" />
    </QuickGrid>
</div>

<p>Total: <strong>@numResults results found</strong></p>

@code {
    private GridItemsProvider<FoodRecall>? foodRecallProvider;
    private int numResults;

    protected override async Task OnInitializedAsync()
    {
        foodRecallProvider = async req =>
        {
            var url = Navigation.GetUriWithQueryParameters(
                "https://api.fda.gov/food/enforcement.json", 
                new Dictionary<string, object?>
            {
                { "skip", req.StartIndex },
                { "limit", req.Count },
            });

            using var response = await Http.GetFromJsonAsync<FoodRecallQueryResult>(
                url, req.CancellationToken);

            return GridItemsProviderResult.From(
                items: response!.Results,
                totalItemCount: response!.Meta.Results.Total);
        };

        numResults = (await Http.GetFromJsonAsync<FoodRecallQueryResult>(
            "https://api.fda.gov/food/enforcement.json"))!.Meta.Results.Total;
    }
}

További információ a webes API-k hívásáról: Webes API meghívása egy ASP.NET Core Blazor-alkalmazásból.

QuickGrid állványozó

A QuickGrid sablonozó Razor komponenseket állít elő QuickGrid az adatbázisból származó adatok megjelenítésére.

Az állványzat alapszintű létrehozási, olvasási, frissítési és törlési (CRUD) lapokat hoz létre egy Entity Framework Core-adatmodell alapján. Struktúrát készíthet az egyes oldalakhoz vagy az összes CRUD-oldalhoz. Opcióként válassza ki a modellosztályt és a DbContext-t, szükség esetén létrehozhat egy új DbContext-et.

A scaffolded Razor összetevők hozzáadásra kerülnek a projektbe egy létrehozott mappában, amelyet a modellosztályról neveztek el. A létrehozott Index összetevő egy QuickGrid összetevőt használ az adatok megjelenítéséhez. Szükség szerint testre szabhatja a létrehozott összetevőket, és lehetővé teheti az interaktivitást az interaktív funkciók, mint például a lapozás, rendezés és szűrés előnyeinek kihasználására.

Az állványzat által előállított összetevők kiszolgálóoldali renderelést (SSR) igényelnek, ezért a WebAssembly-en való futtatáskor nem támogatottak.

Kattintson a jobb gombbal a Components/Pages mappára, és válassza >Új állványozott elem hozzáadásalehetőséget.

Az Új állványelem hozzáadása párbeszédpanel megnyitásával Telepített>Közös>Blazor>Razor összetevő, válassza Razor összetevőket az Entity Framework (CRUD)használatával. Válassza a hozzáadás gombot.

CRUD a létrehozás, olvasás, frissítés és törlés rövidítése. Az állványzat létrehozza az alkalmazás létrehozási, szerkesztési, törlési, részlet- és indexösszetevőit.

A Az Entity Framework (CRUD) használatával kapcsolatos komponensek hozzáadásaRazor párbeszédpanel kitöltése.

  • A sablon legördülő lista más sablonokat is tartalmaz, amelyekkel kifejezetten létrehozhat, szerkeszthet, törölhet, részleteket és listaösszetevőket hozhat létre. Ez a legördülő lista akkor hasznos, ha csak egy adott típusú összetevőt kell létrehoznia egy modellosztályhoz. Hagyja a Sablon legördülő listát a CRUD opcióra állítva, hogy az összetevők teljes készlete összeálljon.
  • A Modellosztály legördülő listában válassza ki a modellosztályt. A rendszer létrehoz egy mappát a létrehozott összetevőkhöz a modellnévből (ha a modellosztály neve Movie, a mappa neve automatikusan MoviePages).
  • A DbContext osztályesetében kövesse az alábbi módszerek egyikét:
    • Válasszon ki egy meglévő DbContext osztályt, amelyről tudja, hogy gyári szolgáltatói regisztrációval rendelkezik (AddDbContextFactory).
    • Válassza a + (pluszjel) gombot, és a Adatkörnyezet hozzáadása modális párbeszédpanel használatával adjon meg egy új DbContext osztálynevet, amely a környezettípus közvetlen szolgáltatásregisztráció helyett egy gyári szolgáltatónál regisztrálja az osztályt.
  • Miután a modell párbeszédpanel bezárul, az adatbázis-szolgáltató legördülő lista alapértelmezés szerint SQL Serverlesz. Kiválaszthatja a megfelelő szolgáltatót a használt adatbázishoz. A lehetőségek közé tartozik az SQL Server, az SQLite, a PostgreSQL és az Azure Cosmos DB.
  • Válassza ki és adja hozzá.

A QuickGrid generátor példafelhasználásához lásd a Blazor filmadatbázis-alkalmazás készítése (Áttekintés)című témát.

Több egyidejű EF Core lekérdezés aktiválja System.InvalidOperationException

Több egyidejű EF Core lekérdezés aktiválhatja a következő System.InvalidOperationException:

System.InvalidOperationException: Egy második művelet indult el ezen a környezeti példányon, mielőtt egy korábbi művelet befejeződött. Ezt általában különböző szálak okozzák egyidejűleg a DbContext ugyanazon példányát használva. További információért a DbContext szálkezelésével kapcsolatos problémák elkerüléséről lásd: https://go.microsoft.com/fwlink/?linkid=2097913.

Ez a forgatókönyv a ASP.NET Core közelgő kiadásának továbbfejlesztése érdekében van ütemezve. További információért lásd: [Blazor] Javítsa az élményt a QuickGrid és EF Core segítségével (dotnet/aspnetcore #58716).

Addig is megoldhatja a problémát egy törlési tokennel rendelkező ItemsProvider használatával. A lemondási jogkivonat megakadályozza az egyidejű lekérdezéseket azáltal, hogy egy új kérés kibocsátásakor megszakítja az előző kérést.

Tekintse az alábbi példát, amely a filmadatbázis Index összetevőjén alapul a Blazor filmadatbázis-alkalmazás (Áttekintés) oktatóanyagban. Az egyszerűbb verzió, amelyet az alkalmazásba integráltak, megtekinthető a cikk mintaalkalmazásrészében. Az alkalmazásba illesztett Index összetevő helyébe a következő összetevő lép.

Components/Pages/MoviePages/Index.razor:

@page "/movies"
@rendermode InteractiveServer
@using Microsoft.EntityFrameworkCore
@using Microsoft.AspNetCore.Components.QuickGrid
@using BlazorWebAppMovies.Models
@using BlazorWebAppMovies.Data
@inject IDbContextFactory<BlazorWebAppMovies.Data.BlazorWebAppMoviesContext> DbFactory

<PageTitle>Index</PageTitle>

<h1>Index</h1>

<div>
    <input type="search" @bind="titleFilter" @bind:event="oninput" />
</div>

<p>
    <a href="movies/create">Create New</a>
</p>

<div>
    <QuickGrid Class="table" TGridItem="Movie" ItemsProvider="GetMovies"
            ItemKey="(x => x.Id)" Pagination="pagination">
        <PropertyColumn Property="movie => movie.Title" Sortable="true" />
        <PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />
        <PropertyColumn Property="movie => movie.Genre" />
        <PropertyColumn Property="movie => movie.Price" />
        <PropertyColumn Property="movie => movie.Rating" />

        <TemplateColumn Context="movie">
            <a href="@($"movies/edit?id={movie.Id}")">Edit</a> |
            <a href="@($"movies/details?id={movie.Id}")">Details</a> |
            <a href="@($"movies/delete?id={movie.Id}")">Delete</a>
        </TemplateColumn>
    </QuickGrid>
</div>

<Paginator State="pagination" />

@code {
    private BlazorWebAppMoviesContext context = default!;
    private PaginationState pagination = new PaginationState { ItemsPerPage = 5 };
    private string titleFilter = string.Empty;

    public async ValueTask<GridItemsProviderResult<Movie>> GetMovies(GridItemsProviderRequest<Movie> request)
    {
        using var context = DbFactory.CreateDbContext();
        var totalCount = await context.Movie.CountAsync(request.CancellationToken);
        IQueryable<Movie> query = context.Movie.OrderBy(x => x.Id);
        query = request.ApplySorting(query).Skip(request.StartIndex);

        if (request.Count.HasValue)
        {
            query = query.Take(request.Count.Value);
        }

        var items = await query.ToArrayAsync(request.CancellationToken);

        var result = new GridItemsProviderResult<Movie>
        {
            Items = items,
            TotalItemCount = totalCount
        };

        return result;
    }
}
  • Last updated on