Загрузка InertiaCore - InertiaCore исходный код скачать

Инерция.js ASP.NET Adapter

Функции

Обработка ошибок проверки.
Общие данные.
Частичный и асинхровый ленивый реквизит.
Рендеринг на стороне сервера.
Взгляд вспомогательный.
Модель-велосипедная модель с сериализацией данных.
Правильно работающий патч , положите и удаляйте перенаправления.

Примеры
Установка
Начиная
Использование
- Внешний интерфейс
- Бэкэнд
Функции
- Общие данные
- Асинхровый ленивый реквизит
- Рендеринг на стороне сервера
- Взгляд вспомогательный
  - Примеры

Примеры

Вы можете проверить эти примеры, чтобы иметь некоторую отправную точку для вашего нового приложения.

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

Чтобы сделать конечную точку формы, не забудьте добавить [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
        }
    } ) ;
} ) ;

Асинхровый ленивый реквизит

Вы можете использовать Async Lazy Reps, чтобы асинхронно загружать данные в ваши компоненты. Это полезно для загрузки данных, которые не нужны для первоначального визуализации страницы.

 // 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 Helper для автоматической загрузки ваших сгенерированных стилей или сценариев, просто используя помощник @Vite.Input("src/main.tsx") . Вы также можете включить HMR при использовании React, используя помощник @Vite.ReactRefresh() . Это хорошо сочетается с пакетом NPM laravel-vite-plugin .

Чтобы начать работу с помощником 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" ;
} ) ;

Примеры

Вот пример для приложения REACT TypeScript с 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 >

И вот соответствующий 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 TypeScript с горячей перезагрузкой:

@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 >