ASP.NET Blazorを使ってみる

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


#新しいプロジェクト
WebAssemblyアプリを選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311177/0ccdbaef-11e6-45d4-c51b-bb201bbcad05.png)




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311177/742469f6-7e08-507a-ff9e-624d070e3ff6.png)

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

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



###NnGet

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311177/23c1ccb2-1584-1eee-dfed-c068299bb2cb.png)



###appsettings.jsonへ接続登録
```hoge.json
  "ConnectionStrings": {
    "DefaultConnection": "Data Source=DBSVNAME;Initial Catalog=DBNAME;Integrated Security=True"
  }

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311177/9202a04c-da2c-351e-5534-aec52607da2c.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311177/581c85c2-31aa-f25b-8e98-83e530604151.png)

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

```
###DBNAMEContext.csと該当のテーブルのModel.csが出来上がる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311177/d7d079c1-7bbb-a528-ca07-c2905f8b5886.png)


###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")));

        }
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311177/f73f76ff-5d1d-accf-ab2a-2418ba40296f.png)


###MVCコントローラーの追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311177/7da61bd2-5668-986c-9dc8-6c5899328cfd.png)



![controller.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2311177/444d1ddc-8f2d-dcd1-d0a1-87e333a78bb8.png)


```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");

    }
}

```


###Microsoft認証をはずす


##参考

###Blazorのプロジェクト構造について
https://blazor-master.com/project-structure/

###参考サンプル
https://mseeeen.msen.jp/asp-dotnet-core-blazor-preview9-ef-core-sqlserver/

https://www.shotoro.com/entry/2020/07/23/002126