InertiaCore
v0.0.9
Vous pouvez consulter ces exemples pour avoir un point de départ pour votre nouvelle application.
PM> Install-Package AspNetCore.InertiaCoredotnet add package AspNetCore.InertiaCore Vous devez ajouter quelques lignes au fichier Program.cs ou Starup.cs .
using InertiaCore . Extensions ;
[ .. . ]
builder . Services . AddInertia ( ) ;
[ .. . ]
app . UseInertia ( ) ; Créez un fichier /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 >Vous pouvez modifier le fichier de vue racine en utilisant:
builder . Services . AddInertia ( options =>
{
options . RootView = "~/Views/Main.cshtml" ;
} ) ; Pour transmettre des données à un composant de page, utilisez Inertia.Render() .
public async Task < IActionResult > Index ( )
{
var posts = await _context . Posts . ToListAsync ( ) ;
var data = new
{
Posts = posts ,
} ;
return Inertia . Render ( "Posts" , data ) ;
} Pour faire un point de terminaison de formulaire, n'oubliez pas d'ajouter [FromBody] à votre paramètre de modèle, car les données de demande sont passées à l'aide de 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" ) ;
} Vous pouvez ajouter des données partagées à vos vues en utilisant par exemple 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
}
} ) ;
} ) ;Vous pouvez utiliser des accessoires paresseux asynchrones pour charger des données de manière asynchrone dans vos composants. Ceci est utile pour charger des données qui ne sont pas nécessaires pour le rendu initial de la page.
// 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 ) ;
}
Si vous souhaitez activer SSR dans votre application d'inertie, n'oubliez pas d'ajouter Inertia.Head() à votre mise en page:
@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 >et activer l'option 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
} ) ; Une classe Vite Helper est disponible pour charger automatiquement vos styles ou scripts générés en utilisant simplement l'assistance @Vite.Input("src/main.tsx") . Vous pouvez également activer HMR lors de l'utilisation de React en utilisant l'assistance @Vite.ReactRefresh() . Cela s'associe bien avec le paquet NPM laravel-vite-plugin .
Pour commencer avec Vite Helper, vous devrez ajouter une ligne de plus dans le fichier Program.cs ou 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" ;
} ) ; Voici un exemple pour une application React TypeScript avec 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 > Et voici le vite.config.js correspondant
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 ,
} ,
} ) ;Voici un exemple pour une application Vue TypeScript avec un rechargement chaud:
@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 > Et voici le vite.config.js correspondant
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 ,
} ,
} ) ;Voici un exemple qui produit juste un seul fichier 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 >
