ASP.NET Blazor 사용

ASP.네트워크 Core 애플리케이션을 통해 호스트 Blazer 애플리케이션을 제작하는 기본 절차를 기재하고 싶습니다.
신축 공사
WebAssiembly 응용 프로그램 선택


※ASP.NET Core 호스트
　　⇒ASP.프로젝트에 포함된 NET Core 실행 시간 옵션
※ 웹 애플리케이션별
□ Progressive Web Application(PWA)은 웹 서버를 통해 전송되는 웹 애플리케이션을 말하면서 스마트폰 애플리케이션과 같은 동작을 구현한 애플리케이션
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 및 해당 테이블의 모델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();
        }
    }
}

데이터 폴더 생성 및 병합
Server.데이터 폴더 아래
hogeConetext.cs
Shared 밑에 있어요.
hogeMrb.cs
※namespace　hoge_blazor2.단식으로 바꾸다
※ Shared 구성 모델
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 프로젝트 구조 정보
견본을 참고하다