InertiaCore
v0.0.9
您可以查看這些示例，以便為您的新應用程序提供一些起點。
PM> Install-Package AspNetCore.InertiaCoredotnet 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" ) ;
} 您可以使用例如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
}
} ) ;
} ) ;您可以使用異步懶惰道具將數據異步加載到組件中。這對於加載頁面初始渲染不需要的數據很有用。
// 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.Input("src/main.tsx")助手來自動加載生成的樣式或腳本。您還可以使用@Vite.ReactRefresh()助手使用RECT時啟用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的打字稿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 >
