8/17(월) 6일차 C#.Net 교육

깍두기의 하루,,

Blazor

Hosting mode

1. Server

2. Web Assembly

 

 

------

Server Hosting: Blazor Server Project 생성

 

Model coding: Data - WeatherForecast.cs 파일 수정

namespace DemoServer1.Data;
public class WeatherForecast
{
    public DateTime Date { get; set; }

    public int TemperatureC { get; set; }

    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

    public string? Summary { get; set; }
}

// Modet -> DTO(networt단) -> servicePacket -> data service
public class Person
{
    public int Id { get; set; } = default(int);

    public int Age { get; set; } = default(int);

    public string Name { get; set; } = default(string);

    public bool Gender { get; set; } = default(bool);
}

 

Data Service coding: Data - WeatherForecastService.cs 파일 수정

namespace DemoServer1.Data;
public class WeatherForecastService
{
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
    {
        return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
        }).ToArray());
    }
}


// data service (service 코딩)
public class PersonService
{
    public Task<Person[]> GetPersonAsync()
    {
        return Task.FromResult(Enumerable.Range(1, 5).Select(index => new Person
        {
            Id = index+1,
            Age = Random.Shared.Next(20, 70),
            Name = $"heleleNamd:{index}",
            Gender = index%2==0
        }).ToArray());
    }
}

 

container 등록: Program.cs 파일(builder 객체) 수정

using DemoServer1.Data;
using Microsoft.AspNetCore.Components;

// host service(객체)
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
// service registration,  middleWare service
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>(); // singleton: glober별로
builder.Services.AddScoped<PersonService>(); // scoped service: session별로
//builder.Services.AddTransient<PersonService>(); // Transient service: 한번 쓰고 버림

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();


app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

 

Pages - Person.razor file 생성

 

 

Shared - NarMenu.razor 파일 수정

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">DemoServer1</a>
    <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
		
        private DemoServer1.Data.Person[]? people;// = new Person[5];
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="persondata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Person data
            </NavLink>
        </div>

    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

 

using문 어디로 옮기라고 했는데

 

2. Blazor Assembly project 생성

.Server - Controllers - WeatherController.cs 파일 수정???

 

 

.Server - Controllers - PersonController.cs class 생성

 

.Client - Pages - Person.razor 파일 생성(Add razor component) - Blazor Server의 Person.razor 복붙

 

 

무슨 컴퓨터 학원 컴퓨터에서 visual studio가 제대로 안 돌아가냐;; html이나 razor file 열기만 해도 visual studio 멈춰서 자리 옮김;; 자리 옮기고 업데이트 이런거 한다고 못 따라감 오늘도 나는 깍두기다 개열받음;;;;;;;;

 

 

 

 

-----------

Assembly Hosting - Blazor Assembly Project 생성

 

wwwroot - sample-data - person.json 파일 생성

{
  {
    "id": 1,
    "age": 11,
    "name": "leebok1",
    "gender": true
  },
  {
    "id": 2,
    "age": 22,
    "name": "leebok2",
    "gender": false
  },
  {
    "id": 3,
    "age": 33,
    "name": "leebok3",
    "gender": true
  },
  {
    "id": 4,
    "age": 44,
    "name": "leebok4",
    "gender": false
  }
}

 

Pages - Person.razor 생성 -> 젤 처음 만든 project의 person.razor 복붙

 

기존에 만들어뒀던 SERVER - Shared - NarMenu.razor 파일 수정

 

 

