ब्लेज़र

कोर MVC में एकाधिक Blazor WebAssemblys ASP.NET परिनियोजित करें

पेज निर्माण की तारीख :

पर्यावरण

दृश्य स्टूडियो
  • विजुअल स्टूडियो 2019
.NET
  • .NET 5.0

पहले

यह युक्तियाँ "ASP.NET कोर MVC दृश्य में Blazor WebAssembly चल रहा है" का आपका ज्ञान मानता है, इसलिए यदि आप नहीं जानते कि ASP.NET कोर MVC पर Blazor असेंबली कैसे चलाएं, तो वह आलेख देखें।

पिछली विधि आपको केवल एक ब्लाज़ोर असेंबली रखने की अनुमति देती है, इसलिए यह टिप्स आपको एक से अधिक रखने की अनुमति देता है।

दो Blazor असेंबली बनाएँ

आप यह सुनिश्चित कर सकते हैं कि दो ब्लाज़ोर असेंबली क्रमशः चल रहे हैं, ताकि आप जो कुछ भी ब्लाज़ोर असेंबली है वह कर सकें। कृपया इसे इतना करें कि आप कुछ समय के लिए अंतर देख सकें। यहां, परियोजना की प्रारंभिक स्थिति के लिए बाएं मेनू का रंग बदल दिया गया है।

प्रत्येक प्रोजेक्ट प्रकाशित करें और फ़ाइल तैयार करें।

एक ASP.NET कोर MVC प्रोजेक्ट बनाएँ

यह भी एक परियोजना बनाने के लिए पहले युक्तियों पर आधारित है। एक बार जब आप अपनी परियोजना बना लेते हैं, तो 'NuGet में Microsoft.AspNetCore.Components.WebAssembly.Server ' जोड़ें।

_Layout.cshtml को ठीक करें

यह पिछली बार की तरह ही है।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - AspNetCoreMvc</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" />
  @* 追加 *@
  @await RenderSectionAsync("Styles", required: false)
</head>
<body>
  <!-- 以下同じなので省略 -->

दो Blazor असेंबली के लिए पृष्ठ जोड़ें

इस बार, हमारे पास प्रत्येक ब्लाज़ोर असेंबली को दिखाने के लिए दो विचार होंगे।

HomeController में दो क्रियाएँ जोड़ें. फिर से, सर्वर पक्ष विशेष रूप से कुछ भी नहीं करता है, इसलिए बस दृश्य वापस करें।

होमकंट्रोलर.cs

// 省略

namespace AspNetCoreMvc.Controllers
{
  public class HomeController : Controller
  {
    // 省略

    // 追加
    public IActionResult Blazor1()
    {
      return View();
    }

    public IActionResult Blazor2()
    {
      return View();
    }
  }
}

कोई दृश्य जोड़ने के लिए क्रिया को राइट-क्लिक करें. कृपया दो के लिए जाओ।

दृश्य बनाया गया है।

सबसे पहले, पहली ब्लाज़ोर असेंबली स्थापित करें।

Blazor1.cshtml

@{
  ViewData["Title"] = "Blazor1";
}
@section Styles {
  <base href="/Home/Blazor1/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample1.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

पिछले एक से अलग बात यह है कि आधार टैग की सामग्री से बनी है<base href="/" />। <base href="/Home/Blazor1/" />

यदि आप इस पथ को परिवर्तित करते हैं, तो Blazor असेंबली प्रत्येक फ़ाइल, जैसे dll, को किसी संबंधित पथ में इस पथ के रूट के रूप में संदर्भित करने में सक्षम होगा.

हालाँकि, वर्तमान Blazor असेंबली विनिर्देशन निर्दिष्ट करता है कि नियंत्रक और क्रिया एक ही पथ है, क्योंकि यदि MVC क्रिया द्वारा निर्धारित URL इस आधार के होस्ट से संबंधित पथ से मेल नहीं खाता है, तो Blazor असेंबली लोड करते समय विफल हो जाएगा।

वैसे, इस पथ का मामला प्रभावित होता है, इसलिए यदि URL स्वचालित रूप से लोअरकेस है, तो इसे लोअरकेस होना चाहिए।

Blazor2.cshtml संपादित करें के रूप में अच्छी तरह से. Blazor1.cshtml कृपया ध्यान दें कि यह से कुछ अलग है।

Blazor2.cshtml

@{
  ViewData["Title"] = "Blazor2";
}
@section Styles {
  <base href="/Home/Blazor2/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample2.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

एक लिंक जोड़ें ताकि आप ब्लाज़ोर के पृष्ठ पर नेविगेट कर सकें.

index.cshtml

@{
  ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@* 追加 *@
<ul>
  <li><a asp-action="Blazor1">Blazor1</a></li>
  <li><a asp-action="Blazor2">Blazor2</a></li>
</ul>

स्टार्टअप.cs परिवर्तन

Blazor WebAssembly का मार्ग पथ परिवर्तित करता है, इसलिए इसे प्रत्येक पथ के लिए सक्षम करें.

app.UseBlazorFrameworkFiles("/Home/Blazor1");
app.UseBlazorFrameworkFiles("/Home/Blazor2");

Blazor WebAssembly परिनियोजन

पिछली बार, मैंने प्रकाशित फ़ाइल को wwwroot में रखा था क्योंकि यह था, लेकिन चूंकि मैंने प्रत्येक पृष्ठ पर आधार टैग के लिए एक पथ निर्दिष्ट किया है, इसलिए मैं wwwroot में एक समान पथ के साथ एक फ़ोल्डर बनाता हूं।

प्रत्येक फ़ोल्डर के लिए प्रकाशित फ़ाइल के wwwroot की सामग्री की प्रतिलिपि बनाएँ। पहले की तरह index.html , इसकी आवश्यकता नहीं है।

फाँसी

यह सुनिश्चित करने के लिए चलाएँ कि प्रत्येक पृष्ठ पर blazor WebAssembly ठीक से काम कर रहा है।

ASP.NET कोर MVC दृश्य के साथ Blazor WebAssembly चलाएँ