بلازور

ASP.NET کور ایم وی سی میں متعدد بلازور ویب اسمبلیاں تعینات کریں

صفحہ تخلیق تاریخ :

ماحول

بصری سٹوڈیو
  • ویژیول سٹوڈیو 2019
.نیٹ
  • .نیٹ 5.0

پہلے تو

یہ تجاویز "ASP.NET کور ایم وی سی ویو میں بلازور ویب اسمبلی چلانے" کے بارے میں آپ کے علم کو فرض کرتی ہیں، لہذا اگر آپ نہیں جانتے کہ ASP.NET کور ایم وی سی پر بلازور اسمبلی کیسے چلائی جائے تو وہ مضمون دیکھیں۔

پچھلا طریقہ آپ کو صرف ایک بلازور اسمبلی رکھنے کی اجازت دیتا ہے، لہذا یہ تجاویز آپ کو ایک سے زیادہ رکھنے کی اجازت دیتی ہیں۔

دو بلازور اسمبلی بنائیں

آپ اس بات کو یقینی بنا سکتے ہیں کہ دونوں بلازور اسمبلی بالترتیب چل رہی ہیں، تاکہ آپ بلازور اسمبلی جو بھی ہو کر سکیں۔ براہ کرم اسے بنائیں تاکہ آپ فی الحال فرق دیکھ سکیں۔ یہاں، منصوبے کی ابتدائی حالت کے لئے بائیں مینو کا رنگ تبدیل کیا جاتا ہے۔

ہر پروجیکٹ شائع کریں اور مسل تیار کریں۔

ASP.NET کور ایم وی سی پروجیکٹ بنائیں

یہ ایک منصوبہ بنانے کے لئے پہلے کے ٹوٹکوں پر بھی مبنی ہے۔ ایک بار جب آپ اپنا پروجیکٹ بنا لیں تو 'نیو گیٹ میں Microsoft.AspNetCore.Components.WebAssembly.Server ' شامل کریں۔

_Layout سی ایس ایچ ٹی ایم ایل ٹھیک کریں

یہ پچھلی بار کی طرح ہی ہے۔

<!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>
  <!-- 以下同じなので省略 -->

دو بلازور اسمبلی کے صفحات شامل کریں

اس بار، ہمارے پاس ہر بلازور اسمبلی کو دکھانے کے لئے دو خیالات ہوں گے۔

HomeController میں دو اعمال شامل کریں۔ پھر، سرور سائیڈ خاص طور پر کچھ نہیں کرتا ہے، لہذا صرف نظارہ واپس کریں۔

ہوم کنٹرولر.cs

// 省略

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

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

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

منظر شامل کرنے کے لیے عمل پر دائیں کلک کریں۔ براہ مہربانی دو کے لئے جاؤ.

منظر تخلیق کیا گیا ہے.

سب سے پہلے پہلی بلازور اسمبلی قائم کی۔

بلازور1.سی ایس ایچ ٹی ایم ایل

@{
  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/" />

اگر آپ اس راستے کو تبدیل کرتے ہیں تو بلازور اسمبلی ہر فائل کا حوالہ دے سکے گی، جیسے کہ ڈی ایل، ایک نسبتی راستے میں اس راستے کی جڑ کے طور پر۔

تاہم، موجودہ بلازور اسمبلی کی تخصیص میں واضح کیا گیا ہے کہ کنٹرولر اور ایکشن کا راستہ ایک ہی ہے، کیونکہ اگر ایم وی سی ایکشن کے ذریعہ طے کردہ یو آر ایل اس بیس کے میزبان سے نسبتی راستے سے میل نہیں کھاتا ہے تو بلازور اسمبلی لوڈ کرتے وقت ناکام ہوجائے گی۔

ویسے اس راستے کا معاملہ متاثر ہوتا ہے، لہذا اگر یو آر ایل خود بخود کم کیس ہے تو اسے کم کیس ہونا چاہئے۔

Blazor2.cshtml تدوین بھی. Blazor1.cshtml براہ کرم نوٹ کریں کہ یہ اس سے کچھ مختلف ہے۔

بلازور2.سی ایس ایچ ٹی ایم ایل

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

ایک لنک شامل کریں تاکہ آپ بلازور کے صفحے پر گشت کر سکیں۔

اشاریہ.سی ایس ایچ ٹی ایل

@{
  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 تبدیلیاں

بلازور ویب اسمبلی کا راستہ بدل جاتا ہے، لہذا اسے ہر راستے کے لئے فعال کریں۔

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

بلازور ویب اسمبلی تعیناتی

پچھلی بار، میں نے شائع شدہ فائل کو ڈبلیو روٹ میں رکھا تھا، لیکن چونکہ میں نے ہر صفحے پر بیس ٹیگ کے لئے ایک راستہ متعین کیا تھا، میں ایک ایسا ہی راستہ ڈبلیو روٹ میں ایک فولڈر بناتا ہوں۔

شائع شدہ مسل کے ڈبلیو ڈبلیو روٹ کے مشمولات کو ہر پوشہ میں نقل کریں۔ پہلے کی طرح index.html ، اس کی ضرورت نہیں ہے.

نفاذ

اسے چلائیں تاکہ یہ یقینی بنایا جاسکے کہ ہر صفحے پر بلازور ویب اسمبلی صحیح طریقے سے کام کر رہی ہے۔

ASP.NET کور ایم وی سی نقطہ نظر کے ساتھ بلازور ویب اسمبلی چلائیں