ホーム>ASPソースコード>その他のカテゴリー
ダウンロード

inertia.js asp.netアダプター

特徴

  • 検証エラー処理。
  • 共有データ。
  • 部分的および非同期怠zyな小道具。
  • サーバー側のレンダリング。
  • Viteヘルパー。
  • 関係データシリアル化を備えたサイクルセーフモデル。
  • 適切に動作するパッチ、配置、削除リダイレクト。

目次

  • 例
  • インストール
  • はじめる
  • 使用法
    • フロントエンド
    • バックエンド
  • 特徴
    • 共有データ
    • 怠zyな小道具
    • サーバー側のレンダリング
    • Viteヘルパー
      • 例

例

これらの例をチェックして、新しいアプリケーションの出発点を確認できます。

  • Vue -nejcbw/inertiacorevuetemplate
  • React -Nicksoftware/React-AspnetCore-Inertiajs

インストール

  1. パッケージマネージャーの使用： PM> Install-Package AspNetCore.InertiaCore
  2. .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 ) ;
    }

フォームエンドポイントを作成するには、 [FromBody]モデルパラメーターに追加することを忘れないでください。要求データはJSONを使用して渡されます。 

    [ 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" ) ;
    }

特徴

共有データ

ミドルウェアなど、いくつかの共有データをビューに追加できます。 

 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
        }
    } ) ;
} ) ;

怠zyな小道具

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 ) ;
    }

サーバー側のレンダリング

inertiaアプリで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.Input("src/main.tsx")ヘルパーを使用するだけで、生成されたスタイルまたはスクリプトを自動的にロードできるViteヘルパークラスを利用できます。 @Vite.ReactRefresh()ヘルパーを使用して、Reactを使用するときにHMRを有効にすることもできます。これはlaravel-vite-plugin NPMパッケージとよくペアを付けます。

Viteヘルパーを開始するには、 Program.csまたはStarup.csファイルにもう1つのラインを追加する必要があります。 

 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アプリの例を次に示します。 

@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 ,
  } ,
} ) ;

ホットリロードを備えたタイプスクリプト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 >
拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて