Share razor library between blazor wasm and .net maui blazor project – (1/2)

Published Oct 11, 2022 | Updated Oct 12, 2022 | 0 comments

Blazor WebAssembly 환경으로 이미 개발된 서비스가 있는 경우 .Net MAUI 를 사용해서 모바일 및 더 많은 환경을 지원하기 위해 추가 개발을 하는 경우
이미 작성된 razor 페이지 또는 라이브러리를 재활용하기 위한 샘플 소스를 만들어 보겠습니다.

1부 – https://blog.kkomzi.net/26405

새 솔루션과 Blazor WebAssembly 형식의 프로젝트를 생성한 다음 기본 템플릿을 그대로 사용합니다.
RCL(Razor class library) 프로젝트를 추가한 다음 공유할 항목들을 RCL 프로젝트로 이동해서 참조하게 수정합니다.

2부 – https://blog.kkomzi.net/26442

.Net MAUI Blazor 프로젝트를 추가한 다음 RCL 프로젝트를 참조해서 동일한 UI 를 구성해 보겠습니다.

참고로 Visual studio 2022 가 7.3 버전부터 MAUI 를 공식 지원하게 되면서 해당 버전 이후로 업데이트를 하게 되면 Preview 버전을 굳이 설치하지 않아도 된다고 합니다.

Visual Studio 2022 17.3 is now available! – Visual Studio Blog (microsoft.com)

Blazor WebAssembly 프로젝트 추가

Visual studio 를 실행해서 Blazor WebAssembly 프로젝트를 추가합니다.

솔루션 이름과 프로젝트 이름도 다음과 같이 지정합니다(네임스페이스를 동일하게 해서 이후 설명하는 코드와 동일하게 하기 위함 입니다)

그러면 다음과 같은 구조를 솔루션이 생성됩니다.

이 상태에서 실행을 해보면 다음과 같이 기본 템플릿 형식으로 실행되는 것을 확인하실 수 있습니다.

Razor 클래스 라이브러리 프로젝트 추가

솔루션 탐색기에서 RCL 프로젝트를 추가합니다.

불필요한 항목(background.png, exampleJsInterop.js, Component1.razor, ExampleJsInterop.cs) 을 삭제해서 정리합니다.(삭제하지 않아도 괜찮지만, 지저분해서 정리합니다.)

Wasm 프로젝트는 솔루션 폴더에 하나로 모아 놓으면 다음과 같은 형태의 솔루션이 구성됩니다.

공유할 항목들을 RCL 프로젝트로 이동합니다.

Wasm Client 프로젝트의 Page, Shared 폴더를 솔루션 탐색기에서 잘라내기 한 다음 RCL 프로젝트에 붙여넣기 합니다.
Wasm Client 프로젝트의 wwwroot 폴더 하위의 항목들도 index.html 파일만 제외하고 모두 이동합니다.

공유 프로젝트를 참조해서 정상 동작할 수 있게 솔루션을 수정합니다.

프로젝트 참조 추가

Wasm Client 프로젝트에 RCL 프로젝트를 프로젝트 참조로 추가합니다.

RCL 프로젝트에 BlazorWasm.Shared 프로젝트를 프로젝트 참조로 추가합니다.

소스 코드 수정

RCL 프로젝트의 _Imports.razor 파일을 수정합니다.

@using Microsoft.AspNetCore.Components.Routing 의 경우 NavLink 태그 때문에 추가가 필요합니다.

@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Routing

@using BlazorWasm.Shared
@using System.Net.Http.Json

Wasm Client 프로젝트의 App.razor 파일을 수정합니다.

AdditionalAssemblies=”new[] { typeof(MainLayout).Assembly}” 항목을 추가하였습니다

<Router AppAssembly="@typeof(App).Assembly" AdditionalAssemblies="new[] { typeof(MainLayout).Assembly}">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Wasm Client 프로젝트의 _Imports.razor 파일을 수정합니다.

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using BlazorWasm.Client
@using RazorClassLibrary
@using RazorClassLibrary.Shared

Wasm Client 프로젝트의 index.html 파일을 수정합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorWasm</title>
    <base href="/" />

    <link rel="icon" type="image/x-icon" href="_content/RazorClassLibrary/favicon.ico">
    <link href="_content/RazorClassLibrary/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="_content/RazorClassLibrary/css/app.css" rel="stylesheet" />
    <link href="BlazorWasm.Client.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

정상동작 확인

다시 실행해서 정상 동작 하는지 확인합니다.

Learn more on this topic

Related Blog Posts

Join in the conversation

Leave a Comment

0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

무료 온라인 전광판

전광판

텍스트를 입력하고 텍스트 효과 및 배경효과 를 변경해서 전체화면으로 표시할 수 있는 전광판 용도로 사용하실 수 있습니다. 각종 스포츠 및 공연 관람시 응원 용도로 사용이 가능합니다.

Carousel

여러개의 슬라이드를 추가하여 프레젠테이션 및 이미지 슬라이드 용도로 사용하실 수 있습니다. 브라우저가 포함된 IT 기기로 큰 모니터에 연결하여 매장 내 공지사항 및 메뉴소개를 이미지로 표시할 수 있습니다.

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares