{"id":839,"date":"2024-10-23T13:58:49","date_gmt":"2024-10-23T04:58:49","guid":{"rendered":"https:\/\/dnetcore.ohwaki.jp\/wordpress\/?p=839"},"modified":"2024-10-28T11:08:37","modified_gmt":"2024-10-28T02:08:37","slug":"quickgrid%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6","status":"publish","type":"post","link":"https:\/\/sumomo.ohwaki.jp\/wordpress\/?p=839","title":{"rendered":"QuickGrid\u306b\u3064\u3044\u3066"},"content":{"rendered":"\n

.NET 8.0 Balzor\u3067QuickGrid\u304c\u6b63\u5f0f\u306b\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u305f\u3002<\/p>\n\n\n\n

QuickGrid\u306fBlazor\u3067\u4f7f\u7528\u53ef\u80fd\u306a\u3001Grid\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3001IQueryable<T>\u306e\u30c7\u30fc\u30bf\u30bd\u30fc\u30b9\u306e\u8868\u793a\u304c\u53ef\u80fd\u3067\u3001\u9805\u76ee\u6bce\u306e\u30bd\u30fc\u30c8\u3084\u3001\u8868\u793a\u65b9\u6cd5\u306a\u3069\u3092\u6307\u5b9a\u3067\u304d\u308b\u3002<\/p>\n\n\n\n

\u8a73\u3057\u304f\u306f\u3001\u4ee5\u4e0b\u306e\u30ea\u30f3\u30af\u3092\u53c2\u7167\u3057\u3066\u307b\u3057\u3044\u3002<\/p>\n\n\n\n

ASP.NET Core Blazor QuickGrid \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 | Microsoft Learn<\/a>
<\/a>Typical usage<\/a><\/p>\n\n\n\n

\u3053\u3053\u3067\u306f\u3001\u7c21\u5358\u306a\u4f7f\u7528\u4f8b\u3092\u53c2\u8003\u3068\u3057\u3066\u4e0a\u3052\u3066\u304a\u304f\u3002<\/p>\n\n\n\n

\u307e\u305a\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u4e0b\u8a18\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u8ffd\u52a0<\/p>\n\n\n\n

> dotnet add package Microsoft.AspNetCore.Components.QuickGrid<\/code><\/pre><\/div>\n\n\n\n
QuickGrid\u306e\u30c7\u30fc\u30bf\u30bd\u30fc\u30b9\u306bEntityFrameworkCore\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306b\u306f\u3001\u4e0b\u8a18\u3082(\u4eca\u56de\u306e\u4f8b\u3067\u306f\u672a\u4f7f\u7528)<\/p>\n\n\n\n
> dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter<\/code><\/pre><\/div>\n\n\n\n
\u30b5\u30f3\u30d7\u30eb\u3092\u4ee5\u4e0b\u306b\u793a\u3059\u3002(MongoDB\u4f7f\u7528)<\/p>\n\n\n\n
using MongoDB.Bson;\nusing MongoDB.Bson.Serialization.Attributes;\nnamespace Bl8Zoo.Common;\n\/\/\/ <summary>\n\/\/\/ Animal\n\/\/\/ <\/summary>\npublic class Animal\n{\n    \/\/ \u540d\u79f0\n    public string Name { get; set; } = null!;\n    \/\/ \u30a4\u30e1\u30fc\u30b8\n    public byte[] Picture { get; set; } = null!;\n}\n\/\/\/ <summary>\n\/\/\/ MongoDB\u30b9\u30c8\u30a2\u5f62\u5f0f\n\/\/\/ <\/summary>\npublic class AnimalDb {\n    \/\/ ID\n    [BsonId]\n    public BsonObjectId _id { get; set;} = null!;\n    \/\/ \u540d\u79f0\n    public string Name { get; set; } = null!;\n    \/\/ GridFS\u4e0a\u306e\u30d5\u30a1\u30a4\u30ebId\n    public BsonObjectId ImageId { get; set; } = null!;\n    \/\/ \u30e1\u30e2\n    public string? Memo { get; set; }\n}<\/code><\/pre><\/div>\n\n\n\n
@page "\/"\n@rendermode InteractiveServer\n@using Microsoft.AspNetCore.Components.QuickGrid\n@using Bl8Zoo.Common\n@using MongoDB.Driver\n@using MongoDB.Driver.GridFS\n\n<h2>Zoo<\/h2>\n<br\/>\n<div style="display:flex;justify-content: center;flex-direction: column;">\n    <!-- \n        QunickGrid\u306e\u5b9f\u88c5\u4f8b\n        Items\u306bIQueryable<T>\u3092\u6307\u5b9a\u3059\u308b\u3002\n        Pagination\u306b\u3088\u3063\u3066\u3001\u30da\u30fc\u30b8\u30f3\u30b0\u5358\u4f4d\u3092\u6307\u5b9a\u3067\u304d\u308b\n    -->\n    <QuickGrid Items="@Animals" Pagination="@pagination">\n        <!-- \n            PropertyColumn\u306fAnimals\u306e\u5404\u8981\u7d20\u3092\u76f4\u63a5\u63cf\u753b\u3057\u305f\u308a\u3001\u66f8\u5f0f\u5316\u51fa\u529b\u3059\u308b\u306e\u306b\u4f7f\u7528\u3059\u308b\n            Sortable="true"\u3068\u3059\u308b\u3053\u3068\u3067\u3001\u30bd\u30fc\u30c8\u304c\u53ef\u80fd\u3068\u306a\u308b\n        -->\n        <PropertyColumn Property="@(c=>c.Name)" Sortable="true"\/>\n        <!-- TemplateColumn\u3092\u4f7f\u7528\u3057\u3066\u3001\u30a4\u30e1\u30fc\u30b8\u3092\u8868\u793a -->\n        <TemplateColumn Title="Image">\n            <!-- \n                context\u306fAnimals\u306e\u5404\u8981\u7d20\u3068\u3057\u3066\u4f7f\u7528\u3067\u304d\u308b\n                \u3053\u3053\u3067\u306f\u3001Picture(\u30d0\u30a4\u30c8\u914d\u5217)\u3092DataURL\u3068\u3057\u3066\u30a4\u30e1\u30fc\u30b8\u3092\u8868\u793a\u3057\u3066\u3044\u308b\n            -->\n            <img src="data:image\/jpeg;base64,@Convert.ToBase64String(context.Picture)"\/>\n        <\/TemplateColumn>\n    <\/QuickGrid>\n    <!-- Paginator\u306b\u3088\u3063\u3066\u3001\u30da\u30fc\u30b8\u306e\u5207\u66ff\u304c\u53ef\u80fd -->\n    <Paginator State="@pagination" \/>\n<\/div>\n@code {\n    \/\/ Pagination\u8a2d\u5b9a(1\u30da\u30fc\u30b82\u9805\u76ee)\n    protected PaginationState pagination = new PaginationState { ItemsPerPage = 2 };\n    \/\/ Items\n    protected IQueryable<Animal> Animals = null!;\n    \/\/\/ <summary>\n    \/\/\/ \u521d\u671f\u5316\u51e6\u7406\n    \/\/\/ <\/summary>\n    \/\/\/ <returns><\/returns>\n    protected override async Task OnInitializedAsync() {\n        \/\/ MongoDB\u304b\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\n        var cli = new MongoClient();\n        var db = cli.GetDatabase("AnimalDb");\n        var col = db.GetCollection<AnimalDb>("Animals");\n        var fnd = col.AsQueryable<AnimalDb>();\n        List<Animal> animals = new();\n        GridFSBucket bkt = new GridFSBucket(db);\n        foreach(var itm in fnd) {\n            Animal ani = new Animal() { Name = itm.Name};\n            \/\/ GridFS\u304b\u3089\u30a4\u30e1\u30fc\u30b8\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\n            ani.Picture = await bkt.DownloadAsBytesAsync(itm.ImageId);\n            animals.Add(ani);\n        }\n        Animals = animals.AsQueryable();\n    }\n}<\/code><\/pre><\/div>\n\n\n\n
\u5b9f\u884c\u4f8b<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u30da\u30fc\u30b8\u30f3\u30b0\u3082\u3061\u3083\u3093\u3068\u3067\u304d\u3066\u308b\u3002\u540d\u524d\u3067\u30bd\u30fc\u30c8\u3057\u3066\u307f\u308b\u3068\u3001<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u3061\u306a\u307f\u306b\u3001EntityFrameworkAdapter\u3092\u4f7f\u7528\u3057\u3066EF Core\u3068\u9023\u643a\u3059\u308b\u3068\u3001\u30da\u30fc\u30b8\u79fb\u52d5,\u30bd\u30fc\u30c8\u306a\u3069\u306f\u3001SQL\u3092\u751f\u6210\u3057\u3066\u30af\u30a8\u30ea\u7d50\u679c\u3092\u53cd\u6620\u3055\u305b\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u305f\u3002\uff08\u4ee5\u4e0b\u53c2\u7167)<\/p>\n\n\n\n
@page "\/"\n@rendermode InteractiveServer\n@using Microsoft.EntityFrameworkCore\n@using GridEF.Db\n@using Microsoft.AspNetCore.Components.QuickGrid\n@using NodaTime\n@inject PersonContext ctx\n\n<h2>QuickGrid+Entity Framework Core<\/h2>\n<p>\n    QuickGrid\u306eItems\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306bDb\u306e\u30c6\u30fc\u30d6\u30eb<br\/>\n    IQueryable<Person>? personel = ctx.Personel;<br\/>\n    Personel\u30c6\u30fc\u30d6\u30eb\u306fPerson\u578b\u306e\u96c6\u5408<br\/>\n    <pre>\n    public class Person {\n        [Key]\n        public int Id { get; set; }\n        [Required]\n        public string Name { get; set; } = null!;\n        public DateOnly Birthday { get; set; }\n    }\n    <\/pre>\n    Age\u306f\u8a08\u7b97\u3067\u6c42\u3081\u3066\u3044\u308b\u3002<br\/>\n    <pre>\n    <QuickGrid Items="@@personel" Pagination="@@paginator">\n        <PropertyColumn Property="@@(c=>c.Name)" Sortable="true"\/>\n        <PropertyColumn Property="@@(c=>c.Birthday)" Format="yyyy\/MM\/dd" Sortable="true"\/>\n        <PropertyColumn Property="@@(c=>GetAge(c.Birthday))" Title="Age" \/>\n    <\/QuickGrid><br\/>\n    <\/pre>\n<\/p>\n<QuickGrid Items="@personel" Pagination="@paginator">\n    <PropertyColumn Property="@(c=>c.Name)" Sortable="true"\/>\n    <PropertyColumn Property="@(c=>c.Birthday)" Format="yyyy\/MM\/dd" Sortable="true"\/>\n    <PropertyColumn Property="@(c=>GetAge(c.Birthday))" Title="Age" \/>\n<\/QuickGrid>\n\n<Paginator State="@paginator"\/>\n\n@code {\n    IQueryable<Person>? personel;\n    PaginationState paginator = new PaginationState() { ItemsPerPage = 5};\n    protected override void OnInitialized() {\n        personel = ctx.Personel;\n    }\n    protected int GetAge(DateOnly dt) {\n        return Period.Between(\n            LocalDate.FromDateOnly(dt),\n            LocalDate.FromDateTime(DateTime.Now))\n            .Years;\n    }\n}<\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
#Sqlite\u4f7f\u7528\n#IQueryable<Person>? personel; \/\/ Items\n#personel = ctx.Personel; \/\/ Db Table\n#\u30da\u30fc\u30b8\u79fb\u52d5\u6642\ninfo: Microsoft.EntityFrameworkCore.Database.Command[20101]\n      Executed DbCommand (0ms) [Parameters=[@__p_0='?' (DbType = Int32)], CommandType='Text', CommandTimeout='30']\n      SELECT \"p\".\"Id\", \"p\".\"Birthday\", \"p\".\"Name\"\n      FROM \"Personel\" AS \"p\"\n      LIMIT @__p_0 OFFSET @__p_0<\/strong>\n\n#Name\u3067\u30bd\u30fc\u30c8\ninfo: Microsoft.EntityFrameworkCore.Database.Command[20101]\n      Executed DbCommand (0ms) [Parameters=[@__p_0='?' (DbType = Int32)], CommandType='Text', CommandTimeout='30']\n      SELECT \"p\".\"Id\", \"p\".\"Birthday\", \"p\".\"Name\"\n      FROM \"Personel\" AS \"p\"\n      ORDER BY \"p\".\"Name\"<\/strong>\n      LIMIT @__p_0 OFFSET @__p_0\n\n#Birthday\u3067\u30bd\u30fc\u30c8\ninfo: Microsoft.EntityFrameworkCore.Database.Command[20101]\n      Executed DbCommand (0ms) [Parameters=[@__p_0='?' (DbType = Int32)], CommandType='Text', CommandTimeout='30']\n      SELECT \"p\".\"Id\", \"p\".\"Birthday\", \"p\".\"Name\"\n      FROM \"Personel\" AS \"p\"\n      ORDER BY \"p\".\"Birthday\"<\/strong>\n      LIMIT @__p_0 OFFSET @__p_0<\/code><\/pre>\n\n\n\n
\u7d50\u69cb\u3044\u308d\u3044\u308d\u4f7f\u3048\u305d\u3046\u306a\u306e\u3067\u30e1\u30e2\u3002<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
.NET 8.0 Balzor\u3067QuickGrid\u304c\u6b63\u5f0f\u306b\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u305f\u3002 Qu … \u7d9a\u304d\u3092\u8aad\u3080 →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,10,9,4],"tags":[],"class_list":["post-839","post","type-post","status-publish","format-standard","hentry","category-asp-net-core","category-blazor","category-c","category-4"],"_links":{"self":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=839"}],"version-history":[{"count":9,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/839\/revisions"}],"predecessor-version":[{"id":854,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/839\/revisions\/854"}],"wp:attachment":[{"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sumomo.ohwaki.jp\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}