Tag Helper در Anchor Element – جلسه ۴۱

در این جلسه از آموزش ASP.NET 5.0 / Core به معرفی Tag Helper ها خواهیم پرداخت و نحوه استفاده از آن را در تگ a و یا Anchor Element بررسی میکنیم. Tag Helprها در واقع کامپوننت‌های سمت سرور میباشند که در سمت سرور پردازش شده و تگهای Html را ایجاد میکنند. عملکرد آنها مانند Html Helperها بوده که در جلسات گذشته به بررسی آنها پرداختیم. در بسیاری از قسمت‌های کد Razor مربوط به تگ‌هلپرها، نوشتار بسیار شبیه به تگ‍های Html میباشد و این کار را برای توسعه‌دهندگان ساده‌تر میکند. در ASP.NET تگ‌هلپرهای پیشفرض بسیاری برای طراحی صفحات نما وجود دارد که در این جلسه و جلسات آتی به آنها خواهیم پرداخت. همچنین برای استفاده از Tag Helper در نما، میبایست این قابلیت را به نمای خود اضافه نماییم که در جلسه 23 به شرح آن پرداخته ایم.

استفاده از Tag Helper در Anchor Element

Anchor Element در واقع همان تگ <a></a> میباشد که در جلسه 33 با استفاده از هلپر ActionLink نسبت به ایجاد آن در نمای خود اقدام کردیم. در این جلسه قصد داریم تا آدرس‌دهی به لینک خود را بوسیله Tag Helper انجام بدهیم. برای آدرس‌دهی و اشاره به نام کنترلر میتوانیم از تگ‌هلپر asp-controller و برای نام اکشن متد از هلپر asp-action استفاده نماییم. همچنین میتوانیم برای اشاره به مسیر خاص و یا یک ID خاص از هلپر asp-route-id استفاده نماییم.

<a class="btn btn-info btn-block d-block" asp-controller="Cost" asp-action="Edit" asp-route-id="@Model.ID">Edit</a>

همانگونه که در کد فوق مشاهده میکنید، لینک ایجاد شده با برچسب Edit به کنترلر Cost، اکشن متد Edit و ID ذحیره شده در Model اشاره میکند.

ما در این پروژه، در دو نمای View و _CostList_PartialView که در نمای List از آن استفاده نمودیم، از Tag Helper برای ایجاد Anchor Element استفاده نمودیم که در ادامه میتوانید کدهای مربوط به این دو قسمت را مشاهده نمایید.

نمای _CostList_PartialView

@model DailyCostWebApplication.Models.Cost
<tr>
    <td>@Model.ID</td>
    <td>@Model.Amount</td>
    <td>@Model.Category</td>
    <td>@Model.Comment</td>
    <td><a class="btn btn-primary d-block" href="#">View</a></td>
    <td><a class="btn btn-info btn-block d-block" asp-controller="Cost" asp-action="Edit" asp-route-id="@Model.ID">Edit</a></td>   
    <td><a class="btn btn-danger btn-block d-block" href="#">Delete</a></td>
</tr>

نمای View

@model CostRegisteredViewModel
@{
    ViewBag.Title = "Cost View Model";
}
<div class="row">
    <div class="col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-12">
        <div class="card">
            <div class="card-header">
                Submitted Cost Data
            </div>
            <div class="card-body">
                @Html.DisplayForModel()
                @Html.ActionLink("Back To Create Cost", "CreateStronglyTypedView", "Cost")
                <a asp-controller="Cost" asp-action="CreateStronglyTypedView" class="btn btn-primary">Back to Craet Cost</a>
            </div>
        </div>
    </div>
</div>

مزیت استفاده از Tag Helper در آدرس دهی Anchor Element به نسبت آدرس دهی استاتیک

اکنون مزیت استفاده از Tag Helper در آدرس دهی Anchor Element را نسبت به آدرس دهی استاتیک، با یک مثال شرح خواهیم داد. فرض کنیدبرای آدرس مسیرهای درون پروژه از ادرس دهی نسبی استاتیک استفاده نموده اید. همچنین پروژه ما دارای ده‌ها کنترل و اکشن متد و نما میباشد.

<a class="btn btn-info btn-block d-block" href="/cost/edit/@Model.ID">Edit</a>

پس از بارگذاری پروژه بنا بر یک نیاز، ما میبایست یک عبارت به قبل از نام کنترلر به عنوان مثال اضافه نماییم. برای یادداوری این عملیات به جلسه 12 مراجعه نمایید.

            app.UseEndpoints(endpoints =>
            {
                //endpoints.MapControllers();
                //endpoints.MapDefaultControllerRoute();
                endpoints.MapControllerRoute(
                        name: "default",
                        pattern: "goldencourses/{Controller=home}/{Action=index}/{id?}/{name?}"
                    );
            });

با این تغییر تمامی لینک‌های آدرس دهی شده به صورت استاتیک خطای 404 را نمایش میدهند. در صورتی که اگر در آدرس دهی از Tag Helper استفاده نماییم، کلمه پیش فرض به صورت خودکار به آدرس لینک اضافه میگردد و این خطا رخ نخواهد داد.

در صورت نیاز به جزئیات بیشتر، میتوانید ویدئو آموزشی این جلسه را تماشا نمایید. همچنین برای آگاهی از جلسات بعدی این دوره آموزشی، ما را در اینستاگرام، تلگرام، یوتیوب و آپارات دنبال کنید. ضمنا لیست کامل جلسات در این قسمت در دسترس شما میباشد و سورس کد این جلسه را میتوانید از GitHub ما دانلود نمایید.

تماشای ویدیو در یوتیوب ما

دانلود اسلایدهای آموزشی این جلسه از اینجا