HTML Helper سفارشی در ASP.NET Core- جلسه ۳۷

Custom HTML Helper - Session 37

در این جلسه از آموزش ASP.NET Core روش ایجاد یک HTML Helper سفارشی را بررسی خواهیم کرد و روش استفاده از آن در نما را شرح خواهیم داد. همچنین در ابتدا، به ادامه مبحث جلسه 36 خواهیم پرداخت و روش استفاده از DisplayFormat در نمای قابل ویرایش را شرح خواهیم داد.

استفاده از DisplayFormat در نمای ایجاد شده با EditorForModel

در جلسه 36، مشاهده کردید که برای تغییر فرمت برخی از فیلدها مانند فیلد تاریخ از EditorTemplates استفاده نمودیم. همچنین در جلسه 33 متوجه شدید که چگونه فرمت دلخواه خود را بویسله Data Annotation در نمایی که بوسیله DisplayForModel ایجاد شده بود اعمال کنید. در این جلسه، قصد داریم تا با استفاده از Data Annotation فرمت مورد نظر خود را در نمایی که بوسیله EditorForModel ایجاد شده اعمال نماییم. برای محقق شدن این منظور، تنها کافیست خصوصیت DisplayFormat را بروی فیلد مورد نظر از مدل مربوطه اضافه نماییم و پارامتر ApplyFormatInEditMode را برابر True قرار دهیم.

به عنوان مثال در این جلسه قصد داریم در پروژه‌ی خود، فرمت تاریخ در نما‌ی Edit را با خصوصیت DisplayFormat تغییر دهیم. پس فقط کافیست فرمت مورد نظر را بوسیله DisplayFormat بروی فیلد تاریخ اعمال نموده و پارامتر ApplyFormatInEditMode را برابر True قرار دهیم.

    public class Cost
    {
        [HiddenInput(DisplayValue =false)]
        public int ID { get; set; }
        public decimal Amount { get; set; }
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public DateTime Date { get; set; }
        public string Comment { get; set; }
        public string Category { get; set; }
        public int PaymentMethod { set; get; }
    }

توجه داشته باشید که در جلسه قبل، ما فرمت تاریخ را بوسیله EditorTemplates برای این نما تغییر دادیم. پس برای اعمال تغییر فوق، میبایست فایل DateTime.cshtml در مسیر Views/Shared/EditorTemplates را مانند قطعه کد زیر تغییر دهیم.

@model DateTime
@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue)

ایجاد HTML Helper سفارشی برای تگ img

همانطور که میدانید، در ASP.NET Core / ASP.NET 5.0 برای تگ تصویر (img) هیچ افزونه و یا اکستنشنی وجود ندارد. پس میبایست در نما، یا به صورت مستقیم از تگ img استفاده شودو یا یک HTML Helper سفارشی برای آن ایجاد شود.


برای ایجاد یک HTML Helper سفارشی، ابتدا بهتر است در ریشه پروژه یک پوشه با نام CustomHtmlHelpers و یا یک نام دلخواه ایجاد نمایید.
سپس درون آن یک کلاس با نام CustomHtmlHelpers.cs و یا یک نام دلخواه ایجاد نمایید. حال میتوانید HTML Helper خود را درون کلاس ایجاد شده کدنویسی نمایید.
توجه داشته باشید که کلاس و متد HTML Helper سفارشی باید از نوع Static باشد.

پوشه و کلاس HTML Helper سفارشی

سپس با توجه به نیاز ما، یک متد با خروجی TagBuilder ایجاد نموده و مقادیر مربوط به مسیر تصویر، Alt Text و کلاسهای مورد نظر را به عنوان پارامتر ورودی قرار میدهیم. پس از ایجاد تگ img توسط TagBuilder با استفاده از خصوصیت Attribute.add اقدام به مقدار دهی های مورد نظر مینماییم.

using Microsoft.AspNetCore.Mvc.Rendering;

namespace DailyCostWebApplication.CustomHtmlHelpers
{
    public static class CustomHtmlHelpers
    {
        public static TagBuilder Image(this IHtmlHelper htmlHelper, string src, string alt, string klass)
        {
            TagBuilder tb = new("img");
            tb.Attributes.Add("src", src);
            tb.Attributes.Add("alt", alt);
            tb.Attributes.Add("class", klass);
            return tb;
        }
    }
}

برای استفاده از TagBuilder میبایست فضای نام Microsoft.AspNetCore.Mvc.Rendering را به کلاس خود اضافه نمایید.

استفاده از Html Helper سفارشی در نما

تنها تفاوت استفاده از Html Helper سفارشی و هلپرهای درونی ASP.NET در این میباشد که در نما میبایست فضای نام هلپر سفارشی ایجاد شده را اضافه نماییم.

ما در این پروژه برای استفاده از تصویر در پروژه، ابتدا به مدل Cost دو فیلد PhotoPath و AltText را اضافه کرده و مقادیر مورد نظر خود را درون StaticCostRepository اضافه نمودیم.

    public class Cost
    {
        [HiddenInput(DisplayValue =false)]
        public int ID { get; set; }
        public decimal Amount { get; set; }
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public DateTime Date { get; set; }
        public string Comment { get; set; }
        public string Category { get; set; }
        public int PaymentMethod { set; get; }
        public string PhotoPath { get; set; }
        public string AltText { get; set; }
    }

سپس از داده‌های وارد شده در نما برای نمایش تصویر استفاده نمودیم.

@using DailyCostWebApplication.CustomHtmlHelpers
@model CostDetailViewModel
@{
    ViewBag.Title = "Cost Detail";
}
<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">
                @Model.PageTitle
            </div>
            @Html.Image(@Model.CostData.PhotoPath, @Model.CostData.AltText, "card-img-top")
            <div class="card-body">
                <p class="card-text">ID: @Model.CostData.ID</p>
                <p class="card-text">Amount: @Model.CostData.Amount</p>
                <p class="card-text">Category: @Model.CostData.Category</p>
                <p class="card-text">Comment: @Model.CostData.Comment</p>
                <a href="#" class="btn btn-primary">Cost List</a>
            </div>
        </div>
    </div>
</div>

همانگونه که در قطعه کد فوق مربوط به نمای Detail.cshtml مشاهده میکنید، ابتدا فضای نام مربوطه به نما اضافه گردید سپس از Html Helper سفارشی ایجاد شده استفاده نمودیم.

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

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

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

برچسب ها

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
3 نظرات
قدیمی‌ترین
تازه‌ترین بیشترین رأی
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
امیر
امیر
1 سال قبل

سلام وقتتون بخیر ، من یه سوال داشتم ، من این آموزش html helper رو دیدم ولی یه مشکلی بود واسم میخواستم ببینم که الان هنوز از این html helper ها استفاده میشه یا نه ، چون بررسی کردم دیدم تو دات کوره tag helper اومده و بیشتر آموزش هایی که دیدم اصن درمورد این html helper ها حتی صحبت نمیشد ، بیشتر تمرکز روی Tag helper ها بودش ، میخواستم بدونم تو رندر شدن کدومشون سریع تره و شما کدوم رو بیشتر پیشنهاد میدید ، منظور اگه هردو در دسترس باشن ، شما کدوم بیشتر پیشنهاد میکنین

امیر
امیر
1 سال قبل
پاسخ به  امین صیفوری

اها که اینطور ، از اون نظر بله خیلی ممنون از شما

3
0
افکار شما را دوست داریم، لطفا نظر دهید.x