エンティティフレームワークを使用したBlazor Wash CRUDアプリケーションの構築方法

このブログ記事では、Syncfusion Blazor DataGridを使用してMS SQL ServerをEntity Framework Coreに接続し、Blazor WebSassMableアプリケーションでCRUD操作を実行する手順をステップバイステップの手順に進んでいます.
SyncFusion Viror DataGridコンポーネントでCRUD操作を示すには、簡単なライブラリブック管理アプリケーションを作成します.最終符号は、GitHub repository号である.

必須ソフトウェア

以下のソフトウェアが必要です.

Visual Studio 2019 V 16.8.0プレビュー3.0以降

.NET SDK 5.0 RC 2以降

SQL Server 2017

データベースの作成

まず最初に、図書館データベースを作成し、本のリストを保持するためにブックというテーブルを作成します.

オープンSQLサーバー2017.

ライブラリという名前の新しいデータベースを作成します.

作成したデータベースを右クリックし、新しいクエリを選択します.

次のSQLクエリを使用してブックという名前のテーブルを作成します.

Create Table Book(
  Id BigInt Identity(1,1) Primary Key Not Null,
  Name Varchar(200) Not Null,
  Author Varchar(100) Not Null,
  Quantity int,
  Price int Not Null,
  Available bit)

さて、ブックテーブルのデザインは次のようになります.

アプリケーションを作成する

Visual Studio 2019プレビューを開き、「新規プロジェクトを作成」を選択し、「Blabalor」アプリケーションを選択し、「次へ」をクリックします.

次のウィンドウでプロジェクト名ライブラリ管理を作成し、[ Create ]をクリックします.

ここで、Blazor WebSassMet Appプロジェクトテンプレートを選択し、ASP . NET Frameworkを選択します.ネットコアホストチェックボックス.をクリックしてASP . NETを作成します.NETコアホストアプリケーション.

作成したアプリケーションを探索する場合は、1つのソリューションの下に3つのプロジェクトを見ることができます.
ライブラリ管理クライアント:ブラウザでレンダリングされるページUIコンポーネントを含みます.
ライブラリ管理Server : DB関連の操作やWeb APIなどのサーバー側のコードが含まれます.
ライブラリ管理共有:クライアントとサーバーの両方でアクセスできるモデルクラスなどの共有コードが含まれます.

DBContextクラスモデルの作成

今、DBContextとモデルクラスを既存のライブラリデータベースから足がかります.スキャフォールドを実行し、SQL Serverデータベースを使用してアプリケーションで動作するには、次のnugetパッケージをインストールする必要があります.
次のコマンドをパッケージマネージャーコンソールで実行します.

パッケージマイクロソフト.EntityFrameworkCore.このパッケージはデータベースからデータベースコンテキストとモデルクラスを作成します.

パッケージマイクロソフト.EntityFrameworkCore.SQLServer -バージョン3.0.0 : Entity FrameworkコアがSQL Serverで動作できるようにするデータベースプロバイダー.

これらのパッケージがインストールされれば、DBContextとModelクラスを足場できます.LibraryManagementの下のパッケージマネージャーコンソールで次のコマンドを実行します.サーバープロジェクト.
唐辛子
このscaffoldingコマンドには、既存のデータベースとそのテーブルのDBContextとモデルクラスを作成するための次の詳細があります.

接続文字列データベース名統合セキュリティ=真

*データプロバイダ:* EntityFrameworkCore.SQLServer

出力ディレクトリ::outputdirモデル

このコマンドを実行した後、LibraryContext.CSと本.csファイルはライブラリ管理で作成されます.サーバ.次のようにモデルフォルダ.

ライブラリのコンテキストを見ることができます.CSファイルにOnConfigurationメソッドの接続文字列の詳細が含まれます.

