بلازور

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

جب صفحے کی تازہ کاری :
صفحہ تخلیق تاریخ :

ماحول

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

پہلے تو

چونکہ بلازور ویب اسمبلی ایک کلائنٹ ٹیکنالوجی ہے، اس لئے اس سے کوئی فرق نہیں پڑتا کہ ویب سرور کس طرح کام کرتا ہے۔ تاہم، گاہکوں کو ویب اسمبلی کی خدمت کے لئے، کم از کم، سرور سائیڈ تشکیل کی ضرورت ہوتی ہے۔ آئیے بلازور ویب اسمبلی میں ASP.NET کور ایم وی سی کے طور پر سرور پروگرام چلاتے ہیں۔

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

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

پروجیکٹ کا نام یا حل نام من مانی ہے۔

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

بلازور ویب اسمبلی کی اشاعت

ASP.NET کور ایم وی سی پروجیکٹ میں بلازور ویب اسمبلی کی تعیناتی کے لئے فائلیں شائع کریں۔

پروجیکٹ پر دائیں کلک کریں اور اشاعت کا انتخاب کریں۔

پوشے منتخب کریں۔

طے شدہ اشاعتی منزل چھوڑ دیں۔

اشاعتی سکرین ظاہر ہوتی ہے۔ آپ مختلف سیٹنگیں سیٹ کر سکتے ہیں، لیکن فی الحال، "اشاعت" بٹن کو طے شدہ کے طور پر چھوڑ دیا گیا ہے۔

اشاعت کے شروع ہونے اور کامیابی سے مکمل ہونے کا انتظار کریں۔ نوٹ کریں کہ طویل پوشہ راستے ناکام ہو سکتے ہیں۔

آپ تصدیق کر سکتے ہیں کہ مسل اختصاصی پوشہ میں بنائی گئی ہے۔ اگر اسے نسبتی راستے کے طور پر متعین کیا گیا ہے تو منزل منصوبے کے مقابلے میں ہے۔

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

اس کے بعد، ایک ASP.NET کور ایم وی سی پروجیکٹ بنائیں۔ ویژیول اسٹوڈیو کو الگ سے کھولنا تھکادینے والا ہوسکتا ہے، لہذا اسے بلازور ویب اسمبلی حل کے اندر بنائیں۔ چونکہ اس بار دونوں پروجیکٹ وں کا تعلق نہیں ہے، اس لئے کوئی مسئلہ نہیں ہے چاہے وہ الگ سے ہی بنائے گئے ہوں۔

پروجیکٹ کا نام اختیاری ہے۔ دیگر ترتیبات ان کے طے شدہ پر رہ جاتی ہیں۔

چونکہ بلازور سائیڈ یہ فرض کرتی ہے کہ ترقی مکمل ہو جاتی ہے ASP.NET بنیادی ایم وی سی کی طرف سے منصوبہ ایک اسٹارٹ اپ ہے۔

بلازور اسمبلی کے لیے خیالات تخلیق کرنا

یہ علاقہ اس منصوبے پر منحصر ہے جو آپ اصل میں بنا رہے ہیں، لہذا براہ کرم اس منصوبے کے مطابق اس میں ترمیم کریں۔ یہاں، ہم نمونہ منصوبے کی تشکیل کی بنیاد پر اس میں ترمیم کریں گے۔

بنیادی طور پر، جب آپ بلازور اسمبلی شائع index.html کرتے ہیں تو اس میں ترمیم کی جانی چاہئے۔

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

میں بلازور اسمبلی کے سی ایس ایس کا حوالہ دینا چاہتا ہوں، تاکہ میں اسے براہ راست لکھ سکوں۔ _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>
  <!-- 以下同じなので省略 -->

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

بلازور اسمبلی دکھانے کے لیے ایک وقف صفحہ شامل کریں۔ ASP.NET کور ایم وی سی میں عام صفحے کا اضافہ اور طریقہ کار ایک ہی ہے۔

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

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

// 省略

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

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

منظر شامل کرنے کے لیے عمل پر دائیں کلک کریں۔

باندھنے کے لئے کچھ بھی نہیں ہے، لہذا اسے جیسا ہے شامل کریں۔

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

