InertiaCore 다운로드 - InertiaCore 소스 코드 다운로드

inertia.js asp.net 어댑터

특징

유효성 검사 오류 처리.
공유 데이터.
부분 및 비동기 게으른 소품.
서버 측 렌더링.
vite 도우미.
관계 데이터 직렬화가있는 사이클 안전 모델.
패치를 올바르게 작동 시키고 리디렉션을 넣고 삭제합니다 .

예

이 예제를 확인하여 새 응용 프로그램의 시작점이 있습니다.

vue -nejcbw/inertiacorevuetemplate
React -Nicksoftware/React-AspnetCore-Inertiajs

설치

패키지 관리자 사용 : PM> Install-Package AspNetCore.InertiaCore
.NET CLI 사용 : dotnet add package AspNetCore.InertiaCore

시작하기

Program.cs 또는 Starup.cs 파일에 몇 줄을 추가해야합니다.

 using InertiaCore . Extensions ;

[ .. . ]

builder . Services . AddInertia ( ) ;

[ .. . ]

app . UseInertia ( ) ;

용법

프론트 엔드

파일 /Views/App.cshtml 을 만듭니다.

@using InertiaCore
<!DOCTYPE html >
< html >
< head >
    < meta charset =" utf-8 " />
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
    < title inertia > My App </ title >
</ head >
< body >
@await Inertia.Html(Model)

< script src =" /js/app.js " > </ script >
</ body >
</ html >

다음을 사용하여 루트보기 파일을 변경할 수 있습니다.

 builder . Services . AddInertia ( options =>
{
    options . RootView = "~/Views/Main.cshtml" ;
} ) ;

백엔드

데이터 구성 요소로 데이터를 전달하려면 Inertia.Render() 사용하십시오.

    public async Task < IActionResult > Index ( )
    {
        var posts = await _context . Posts . ToListAsync ( ) ;
        
        var data = new
        {
            Posts = posts ,
        } ;
        
        return Inertia . Render ( "Posts" , data ) ;
    }

양식 엔드 포인트를 만들려면 요청 데이터가 JSON을 사용하여 전달되므로 모델 매개 변수에 [FromBody] 추가하십시오.

    [ HttpPost ]
    public async Task < IActionResult > Create ( [ FromBody ] Post post )
    {
        if ( ! ModelState . IsValid )
        {
            // The validation errors are passed automatically.
            return await Index ( ) ;
        }
        
        _context . Add ( post ) ;
        await _context . SaveChangesAsync ( ) ;
        
        return RedirectToAction ( "Index" ) ;
    }

특징

공유 데이터

예를 들어 Middlewares와 같은 일부 공유 데이터를 뷰에 추가 할 수 있습니다.

 using InertiaCore ;

[ .. . ]

app . Use ( async ( context , next ) =>
{
    var userId = context . Session . GetInt32 ( "userId" ) ;
    
    Inertia . Share ( "auth" , new
    {
        UserId = userId
    } ) ;
    
    // Or
    
    Inertia . Share ( new Dictionary < string , object ? >
    {
        [ "auth" ] => new
        {
            UserId = userId
        }
    } ) ;
} ) ;

비동기 게으른 소품

Async Lazy Props를 사용하여 구성 요소에 데이터를 비동기로로드 할 수 있습니다. 이는 페이지의 초기 렌더링에 필요하지 않은 데이터를로드하는 데 유용합니다.

 // simply use the LazyProps the same way you normally would, except pass in an async function

    public async Task < IActionResult > Index ( )
    {
        var posts = new LazyProp ( async ( ) => await _context . Posts . ToListAsync ( ) ) ;
        
        var data = new
        {
            Posts = posts ,
        } ;
        
        return Inertia . Render ( "Posts" , data ) ;
    }

서버 측 렌더링

관성 앱에서 SSR을 활성화하려면 레이아웃에 Inertia.Head() 를 추가하십시오.

@using InertiaCore
<!DOCTYPE html >
< html >
< head >
    < meta charset =" utf-8 " />
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
    < title inertia > My App </ title >
    
    @await Inertia.Head(Model)
</ head >
< body >
@await Inertia.Html(Model)

< script src =" /js/app.js " > </ script >
</ body >
</ html >

