More than 3 years have passed since last update.

ASP.NET Blazorを使ってみる

ASP.NET

Last updated at 2021-12-09Posted at 2021-12-06

ASP.net CoreアプリによってホストされるBlazorアプリを作成する基本的な手順を記載していきたいと思います。

新しいプロジェクト

WebAssemblyアプリを選択する

※ASP.NET Coreでホストされた
　　⇒ASP.NET Coreのランタイムもプロジェクトに含めるオプション

※プログレッシブWebアプリケーション
　　⇒Progressive Web Application（PWA）とは、Webサーバー経由で配信されるWebアプリケーションでありながら、スマートフォンアプリのような動作を実現したアプリケーションのこと

NnGet

appsettings.jsonへ接続登録

hoge.json

  "ConnectionStrings": {
    "DefaultConnection": "Data Source=DBSVNAME;Initial Catalog=DBNAME;Integrated Security=True"
  }

パッケージマネージャーコンソールを開く

hoge.cs

PM> Scaffold-DbContext Name=DefaultConnection Microsoft.EntityFrameworkCore.SqlServer -Tables "Blog"

DBNAMEContext.csと該当のテーブルのModel.csが出来上がる

Startup.csにサービスを登録する。

参考：https://docs.microsoft.com/ja-jp/ef/core/dbcontext-configuration/#dbcontext-in-dependency-injection-for-aspnet-core

Startup.cs

using Microsoft.EntityFrameworkCore;

//---省略---


        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
            services.AddDbContext<hogeContext>(option => option.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

        }

MVCコントローラーの追加

HogeMrbsControllers.cs


namespace hoge_blazor2.Server.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class HogeMrbsController : ControllerBase
    {
        private readonly Hoge2Context _context;

        public HogeMrbsController(Hoge2Context context)
        {
            _context = context;
        }

        [HttpGet("list")]
        public ActionResult<IEnumerable<HogeMrb>> List()
        {
            return _context.HogeMrbs.ToList();
        }
    }
}

Dataフォルダを作成してまとめる

Server.Dataフォルダ配下に
hogeConetext.cs

Shared配下に
hogeMrb.cs

※namespace　hoge_blazor2.Sharedにする
※Sharedはモデルを配置する

PageをClientに作成する

test.razor

@page "/test"
@using hoge_blazor2.Shared;
@inject HttpClient Http


<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (mrbs == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var mrb in mrbs)
            {
            <tr>
                <td>@mrb.MrbSkeyJya</td>
                <td>@mrb.MrbSkeyScd</td>
                <td>@mrb.MrbSkeyKik</td>
            </tr>
            }
        </tbody>
    </table>
}

@code {
    IEnumerable<HogeMrb> mrbs;

    protected override async Task OnInitializedAsync()
    {
        mrbs = await Http.GetFromJsonAsync<IEnumerable<HogeMrb>>("api/HogeMrbs/list");

    }
}