بلازور اسمبلی کی اشاعت index.html کے وقت پیدا ہونے والے پیداوار کا حوالہ دیا گیا ہے، ہم اس کا ری میک درج ذیل طور پر بنائیں گے۔

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

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

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

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

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

Mmatmt.Apنیٹ کور.اجزاء.ویب اسمبلی.سرور حوالہ شامل کریں

Startup.cs آپ کو خود ضروری کوڈ لکھنے کی ضرورت نہیں ہے، لیکن آسانی کے لئے آپ کو نیوگیٹ سے Microsoft.AspNetCore.Components.WebAssembly.Server ملتا ہے۔

دائیں کلک انحصار اور نوگیٹ پیکجز کا انتظام منتخب کریں۔

انتظامیہ جدول منتخب کریں اور Mapنیٹ کور.اجزاء.ویب اسمبلی.تلاش کے میدان میں پیش کار داخل کریں۔

اسی نام کا پیکیج دکھایا جاتا ہے، لہذا اسے انسٹال کریں۔

تصدیق کریں کہ پیکیج شامل کیا گیا ہے۔

اسٹارٹ اپ میں تبدیلیاں.cs

app.UseHttpsRedirection(); لائن کے بعد لائن پر درج ذیل کوڈ داخل کریں:

app.UseBlazorFrameworkFiles();

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

بنیادی طور پر، آپ شائع شدہ بلازور ویب اسمبلی ڈبلیو ڈبلیو روٹ فولڈر رکھ سکتے ہیں جیسا کہ یہ ASP.NEt کور کے ڈبلیو ڈبلیو روٹ فولڈر میں ہے،index.html لیکن آپ کو اسے حذف کرنا چاہئے کیونکہ اب اس کی ضرورت نہیں رہے گی۔ اس کے علاوہ، چونکہ ڈب کیا گیا ہے، فیصلہ کریں کہ کون سی شبیہ استعمال کرنی ہےfavicon.ico ۔

پی ڈبلیو اے کے ساتھ جاری کرتے وقت، اگر آپ نے فائلوں (جیسے اشاریہ.html) کو ڈبلیو ڈبلیو روٹ فولڈر میں خارج کر دیا ہے، آپ کو متن ایڈیٹر میں کھولنے کی ضرورت ہوگی، ڈبلیو روٹ فولڈر میں بھی، اور خارج شدہ فائل میں service-worker-assets.js ریکارڈ حذف کرنے کی ضرورت ہوگی۔ بصورت دیگر، جب آپ ویب سکرین کھولتے ہیں تو آپ کو اندرونی غلطی مل سکتی ہے۔

جب آپ بلازور ایپ شائع کرتے ہیں، تو آپ کو اپنے پروجیکٹ سے غیر ضروری فائلوں کو خارج کرکے دستی طور پر ایسا کرنے کی ضرورت نہیں ہے۔

پی ڈبلیو اے کے معاملے میں، اندرونی غلطیاں اس صورت میں ہوتی ہیں جب وہ ایک ایچ ٹی ٹی پی ایس ماحول میں نہ ہوں۔ اسے پی ڈبلیو اے کے طور پر نصب نہیں کیا جاسکتا۔

عمل درآمد کی تصدیق

ASP.NET ڈیبگ کور ایم وی سی پروجیکٹ چلاتے ہیں۔ بلازور صفحے پر جائیں اور تصدیق کریں کہ بلازور اسمبلی کا خاکہ صفحے میں ظاہر ہوتا ہے۔ بائیں مینیو منتخب کریں اور تصدیق کریں کہ ہر فیچر کام کرتا ہے۔

یو آر ایل کے بارے میں

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

جب آپ بلازور صفحہ کھولتے ہیں

جب آپ کاؤنٹر مینیو پر کلک کرتے ہیں

بدلنا

2022/7/12
  • شائع شدہ بلازور ایپ کی فائل پلیسمنٹ میں غیر ضروری فائلوں کو خارج کرتے وقت نوٹ کرنے کے لئے پوائنٹس شامل کیے گئے ہیں۔
2022/3/30
  • پہلا ایڈیشن
آئی آئی ایس میں بلازور ویب اسمبلی میں بنائی گئی ایپس رکھیں
ASP.NET کور ایم وی سی میں متعدد بلازور ویب اسمبلیاں تعینات کریں