ब्लेज़र

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

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

पर्यावरण

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

पहले

क्योंकि Blazor WebAssembly एक क्लाइंट तकनीक है, इससे कोई फर्क नहीं पड़ता कि वेब सर्वर कैसे काम करता है। हालाँकि, क्लाइंट के लिए WebAssembly की सेवा करने के लिए, कम से कम, सर्वर-साइड कॉन्फ़िगरेशन आवश्यक है। चलो Blazor WebAssembly में ASP.NET कोर MVC के रूप में सर्वर प्रोग्राम चलाते हैं।

एक Blazor WebAssembly बनाना

अब हमें बस यह सुनिश्चित करने की आवश्यकता है कि Blazor WebAssembly काम करता है, इसलिए हम इसे छोड़ देंगे क्योंकि यह तब था जब हमने परियोजना बनाई थी।

प्रोजेक्ट का नाम या समाधान नाम मनमाना है।

अतिरिक्त जानकारी स्क्रीन में प्रदर्शित "कोर पर होस्ट की गई ASP.NET" स्क्रीन एमवीसी के रूप में भी काम कर सकती है, लेकिन परिणामी परियोजना एपीआई सर्वर के करीब है, इसलिए हम इसे यहां जांच नहीं करेंगे।

प्रकाशन Blazor WebAssembly

किसी ASP.NET कोर MVC प्रोजेक्ट के लिए Blazor WebAssembly को परिनियोजित करने के लिए फ़ाइलें प्रकाशित करें।

प्रोजेक्ट पर राइट-क्लिक करें और प्रकाशित करें चुनें।

फ़ोल्डर्स का चयन करें.

डिफ़ॉल्ट प्रकाशन गंतव्य छोड़ दें.

प्रकाशित स्क्रीन प्रकट होता है। आप विभिन्न सेटिंग्स सेट कर सकते हैं, लेकिन अभी के लिए, "प्रकाशित करें" बटन को डिफ़ॉल्ट के रूप में छोड़ दिया गया है।

प्रकाशन प्रारंभ होने और सफलतापूर्वक पूर्ण होने की प्रतीक्षा करें. ध्यान दें कि लंबे फ़ोल्डर पथ विफल हो सकता है।

आप सत्यापित कर सकते हैं कि फ़ाइल निर्दिष्ट फ़ोल्डर में बनाई गई है। यदि यह एक सापेक्ष पथ के रूप में निर्दिष्ट किया गया है, तो गंतव्य प्रोजेक्ट के सापेक्ष है।

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

अगला, एक ASP.NET कोर MVC प्रोजेक्ट बनाएँ। Visual Studio को अलग से खोलना थकाऊ हो सकता है, इसलिए इसे Blazor WebAssembly समाधान के अंदर बनाएं। चूंकि इस बार दोनों प्रोजेक्ट आपस में नहीं जुड़े हैं, इसलिए अलग-अलग बनाए जाने पर भी कोई दिक्कत नहीं है।

प्रोजेक्ट का नाम वैकल्पिक है. अन्य सेटिंग्स उनके डिफ़ॉल्ट पर छोड़ दिए जाते हैं।

चूंकि Blazor पक्ष मानता है कि विकास पूरा हो गया है ASP.NET कोर MVC पक्ष पर परियोजना एक स्टार्टअप है।

Blazor असेंबली के लिए दृश्य बनाना

यह क्षेत्र उस परियोजना के आधार पर बदल जाएगा जिसे आप वास्तव में बना रहे हैं, इसलिए कृपया इसे उस परियोजना के अनुसार संशोधित करें। यहां, हम इसे नमूना परियोजना के कॉन्फ़िगरेशन के आधार पर संशोधित करेंगे।

मूल रूप से, जब आप Blazor असेंबली प्रकाशित करते हैं तो इसे बनाए गए एक जैसा दिखने के index.html लिए संशोधित किया जाना चाहिए।

फिक्सिंग _Layout.cshtml

मैं ब्लाज़ोर असेंबली के सीएसएस का संदर्भ देना चाहता हूं, इसलिए मैं इसे सीधे लिख सकता हूं। _Layout.cshtml हम चाहते हैं कि इसे केवल लक्ष्य पृष्ठ पर जितना संभव हो उतना लागू किया जाए, इसलिए हम इसे जोड़कर इसका विस्तार कर सकते हैं ताकि RenderSectionAsync सीएसएस के लिंक प्रत्येक पृष्ठ पर लिखे जा सकें।

<!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 असेंबली के लिए कोई पृष्ठ जोड़ें

Blazor असेंबली प्रदर्शित करने के लिए एक समर्पित पृष्ठ जोड़ें। ASP.NET कोर एमवीसी में सामान्य पृष्ठ जोड़ और प्रक्रिया समान हैं।

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

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