libarycontextで機密情報を持つ接続文字列を持つことは推奨されません.ので、接続文字列をAppSettingsに移動します.JSONファイル.
現在、DBContextは接続ストリングを使用して構成されなければならなくて、スタートアップでAddDBContextメソッドを使用しているスコープされたサービスとして登録されなければなりません.cs

データアクセス層の作成

アプリケーションは現在、Entity Frameworkを使用してライブラリデータベースに接続するように構成されます.今ではライブラリデータベースからデータを消費する時間です.そのためには、DBContextからBladeorアプリケーションへのデータを提供するWeb APIコントローラが必要です.
Blazor WebSassMableアプリケーションがJavaScriptと同じセキュリティサンドボックスで実行されるように、データベースへのダイレクトアクセスが可能です.したがって,web apiはデータベースからデータを消費する必要がある.
Web APIコントローラを作成するには、サーバープロジェクトのコントローラーフォルダーを右クリックし、[読み取り/書き込み]アクションでadd -> new item -> APIコントローラを選択します.ブックテーブルレコードを返すので、このコントローラBooksControllerに名前を付けます.Web APIコントローラを次のコードに置き換えます.このコードには、ブック表のCRUD操作を処理するコードが含まれます.

using LibraryManagement.Server.Models;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using LibraryManagement.Shared.Models;
// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace LibraryManagement.Server.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class BooksController : ControllerBase
    {
        private LibraryContext _context;
        public BooksController(LibraryContext context)
        {
            _context = context;
        }

        // GET: api/<BooksController>
        [HttpGet]
        public object Get()
        {
            return new { Items = _context.Books, Count = _context.Books.Count() };
        }

        // POST api/<BooksController>
        [HttpPost]
        public void Post([FromBody] Book book)
        {
            _context.Books.Add(book);
            _context.SaveChanges();
        }

        // PUT api/<BooksController>
        [HttpPut]
        public void Put(long id, [FromBody] Book book)
        {
            Book _book = _context.Books.Where(x => x.Id.Equals(book.Id)).FirstOrDefault();
            _book.Name = book.Name;
            _book.Author = book.Author;
            _book.Price = book.Price;
            _book.Quantity = book.Quantity;
            _book.Available = book.Available;
            _context.SaveChanges();
        }

        // DELETE api/<BooksController>
        [HttpDelete("{id}")]
        public void Delete(long id)
        {
            Book _book = _context.Books.Where(x => x.Id.Equals(id)).FirstOrDefault();
            _context.Books.Remove(_book);
            _context.SaveChanges();
        }
    }
}

パッケージの追加

SyncFusionのコンポーネントをアプリケーションに追加する前に、本を移動する必要があります.ライブラリ管理用のファイル.クライアントとサーバーの両方のプロジェクトで必要となるプロジェクトを共有します.

プロジェクトにSyncFusionコンポーネントを追加するには、依存関係を右クリックし、「管理パッケージ」を選択します.

タブで、syncfusionを見つけてインストールします.バゲットヌードパッケージ.

をインポートします.Razorファイルを追加し、このアプリケーションでSyncFusion Blairコンポーネントを使用するのに必要な次の名前空間を追加します.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data

プログラムを開きます.CSファイルを作成し、次のようにSyncFusionサービスをmainメソッドに登録します.

using Syncfusion.Blazor;

namespace LibraryManagement.Client
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("#app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            builder.Services.AddSyncfusionBlazor();

            await builder.Build().RunAsync();
        }
    }
}

テーマは生活にコンポーネントを提供します.Syncfusionの炎にはさまざまなテーマがあります.

Bootstrap 4

の材料

オフィス365

ブートストラップ

ハイコントラスト

このデモアプリケーションでは、bootstrap 4のテーマを使用します.テーマを追加するには、WWWROT/indexを開きます.HTMLファイルと次のCSSリファレンスコードを追加します.

<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />

SyncFusionのデータを追加する

