DisplayNameFor – DisplayFor – ActionLink و Data Annotation – جلسه ۳۳

در این جلسه از آموزش ASP.NET Core، قصد داریم هلپرهای DisplayNameFor، DisplayFor و ActionLink را معرفی کرده و شما را با Data Annotation آشنا نماییم. در این راستا، یک نما با استفاده از هلپرهای معرفی شده ایجاد مینماییم و بویسله قابلیت Data Annotation اقدام به نمایش لیبل و فرمت داده دلخواه خواهیم کرد.

DisplayNameFor و DisplayFor

این دو HTML Helper برای نمایش برچسب و داده‌های ارسال شده به نما مورد استفاده قرار میگیرد. هلپر DisplayNameFor در واقع لیبل را بر اساس نام Property مدل ارسال شده به نما نمایش میدهد. لیبل هر Property را میتوان بوسیله Data Annotation که در ادامه این جلسه به آن خواهیم پرداخت تغییر داد.

همچنین بوسیله DisplayFor میتوان مغادیر ذخیره شده در Property مورد نظر را نمایش داد. هر دو هلپر را میبایست بوسیله عبارت لامبدا به Property مورد نظر متصل نمود.

ما در ادامه توسعه پروژه خود در این دوره آموزشی، مقدار بازگشتی اکشن متد CreateStronglyTypedView درون کنترلر CostController را برابر یک نما با نام View قرار خواهیم داد و فرم سابمیت شده که از نوع CreateCostViewModel میباشد را به همان نما ارسال میکنیم.

        [HttpPost]
        public IActionResult CreateStronglyTypedView(CreateCostViewModel Model)
        {
            return View("View",Model);
        }

سپس، یک نما از نوع Strongly Typed Viewدر مسیر Views/Cost با نام View ایجاد مینماییم. این نما باید به مدل CreateCostViewMode متصل گردد. سپس درون نما ایجاد شده بویسله DisplayFor و DisplayNameFor اقدام به نمایش داده‌های ارسالی مینماییم.

@model CreateCostViewModel
@{
    ViewBag.Title = "Cost View Model";
}
@Html.DisplayNameFor(m => m.Amount)
@Html.DisplayFor(m => m.Amount)<br />
@Html.DisplayNameFor(m => m.Category)
@Html.DisplayFor(m => m.Category)<br />
@Html.DisplayNameFor(m => m.Date)
@Html.DisplayFor(m => m.Date)<br />
@Html.DisplayNameFor(m => m.Comment)
@Html.DisplayFor(m => m.Comment)<br />
@Html.DisplayNameFor(m => m.PaymentMethod)
@Html.DisplayFor(m => m.PaymentMethod)<br />

ActionLink

این HTML Helper برای ایجاد لینک، درون نما مورد استفاده قرار میگیرد و خروجی آن تگ a میباشد. این هلپر دارای چندیدن Overloaded ورژن میباشد که ما در این جلسه از نوعی که حاوی برچسب لینک، نام اکشن متد و نام کنترلر میباشد استفاده میکنیم.

در صورتی که مقصد لینک ما و محل لینک هر دو درون یک کنترلر باشد، میتوان نام کنترلر را ذکر نکرد و از Overload مناسب دیگری استفاده نمود.

@Html.ActionLink("Back To Create Cost", "CreateStronglyTypedView", "Cost")

در ادامه شاهد قطعه کد کامل نمای View خواهید بود.

@model CreateCostViewModel
@{
    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.DisplayNameFor(m => m.Amount)
                @Html.DisplayFor(m => m.Amount)<br />
                @Html.DisplayNameFor(m => m.Category)
                @Html.DisplayFor(m => m.Category)<br />
                @Html.DisplayNameFor(m => m.Date)
                @Html.DisplayFor(m => m.Date)<br />
                @Html.DisplayNameFor(m => m.Comment)
                @Html.DisplayFor(m => m.Comment)<br />
                @Html.DisplayNameFor(m => m.PaymentMethod)
                @Html.DisplayFor(m => m.PaymentMethod)<br />
                @Html.ActionLink("Back To Create Cost", "CreateStronglyTypedView", "Cost")
            </div>
        </div>
    </div>
</div>

Data Annotation

یک ابزار مناسب برای انجام تنظیمات یک مدل که در فضای نام System.ComponentModel.DataAnnotations قرار دارد. بوسیله Data Annotation میتوان تنظیمات و قوانین دلخواه را بروی مدل مورد نظر اعمال نمود. همچنین این ابزار به توسعه‌دهندگان امکان اعتبارسنجی فرمها را نیز میدهد. ضمنا بوسیله Data Annotation میتوان نام برچسب هر Property را متفاوت با نام Property قرار داد. برای این اقدام میبایست Property مورد نظر را به [Display(Name=””)] مجهز نمود.

    public class CreateCostViewModel
    {
        [Display(Name ="Cost Amount")]
        public decimal Amount { get; set; }
        public DateTime Date { get; set; }
        public string Comment { get; set; }
        [Display(Name ="Selected Category")]
        public string Category { get; set; }
        public List<SelectListItem> Categories { get; set; }
        public List<string> SelectedCategories { get; set; }
        [Display(Name ="Payment Method")]
        public int PaymentMethod { set; get; }
        public List<PaymentMethod> PaymentMethods { get; set; }
        public bool MakeFormClear { get; set; }
    }

همانگونه که در قطعه کد فوق مشاهده میکنیم برچسب فیلدهای Amount، Category و PaymentMethod بوسیله Data Annotation به مقادیر دلخواه تغییر نمود.

همچنین فرمت تاریخ را میتوان به دلخواه در زمان نمایش تغییر داد که برای این منظور میتوان از [DisplayFormat(DataFormatString =””)] استفاده نمود.

[DisplayFormat(DataFormatString ="{0:d}")]
public DateTime Date { get; set; }

شما میتوانید انواع فرمت‌های داده‌ایی را از این لینک مشاهده نمایید و همچنین این لینک حاوی انواع فرمت مربوط به تاریخ میباشد.

ضمنا ما میتوانیم برای فیلدهای فاقد مقدار، یک عبارت مناسب نمایش دهیم. به عنوان مثال اگر در فرم ثبت هزینه، کاربر مقدار Select a Category را که مقدار آن Null میباشد را انتخاب و فرم را ثبت کند، در نما View در مقابل فیلد Category مقداری نمایش داده نمیشود. ولی با استفاده از [DisplayFormat(NullDisplayText =”Category Not Selected”)] در بالای فیلد Category در صورت انتخاب Select a Category و ثبت فرم در مقابل این فیلد عبارت Category Not Selected نمایش داده میشود.

در قسمت زیر قطعه کد کامل مربوط به CreateCostViewModel قابل دسترس میباشد.

    public class CreateCostViewModel
    {
        [Display(Name ="Cost Amount")]
        public decimal Amount { get; set; }
        [DisplayFormat(DataFormatString ="{0:d}")]
        public DateTime Date { get; set; }
        public string Comment { get; set; }
        [Display(Name ="Selected Category")]
        [DisplayFormat(NullDisplayText ="Category Not Selected")]
        public string Category { get; set; }
        public List<SelectListItem> Categories { get; set; }
        public List<string> SelectedCategories { get; set; }
        [Display(Name ="Payment Method")]
        public int PaymentMethod { set; get; }
        public List<PaymentMethod> PaymentMethods { get; set; }
        public bool MakeFormClear { get; set; }
    }

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

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

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