SSR 옵션을 활성화합니다.

 builder . Services . AddInertia ( options =>
{
    options . SsrEnabled = true ;
    
    // You can optionally set a different URL than the default.
    options . SsrUrl = "http://127.0.0.1:13714/render" ; // default
} ) ;

vite 도우미

vite 헬퍼 클래스는 @Vite.Input("src/main.tsx") 도우미를 사용하여 생성 된 스타일 또는 스크립트를 자동으로로드 할 수 있습니다. @Vite.ReactRefresh() 도우미를 사용하여 React를 사용할 때 HMR을 활성화 할 수도 있습니다. 이것은 laravel-vite-plugin NPM 패키지와 잘 어울립니다.

Vite 도우미를 시작하려면 Program.cs 또는 Starup.cs 파일에 한 줄을 추가해야합니다.

 using InertiaCore . Extensions ;

[ .. . ]

builder . Services . AddViteHelper ( ) ;

// Or with options (default values shown)

builder . Services . AddViteHelper ( options =>
{
    options . PublicDirectory = "wwwroot" ;
    options . BuildDirectory = "build" ;
    options . HotFile = "hot" ;
    options . ManifestFilename = "manifest.json" ;
} ) ;

예

다음은 HMR이있는 TypeScript React App의 예입니다.

@using InertiaCore
@using InertiaCore.Utils
<!DOCTYPE html >
< html >
  < head >
    < meta charset =" utf-8 " />
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
    < title inertia > My App </ title >
  </ head >
  < body >
    @* This has to go first, otherwise preamble error *@
    @Vite.ReactRefresh()
    @await Inertia.Html(Model)
    @Vite.Input("src/main.tsx")
  </ body >
</ html >

그리고 여기에 해당 vite.config.js 가 있습니다

 import { defineConfig } from "vite" ;
import react from "@vitejs/plugin-react" ;
import laravel from "laravel-vite-plugin" ;
import path from "path" ;
import { mkdirSync } from "fs" ;

// Auto-initialize the default output directory
const outDir = "../wwwroot/build" ;

mkdirSync ( outDir , { recursive : true } ) ;

// https://vitejs.dev/config/
export default defineConfig ( {
  plugins : [
    laravel ( {
      input : [ "src/main.tsx" ] ,
      publicDirectory : outDir ,
    } ) ,
    react ( ) ,
  ] ,
  resolve : {
    alias : {
      "@" : path . resolve ( __dirname , "src" ) ,
    } ,
  } ,
  build : {
    outDir ,
    emptyOutDir : true ,
  } ,
} ) ;

다음은 Hot Reload가있는 TypeScript vue 앱의 예입니다.

@using InertiaCore
@using InertiaCore.Utils
<!DOCTYPE html >
< html >
  < head >
    < meta charset =" utf-8 " />
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
    < title inertia > My App </ title >
  </ head >
  < body >
    @await Inertia.Html(Model)
    @Vite.Input("src/app.ts")
  </ body >
</ html >

그리고 여기에 해당 vite.config.js 가 있습니다

 import { defineConfig } from 'vite' ;
import vue from '@vitejs/plugin-vue' ;
import laravel from "laravel-vite-plugin" ;
import path from "path" ;
import { mkdirSync } from "fs" ;

const outDir = "../wwwroot/build" ;

mkdirSync ( outDir , { recursive : true } ) ;

export default defineConfig ( {
  plugins : [
    laravel ( {
      input : [ "src/app.ts" ] ,
      publicDirectory : outDir ,
      refresh : true ,
    } ) ,
    vue ( {
      template : {
        transformAssetUrls : {
          base : null ,
          includeAbsolute : false ,
        } ,
      } ,
    } ) ,
  ] ,
  resolve : {
    alias : {
      "@" : path . resolve ( __dirname , "src" ) ,
    } ,
  } ,
  build : {
    outDir ,
    emptyOutDir : true ,
  } ,
} ) ;

다음은 단일 CSS 파일을 생성하는 예입니다.

@using InertiaCore
@using InertiaCore.Utils
<!DOCTYPE html >
< html >
  < head >
    < meta charset =" utf-8 " />
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
  </ head >
  < body >
    @await Inertia.Html(Model)
    @Vite.Input("src/main.scss")
  </ body >
</ html >