اشتراکها
#C یا زبانهای دیگر !
اشتراکها
کتاب TypeScript Deep Dive
اشتراکها
Git for Windows خود را به روز کنید
اشتراکها
کنفرانس TechEd North America 2014
تا اینجا به صورت بسیار مختصری با نحوهی مسیریابی برنامههای مبتنی بر Blazor توسط دایرکتیو page@ آشنا شدیم. برای مثال با داشتن تعریف زیر در ابتدای یک کامپوننت:
این کامپوننت جدید، صرفنظر از محل قرارگیری فایل آن که برای مثال در پوشهی Pages\LearnBlazor\LearnRouting.razor است، در مسیر https://localhost:5001/LearnRouting قابل دسترسی خواهد شد و برای تعریف مدخل منوی جدید آن، به کامپوننت Shared\NavMenu.razor مراجعه کرده و NavLink جدیدی را برای آن تعریف میکنیم:
در اینجا برچسب مدخل جدید تعریف شده، Learn Routing است و href لینک به آن، دقیقا به مسیریابی تعریف شده اشاره میکند.
یک نکته: مسیریابیهای تعریف شدهی در Blazor، حساس به حروف کوچک و بزرگ نیستند.
امکان تعریف بیش از یک مسیریابی برای یک کامپوننت نیز وجود دارد
در کامپوننتهای Blazor، محدودیتی از لحاظ تعداد بار تعریف دایرکتیو page@ وجود ندارد:
در این حالت میتوان در حین تعریف یک مسیریابی جدید، مسیریابی قبلی را نیز حفظ کرد. در اینجا کامپوننت فوق، از طریق هر دو آدرس https://localhost:5001/LearnRouting و https://localhost:5001/NewRouting تعریف شده، قابل دسترسیاست.
روش تعریف پارامترهای مسیریابی
تا اینجا اگر مسیر جدید https://localhost:5001/NewRouting/1/2 را درخواست کنیم چه اتفاقی رخ میدهد؟
در مورد نحوهی تعریف قالب «یافت نشد» فوق، در قسمت دوم بیشتر بحث شد.
برای تعریف پارامترهای مسیریابی، میتوان مسیریابی سومی را با پارامترهای مدنظر تعریف کرد که در مثال زیر، ذکر پارامتر دوم اختیاری است؛ چون سومین مسیریابی تعریف شده، امکان پردازش مسیرهایی با یک پارامتر را هم ممکن میکند:
سپس جهت دستیابی به مقادیر این پارامترها میتوان در قسمت کدهای کامپوننت، از خواص عمومی مزین شدهی با ویژگی Parameter استفاده کرد. در اینجا هر خاصیت تعریف شده، باید هم نام پارامتر تعریف شده باشد (و این مورد نیز غیر حساس به حروف بزرگ و کوچک است).
پس از این تعاریف، مسیریابی مانند https://localhost:5001/LearnRouting/1 با یک پارامتر و یا https://localhost:5001/LearnRouting/1/2 که به همراه دو پارامتر است، قابل فراخوانی میشود.
روش تعریف لینک به سایر کامپوننتهای Blazor
در ادامه کامپوننت جدید Pages\LearnBlazor\LearnAdvancedRouting.razor را اضافه میکنیم؛ با این محتوای آغازین:
بنابراین یک روش تعریف لینک به کامپوننتی دیگر، استفاده از کامپوننت NavLink است که href آن به مسیریابی مقصد اشاره میکند:
ارسال کوئری استرینگها به کامپوننتهای مختلف
پس از تعریف لینکی به کامپوننتی دیگر از درون یک کامپوننت، اکنون میخواهیم دو کوئری استرینگ param1 و param2 را نیز به آن ارسال کنیم:
در کامپوننت LearnAdvancedRouting برای دریافت این پارامترها، نیاز است آنها را از URL جاری استخراج کرد:
ابتدا سرویس توکار NavigationManager توسط دایرکتیو inject@ به کامپوننت جاری تزریق شدهاست که برای کار و دسترسی به آن، نیاز به تنظیمات ابتدایی خاصی نیست و پیشتر به مجموعهی سرویسهای برنامه افزوده شدهاست. برای نمونه توسط آن میتوان به Uri در حال پردازش، دسترسی یافت. اکنون که این Uri را داریم، با استفاده از متد HttpUtility.ParseQueryString میتوان به مجموعهی کوئری استرینگهای ارسالی، به صورت key/value دسترسی یافت و برای مثال آنها را در روال رویدادگردان OnInitialized، دریافت و با انتساب آنها به دو فیلد تعریف شده، سبب نمایش مقادیر دریافتی شد:
هدایت به یک کامپوننت دیگر با کد نویسی
فرض کنید میخواهیم دکمهای را اضافه کنیم که با کلیک بر روی آن، ما را به کامپوننت LearnRouting هدایت میکند:
در اینجا روشهای مختلف تعریف لینک به کامپوننتی دیگر را مشاهده میکنید. یا میتوان از کامپوننت NavLink استفاده کرد و یا از یک anchor tag استاندارد، که href هر دوی آنها به مسیریابی مقصد اشاره میکنند و یا میتوان با استفاده از سرویس NavigationManager و متد NavigateTo آن مانند کدهای فوق، سبب هدایت کاربر به صفحهای دیگر شد.
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: Blazor-5x-Part-10.zip
@page "/LearnRouting" <h3>Learn Routing</h3>
<li class="nav-item px-3"> <NavLink class="nav-link" href="LearnRouting"> <span class="oi oi-list-rich" aria-hidden="true"></span> Learn Routing </NavLink> </li>
یک نکته: مسیریابیهای تعریف شدهی در Blazor، حساس به حروف کوچک و بزرگ نیستند.
امکان تعریف بیش از یک مسیریابی برای یک کامپوننت نیز وجود دارد
در کامپوننتهای Blazor، محدودیتی از لحاظ تعداد بار تعریف دایرکتیو page@ وجود ندارد:
@page "/LearnRouting" @page "/NewRouting" <h3>Learn Routing</h3>
روش تعریف پارامترهای مسیریابی
تا اینجا اگر مسیر جدید https://localhost:5001/NewRouting/1/2 را درخواست کنیم چه اتفاقی رخ میدهد؟
در مورد نحوهی تعریف قالب «یافت نشد» فوق، در قسمت دوم بیشتر بحث شد.
برای تعریف پارامترهای مسیریابی، میتوان مسیریابی سومی را با پارامترهای مدنظر تعریف کرد که در مثال زیر، ذکر پارامتر دوم اختیاری است؛ چون سومین مسیریابی تعریف شده، امکان پردازش مسیرهایی با یک پارامتر را هم ممکن میکند:
@page "/LearnRouting" @page "/NewRouting" @page "/LearnRouting/{parameter1}" @page "/LearnRouting/{parameter1}/{parameter2}" <h3>Learn Routing</h3> <p>Parameter1: @Parameter1</p> <p>Parameter2: @Parameter2</p> @code { [Parameter] public string Parameter1 { set; get; } [Parameter] public string Parameter2 { set; get; } }
پس از این تعاریف، مسیریابی مانند https://localhost:5001/LearnRouting/1 با یک پارامتر و یا https://localhost:5001/LearnRouting/1/2 که به همراه دو پارامتر است، قابل فراخوانی میشود.
روش تعریف لینک به سایر کامپوننتهای Blazor
در ادامه کامپوننت جدید Pages\LearnBlazor\LearnAdvancedRouting.razor را اضافه میکنیم؛ با این محتوای آغازین:
@page "/LearnAdvancedRouting" <h3>Learn Advanced Routing</h3>
در اینجا قصد نداریم لینک به این کامپوننت را به منوی اصلی برنامه اضافه کنیم؛ بلکه میخواهیم از طریق همان کامپوننت LearnRouting.razor ابتدای بحث، این مسیریابی را برقرار کنیم. برای اینکار یا میتوان از یک anchor tag استاندارد استفاده کرد و یا همانند کامپوننت Shared\NavMenu.razor، از کامپوننت NavLink استفاده نمود. NavLinkها نیز همانند anchor tagهای استاندارد HTML هستند، با این تفاوت که این کامپوننت، افزودن کلاس active مخصوص بوت استرپ را هم بر اساس فعال بودن مسیریابی مرتبط به آن، انجام میدهد ("class="nav-link active). به همین علت است که اگر گزینهی منوی خاصی را انتخاب کنیم، این گزینه با رنگ متمایزی نشان داده میشود:
بنابراین یک روش تعریف لینک به کامپوننتی دیگر، استفاده از کامپوننت NavLink است که href آن به مسیریابی مقصد اشاره میکند:
<NavLink class="btn btn-secondary" href="LearnAdvancedRouting"> <span class="oi oi-list-rich" aria-hidden="true"></span> Learn Advanced Routing </NavLink>
پس از تعریف لینکی به کامپوننتی دیگر از درون یک کامپوننت، اکنون میخواهیم دو کوئری استرینگ param1 و param2 را نیز به آن ارسال کنیم:
<NavLink class="btn btn-secondary" href="LearnAdvancedRouting?param1=value1¶m2=value2"> <span class="oi oi-list-rich" aria-hidden="true"></span> Learn Advanced Routing </NavLink>
@page "/LearnAdvancedRouting" @inject NavigationManager NavigationManager <h3>Learn Advanced Routing</h3> <h4>Parameter 1 : @Param1</h4> <h4>Parameter 2 : @Param2</h4> @code { string Param1; string Param2; protected override void OnInitialized() { base.OnInitialized(); var absoluteUri = new Uri(NavigationManager.Uri); var queryParam = System.Web.HttpUtility.ParseQueryString(absoluteUri.Query); Param1 = queryParam["Param1"]; Param2 = queryParam["Param2"]; } }
هدایت به یک کامپوننت دیگر با کد نویسی
فرض کنید میخواهیم دکمهای را اضافه کنیم که با کلیک بر روی آن، ما را به کامپوننت LearnRouting هدایت میکند:
@page "/LearnAdvancedRouting" @inject NavigationManager NavigationManager @*<NavLink href="/learnrouting" class="btn btn-secondary">Back to Routing</NavLink>*@ @*<a href="/learnrouting" class="btn btn-secondary">Back to Routing</a>*@ <button class="btn btn-secondary" @onclick="BackToRouting">Back to Routing</button> @code { private void BackToRouting() { NavigationManager.NavigateTo("learnrouting"); } }
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: Blazor-5x-Part-10.zip
در اینجا و اینجا با تفاوتهای ViewData و ViewBag و TempData در ASP.NET MVC آشنا شدید. هدف ما در این مقاله intellisense دار کردن شیء پویای ViewBag در فایلهاب cshtml میباشد که گاها در پروژها پیش میآید، برنامه نویس، لیستی را به صورت ViewBag به سمت View ارسال نماید.
ViewBag :
• یک نوع dynamic است (این نوع در c# 4 معرفی شده است).
• مانند ViewData برای ارسال اطلاعات از کنترلر به view استفاده میشود.
• مدت زمان اعتبار مقادیر آن تنها در request جاری است.
• اگر redirect ایی بین صفحات رخ دهد، مقدار آن null خواهد شد.
• به دلایل امنیتی باید قبل از استفاده، null بودن آن تست شود.
• برای استفادهی از آن، cast نیاز نیست. بنابراین سریعتر عمل میکند.
در پوشهی Models یک کلاس با نام Persons ایجاد شده که داری پراپرتیهای زیر میباشد:
using System.Web; namespace Intellisense.Models { public class Persons { // کلید public int Id { get; set; } // نام public string FirstName { get; set; } // نام خانوادگی public string LastName { get; set; } // نام پدر public string FatherName { get; set; } // سن public int Age { get; set; } // شماره تلفن public int Mobile { get; set; } // آدرس public string Address { get; set; } } }
using System.Collections.Generic; using System.Web.Mvc; using Intellisense.Models; namespace Intellisense.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { // List of person var listOfPerson = new List<Persons> { new Persons() {Id = 1, FirstName = "Jone", LastName = "liy", FatherName = "Sobin", Age = 36, Mobile = +982015222, Address = "..."}, new Persons() {Id = 2, FirstName = "kety", LastName = "sory", FatherName = "petter", Age = 19, Mobile = +962222155, Address = "..."}, }; // Set ViewBag.Persons data from listOfPerson ViewBag.Persons = listOfPerson; // Show and send ViewBag.Persons to view return View(); } } }
- استفاده از دات ( . )
- عمل Cast
در کد زیر نحوهی استفاده از دات را مشاهده خواهید کرد. از معایب استفاده از این روش اشتباهات تایپی است که نام پراپرتی بعد از دات (.) قرار خواهد گرفت و همچنین intellisense برای آن فعال نیست.
@{ ViewBag.Title = "ViewBag"; } <table> <thead> <tr> <th> Id </th> <th> First Name </th> <th> Last Name </th> <th> Father Name </th> <th> Age </th> <th> Mobile </th> <th> Address </th> </tr> </thead> <tbody> @{foreach (var item in ViewBag.Persons) { <tr> <td> @item.Id </td> <td> @item.FirstName </td> <td> @item.LastName </td> <td> @item.FatherName </td> <td> @item.Age </td> <td> @item.Mobile </td> <td> @item.Address </td> </tr> } } </tbody> </table>
Cast:
با استفاده از کلمه کلیدی as عمل casting انجام پذیرفته است که در زیر، دو روش برای casting آورده شده است. در این حالت intellisense نیز فعال میگردد:
@using Intellisense.Models @{ ViewBag.Title = "ViewBag"; // روش اول // پیشنهاد میشود که از روش اول استفاده شود // var listOfPerson = ViewBag.Persons as IEnumerable<Persons>; // روش دوم // var listOfPerson = (IEnumerable<Persons>)ViewBag.Persons; var listOfPerson = ViewBag.Persons as IEnumerable<Persons>; } <table> <thead> <tr> <th> Id </th> <th> First Name </th> <th> Last Name </th> <th> Father Name </th> <th> Age </th> <th> Mobile </th> <th> Address </th> </tr> </thead> <tbody> @{foreach (var item in listOfPerson) { <tr> <td> @item.Id </td> <td> @item.FirstName </td> <td> @item.LastName </td> <td> @item.FatherName </td> <td> @item.Age </td> <td> @item.Mobile </td> <td> @item.Address </td> </tr> } } </tbody> </table>
پروژه جاری را میتوان از اینجا دانلود نمود.
اشتراکها
کتابچه آموزش LINQ
Dear developer friends, I wanted to share with you a book that particularly amazed me. This book teaches you LINQ like you never have before and all in just 35 pages. I present to you Steven Giesel‘s book “LINQ Explained with sketches”.