// 省略

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

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

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

बांधने के लिए कुछ भी नहीं है, इसलिए इसे जैसा है वैसा जोड़ें।

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

Blazor असेंबली के प्रकाशन के समय उत्पन्न का index.html उपयोग संदर्भित किया जाता है, हम इसे निम्नानुसार रीमेक करेंगे।

Blazor.cshtml

@{
  ViewData["Title"] = "Blazor";
}
@section Styles {
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample.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>
}

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

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>

@* 追加 *@
<a asp-action="Blazor">Blazor</a>

Microsoft.AspNetCore.Components.WebAssembly.Server संदर्भ जोड़ें

Startup.cs आपको आवश्यक कोड स्वयं लिखने की आवश्यकता नहीं है, लेकिन आसानी से आप NuGet से Microsoft.AspNetCore.Components.WebAssembly.Server प्राप्त करते हैं।

निर्भरताएँराइट-क्लिक करें, और NuGet पैकेज प्रबंधित करेंका चयन करें।

व्यवस्थापन टैब का चयन करें और खोज फ़ील्ड में Microsoft.AspNetCore.Components.WebAssembly.Server दर्ज करें।

एक ही नाम के साथ एक पैकेज प्रदर्शित किया जाता है, इसलिए इसे स्थापित करें।

सत्यापित करें कि पैकेज जोड़ा गया है।

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

app.UseHttpsRedirection(); पंक्ति के बाद पंक्ति पर निम्न कोड सम्मिलित करें:

app.UseBlazorFrameworkFiles();

Blazor WebAssembly परिनियोजित करना

असल में, आप प्रकाशित Blazor WebAssembly wwwroot फ़ोल्डर डाल सकते हैं क्योंकि यह ASP.NEt कोर के wwwroot फ़ोल्डर में है,index.html लेकिन आपको इसे हटा देना चाहिए क्योंकि अब इसकी आवश्यकता नहीं होगी। इसके अलावा, चूंकि डब किया गया हैfavicon.ico , यह तय करें कि किस आइकन का उपयोग करना है।

PWA के साथ जारी करते समय, यदि आपने wwwroot फ़ोल्डर में फ़ाइलों (जैसे अनुक्रमणिका.html) को बाहर रखा है, आपको एक पाठ संपादक में खोलने की आवश्यकता होगी, wwwroot फ़ोल्डर में भी, और बहिष्कृत फ़ाइल में service-worker-assets.js रिकॉर्ड को हटा दें। अन्यथा, जब आप कोई वेब स्क्रीन खोलते हैं तो आपको आंतरिक त्रुटि मिल सकती है.

जब आप एक Blazor एप्लिकेशन प्रकाशित करते हैं, तो आपको अपने प्रोजेक्ट से अनावश्यक फ़ाइलों को छोड़कर मैन्युअल रूप से ऐसा करने की आवश्यकता नहीं होती है।

PWAs के मामले में, आंतरिक त्रुटियाँ तब होती हैं जब वे https वातावरण में नहीं हैं। इसे PWA के रूप में स्थापित नहीं किया जा सकता.

निष्पादन पुष्टिकरण

ASP.NET डीबग कोर MVC प्रोजेक्ट चलाएँ। Blazor पृष्ठ पर जाएँ और सत्यापित करें कि Blazor असेंबली का लेआउट पृष्ठ में प्रकट होता है। बाएँ मेनू का चयन करें और सत्यापित करें कि प्रत्येक सुविधा काम करती है।

URL के बारे में

यदि आप पृष्ठ में प्रदर्शित Blazor Assembly left मेनू पर क्लिक करते हैं, तो आप देखेंगे कि URL बदल ता है। यह व्यवहार ASP.NET कोर MVC द्वारा अपेक्षित URL व्यवहार का पालन नहीं करता है, इसलिए यदि संभव हो, तो Blazor असेंबली अधिमानतः URL इस तरह से बनाना चाहिए कि URL परिवर्तित नहीं होता है।

जब आप कोई Blazor पृष्ठ खोलते हैं

जब आप काउंटर मेनू क्लिक करें

Changelog

2022/7/12
  • प्रकाशित Blazor अनुप्रयोग की फ़ाइल प्लेसमेंट में अनावश्यक फ़ाइलों को छोड़कर नोट करने के लिए अंक जोड़े गए।
2022/3/30
  • प्रथम संस्करण
आईआईएस में ब्लेज़र वेबसेम्बली में बनाए गए ऐप्स रखें
कोर MVC में एकाधिक Blazor WebAssemblys ASP.NET परिनियोजित करें