InertiaCore
v0.0.9
Anda dapat memeriksa contoh -contoh ini untuk memiliki beberapa titik awal untuk aplikasi baru Anda.
PM> Install-Package AspNetCore.InertiaCoredotnet add package AspNetCore.InertiaCore Anda perlu menambahkan beberapa baris ke file Program.cs atau Starup.cs .
using InertiaCore . Extensions ;
[ .. . ]
builder . Services . AddInertia ( ) ;
[ .. . ]
app . UseInertia ( ) ; Buat file /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 >Anda dapat mengubah file tampilan root menggunakan:
builder . Services . AddInertia ( options =>
{
options . RootView = "~/Views/Main.cshtml" ;
} ) ; Untuk meneruskan data ke komponen halaman, gunakan Inertia.Render() .
public async Task < IActionResult > Index ( )
{
var posts = await _context . Posts . ToListAsync ( ) ;
var data = new
{
Posts = posts ,
} ;
return Inertia . Render ( "Posts" , data ) ;
} Untuk membuat titik akhir formulir, ingatlah untuk menambahkan [FromBody] ke parameter model Anda, karena data permintaan dilewati menggunakan 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" ) ;
} Anda dapat menambahkan beberapa data bersama ke tampilan Anda menggunakan misalnya tiddwares:
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
}
} ) ;
} ) ;Anda dapat menggunakan alat peraga malas async untuk memuat data secara tidak sinkron di komponen Anda. Ini berguna untuk memuat data yang tidak diperlukan untuk render awal halaman.
// 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 ) ;
}
Jika Anda ingin mengaktifkan SSR di aplikasi inersia Anda, ingatlah untuk menambahkan Inertia.Head() ke tata letak Anda:
@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 >dan mengaktifkan opsi 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
} ) ; Kelas helper vite tersedia untuk secara otomatis memuat gaya atau skrip yang Anda hasilkan hanya dengan menggunakan helper @Vite.Input("src/main.tsx") . Anda juga dapat mengaktifkan HMR saat menggunakan React dengan menggunakan helper @Vite.ReactRefresh() . Ini berpasangan dengan paket NPM laravel-vite-plugin .
Untuk memulai dengan Helper Vite, Anda harus menambahkan satu baris lagi ke file Program.cs atau 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" ;
} ) ; Berikut adalah contoh untuk aplikasi reaksi naskah dengan HMR:
@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 > Dan di sini adalah vite.config.js yang sesuai
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 ,
} ,
} ) ;Berikut adalah contoh untuk aplikasi TypeScript Vue dengan Hot Reload:
@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 > Dan di sini adalah vite.config.js yang sesuai
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 ,
} ,
} ) ;Berikut adalah contoh yang hanya menghasilkan satu file 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 >