Properties - launchSettings.json에서 port 바꿔주기

  "profiles": {
    "DemoWasm2": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:5011;http://localhost:5010",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },

   - port 같이 쓰게 되면 cache 쌓여서 오류나기 때문

 

 

* NarMenu.razor 파일에서 사용할 icon

Open Iconic • Iconify

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>

        private DemoServer1.Data.Person[]? people;// = new Person[5];
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="persondata">
                <span class="oi oi:people" aria-hidden="true"></span> Person data
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="todo">
                <span class="oi oi-star" aria-hidden="true"></span> Todo
             </NavLink>
        </div>

<span class=" oi oi-star " aria-hidden="true"></span> Todo 부분에서 oi-star(oi-cloudy) 부분에 해당

 

 

 

 

 

 

-----

Blazor Todo List app build

Blazor 할 일 목록 앱 빌드

 

Pages/Todo.razor

    - NuGet Package Manager - system.collection.Immutable Install

@page "/todo"
@using System.Collections.Immutable

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todos)
    {
        //li>@todo.Title</li>
        <input type="checkbox" (@bind="todo.IsDone")/>
        <input @bind="todo.Title" />
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" /> //버튼 생성
<button @onclick="AddTodo">Add todo</button> //click event 추가

@code {
    //private List<TodoItem> todos = new();
    ImmutableList<TodoItem> todos = ImmutableList<TodoItem>().Empty; //type 작업
    
    private string newTodo;
    
    private void AddTodo() //event 함수 생성
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            //todos.Add(new TodoItem { Title = newTodo }); immutable 객체이기 때문에 에러
            todos = todos.Add(new() { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

 

Layout templet

Grid system

 

 

 

 

-----

FLUXOR

GitHub - mrpmorris/Fluxor: Fluxor is a zero boilerplate Flux/Redux library for Microsoft .NET and Blazor.

 

NuGet Package Manager: fluxor Install

 

wwwroot - index.html 파일에 코드 추가

<script src="_content/Fluxor.Blazor.web/scripts/index.js"></script>

 

App.razor 파일에 코드 추가

<Fluxor.Blazor.Web.StoreInitializer/>

 

Program.cs 파일 코드 수정

using DemoWasm2;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Fluxor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");


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

builder.Services.AddFluxor(config =>
{
    //config.ScanAssemblies(typeof(Program).Assembly).UseReduxDevTools();
});

await builder.Build().RunAsync();

 

Store 폴더 생성 - CounterState.cs 클래스 생성

namespace DemoWasm2.Store;

// Immutable object, type_service
public record CounterState
{
    public int Count { get; init; }
}

// Redux service - Action Type
public record AddCounter
{
}
public record Add10Counter
{
}
public record Add100Counter
{
}



// business-logic operation
public static class CounterReducer
{
    [ReducerMethod]
    public static CounterState OnAddCounter(CounterState state, AddCounter action)
    {
        return state with { Count = state.Count + 1 };
    }

    [ReducerMethod]
    public static CounterState OnAddCounter(CounterState state, AddCounter action)
    {
        return state with { Count = state.Count + 10 };
    }

    [ReducerMethod]
    public static CounterState OnAddCounter(CounterState state, AddCounter action)
    {
        return state with { Count = state.Count + 100 };
    }
}


// redux service Type
public class CounterFeatureState : Feature<CounterState>
{
    public override string GetName() => nameof(CounterState);
    protected override CounterState GetInitialState()
    {
        return new CounterState
        {
            Count = 0
        };
    }
}

 

Pages - Counter.razor

@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@inject IState<CounterState> CounterState
@inject IDispatcher Dispatcher

 

<redux refference>

야무의 React 러닝 가이드

Redux 시작하기 | Redux

 

 

 

 

-----

New REDUX(.Net 5.0) - 6.0에서 오류나서,, 근데 이것두 깍두기

Redux tool install

Redux DevTools

Fluxor

GitHub - mrpmorris/Fluxor: Fluxor is a zero boilerplate Flux/Redux library for Microsoft .NET and Blazor.

 

Blazor WebAssembly Project 생성

 

Index.razor

@page "/"

<div class="container">
  <div class="row">
    <div class="col">
      <Counter/>
    </div>
    <div class="col">
      <Counter/>
    </div>
    <div class="col">
      <Counter/>
    </div>
    <div class="col">
      <Counter/>
    </div>
  </div>
</div>

 

NuGet Package Manager

    - fluxot.blazor.web

    - fluxor.blazor.web.reduxdevtools

 

Index.razor 

 

App.razor

 

Program.cs

 

 

 

 

 

----- 

 Blazor Syntax

 

0. ASP.NET Core용 Razor 구문 참조 | Microsoft Docs

ASP.NET Core용 Razor 구문 참조

1. Blazor 할 일 목록 앱 빌드 | Microsoft Docs

Blazor 할 일 목록 앱 빌드

1-2. Blazor와 함께 ASP.NET Core SignalR 사용 | Microsoft Docs

Blazor와 함께 ASP.NET Core SignalR 사용

2. ASP.NET Core Blazor 라우팅 | Microsoft Docs

ASP.NET Core Blazor routing

3. ASP.NET Core Razor 구성 요소 | Microsoft Docs

ASP.NET Core Razor 구성 요소

4. ASP.NET Core Blazor 연계 값 및 매개 변수 | Microsoft Docs

ASP.NET Core Blazor 연계 값 및 매개 변수

5. ASP.NET Core Blazor 데이터 바인딩 | Microsoft Docs

ASP.NET Core Blazor 데이터 바인딩

6. ASP.NET Core Blazor 이벤트 처리 | Microsoft Docs

ASP.NET Core Blazor 이벤트 처리

7. ASP.NET Core Razor 구성 요소 수명 주기 | Microsoft Docs

ASP.NET Core Razor 구성 요소 수명 주기

8. ASP.NET Core Blazor 구성 요소 렌더링 | Microsoft Docs

ASP.NET Core Blazor component rendering

9. ASP.NET Core Blazor 구성 요소 가상화 | Microsoft Docs

ASP.NET Core Blazor 구성 요소 가상화

10. ASP.NET Core Blazor 템플릿 기반 구성 요소 | Microsoft Docs

ASP.NET Core Blazor 템플릿 기반 구성 요소

 

 

 

 

 

 

 

 

-----

Refference

 

- awesome blazor open source

GitHub - AdrienTorris/awesome-blazor: Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browse