前の手順では、アプリケーションでSyncFusionのBlazorパッケージを正常に構成しました.ここで、グリッドコンポーネントをインデックスに追加できます.かみそりページ.sfgridのtvalueはグリッドにバインドされたモデル型を定義します.私たちはブックテーブルからグリッドを作成しているので、本のTValueを使用しました.

@using LibraryManagement.Shared.Models

<SfGrid TValue="Book"> </SfGrid>

グリッドコンポーネントは、グリッドカラムコンポーネントを使用して定義できます.次のコードを使用して列を作成します.

@using LibraryManagement.Shared.Models

<SfGrid TValue="Book">
    <GridColumns>
        <GridColumn Field="@nameof(Book.Id)" IsPrimaryKey="true" Visible="false"></GridColumn>
        <GridColumn Field="@nameof(Book.Name)" Width="150"></GridColumn>
        <GridColumn Field="@nameof(Book.Author)" Width="150"></GridColumn>
        <GridColumn Field="@nameof(Book.Quantity)" Width="90" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field="@nameof(Book.Price)" Width="90" Format="C2" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field="@nameof(Book.Available)" DisplayAsCheckBox="true" Width="70"></GridColumn>
    </GridColumns>
</SfGrid>

プロパティとその使い方を見てみましょう.

Fieldグリッドグリッドで表示するブック表の列名を指定します.

指定された列が主キー列であることを指定します.ここで、ID列は主キー列です.

Visibleカラムの可視性を指定します.falseとして設定すると、ユーザー終了時に列が非表示になります.

width 1 iカラム幅を指定.

フォーマットは、特定の文化のための数字、通貨、日付をフォーマットするのに役立ちます.ここでは、* price *列をフォーマットしました.

DisplaysCheckBoxレンダリングボックスをセルにチェックし、プロパティ値に基づいてチェック状態を設定します.ここで、利用可能な列はチェックボックス列として表示されます.

Web APIからデータを消費するには、SFDataManagerコンポーネントを使用します.SFDataManagerは、syncfusionコンポーネントに柔軟なデータバインド機能を提供します.さまざまなタイプのデータソースと通信するために、様々なビルトイン・アダプターを持っています.
ここでは、Web APIを使用してデータを提供していますので、SafDataManagerのデータアダプタとしてWebPapAdaptorを選択します.
Scaffold-DbContext “Server=localhost;Database=Library;Integrated Security=True” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models
csharp
@using LibraryManagement.Shared.Models
142
html
<SfGrid TValue="Book">
<SfDataManager Url="/api/Books" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
<GridColumns>
<GridColumn Field="@nameof(Book.Id)" IsPrimaryKey="true" Visible="false"></GridColumn>
<GridColumn Field="@nameof(Book.Name)" Width="150"></GridColumn>
<GridColumn Field="@nameof(Book.Author)" Width="150"></GridColumn>
<GridColumn Field="@nameof(Book.Quantity)" Width="90" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="@nameof(Book.Price)" Width="90" Format="C2" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="@nameof(Book.Available)" DisplayAsCheckBox="true" Width="70"></GridColumn>
</GridColumns>
</SfGrid>


We can enable editing in the grid component using the GridEditSettings property. DataGrid provides various modes for editing, such as inline/normal, dialog, and batch editing. Here, we are using the inline edit mode and the Toolbar property to show tool bar items to edit.

csharp
@using LibraryManagement.Shared.Models

html
<SfGrid TValue="Book" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
<SfDataManager Url="/api/Books" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
<GridColumns>
<GridColumn Field="@nameof(Book.Id)" IsPrimaryKey="true" Visible="false"></GridColumn>
<GridColumn Field="@nameof(Book.Name)" Width="150"></GridColumn>
<GridColumn Field="@nameof(Book.Author)" Width="150"></GridColumn>
<GridColumn Field="@nameof(Book.Quantity)" Width="90" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="@nameof(Book.Price)" Width="90" Format="C2" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="@nameof(Book.Available)" DisplayAsCheckBox="true" Width="70"></GridColumn>
</GridColumns>
</SfGrid>