DisplayTextFor, DisplayForModel, DataType و ScaffoldColumn – جلسه ۳۴

در این جلسه از آموزش ASP.NET Core، به بررسی دو هلپر DisplayTextFor و DisplayForModel خواهیم پرداخت و همچنین دو خصوصیت DataType و ScaffoldColumn را در ViewModel خود به کار خواهیم برد. به علاوه، روش جستجوی یک رکورد در پایگاه داده و یا لیست استاتیک در ASP.NET Core را بررسی میکنیم. با کمک این قابلیت در نما View به جای ID مربوط به PaymentMethod نام Method را نمایش خواهیم داد.

DisplayTextFor و DisplayForModel

DisplayTextFor دقیقا مشابه با DisplayFor میباشد که در جلسه 33 به بررسی آن پرداختیم. نحوه استفاده و حتی خروجی این هلپر کاملا مشابه با DisplayFor میباشد و میتوان از هر کدام از این دو هلپر جهت نمایش داده، درون Property مورد نظر استفاده نمود.

@Html.DisplayNameFor(m => m.Amount)
@Html.DisplayFor(m => m.Amount)<br />
@Html.DisplayTextFor(m=>m.Amount)<br />

همچنین برای نمایش تمامی Propertyهای درون یک مدل، میتوانیم از هلپر DisplayForModel استفاده نماییم. این هلپر به صورت خودکار تمامی Propertyهای مدل متصل شده به نما را نمایش میدهد. در نتیجه دیگر نیاز به DisplayNameFor و DisplayFor یا DisplayTextFor جداگانه برای تمامی فیلدها نمیباشد.

@Html.DisplayForModel()

جستجوی یک رکورد در پایگاه داده در ASP.NET Core

برای نمایش نام Method به جای ID مربوط به PaymentMethod، ابتدا میبایست به جستجوی رکورد مورد نظر در پایگاه داده بپردازیم. سپس فیلد Method رکورد جستجو شده را به عنوان خروجی بر میگردانیم. به این منظور ابتدا یک ViewModel اختصاصی برای نما View که وظیفه نمایش داده‌های سابمیت شده را دارد ایجاد میکنیم که فیلد PaymentMethod آن به صورت رشته‌ایی باشد.

    public class CostRegisteredViewModel
    {
        [Display(Name = "Cost Amount")]
        public decimal Amount { get; set; }
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
        public DateTime Date { get; set; }
        public string Comment { get; set; }
        [Display(Name = "Selected Category")]
        [DisplayFormat(NullDisplayText = "Category Not Selected")]
        public string Category { get; set; }
        [Display(Name = "Payment Method")]
        public string PaymentMethod { set; get; }
    }

سپس درون IPaymentMethodRepository یک متد جدید جهت واکشی نام متد انتخاب شده با نام GetPaymentMethodbyID ایجاد میکنیم.

    public interface IPaymentMethodRepository
    {
        List<PaymentMethod> GetAll();
        string GetPaymentMethodbyID(int ID);
    }

در ادامه متد تعریف شده را درون StaticPaymentMethodRepository پیاده سازی میکنیم. درون این متد به جستجوی رکورد در لیست PaymentMethodها میپردازیم که ID آن برابر با ID انتخاب شده باشد. این ID توسط پارامتر ورودی به این متد ارسال میگردد. سپس فیلد Method رکورد بدست آمده را بازمیگردانیم.

        public string GetPaymentMethodbyID(int ID)
        {
            var PM = PaymentMethods.FirstOrDefault(x => x.ID == ID);
            return PM.Method;
        }

پس از آن درون CostControoler و اکشن‌متد CreateStronglyTypedView با متد Post یک شئ از مدل CostRegisteredViewModel ایجاد نموده و فیلدهای آنرا بوسیله داده‌های ارسال شده به ActionMethod پر میکنیم. فقط توجه داشته باشید، که برای PaymentMethod از متد ایجاد شده برای واکشی نام متد با توجه به ID متد مربوطه استفاده میکنیم. همچنین این بار به جای مدل ورودی شئ ایجاد شده را به مدل ارسال میکینم.

            CostRegisteredViewModel costRegistered = new()
            {
                Amount = Model.Amount,
                Comment = Model.Comment,
                Date = Model.Date,
                Category = Model.Category,
                PaymentMethod = paymentMethodRepository.GetPaymentMethodbyID(Model.PaymentMethod),
                WebSite = "https://www.goldencourses.net",
                Email = "[email protected]",
                CurrentTime = DateTime.Now
            };
            return View("View",costRegistered);

همچنین میبایست نما View را به مدل CostRegisteredViewModel متصل نمایم.

@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")
            </div>
        </div>
    </div>
</div>

عدم نمایش یک فیلد بوسیله ScaffoldColumn

همانگونه که ذکر شد، در صورت استفاده از DisplayForModel تمامی فیلدهای مربوط به مدل به صورت خودکار نمایش داده میشوند. درصورتی که بخواهیم یک یا چند فیلد در خروجی نمایش داده نشود، میتوانید از صفت (Attribute) ScaffoldColumn استفاده نماییم. برای عدم نمایش فیلد مورد نظر این Attribute باید برابر با false قرار بگیرد.

    public class CostRegisteredViewModel
    {
        [Display(Name = "Cost Amount")]
        public decimal Amount { get; set; }
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
        public DateTime Date { get; set; }
        public string Comment { get; set; }
        [Display(Name = "Selected Category")]
        [DisplayFormat(NullDisplayText = "Category Not Selected")]
        public string Category { get; set; }
        [Display(Name = "Payment Method")]
        [ScaffoldColumn(false)]
        public string PaymentMethod { set; get; }
    }

به عنوان مثال در صورت استفاده از ViewModel فوق در نمایی که از DisplayForModel برای نمایش داده استفاده نموده، فیلد PaymentMethod در خروجی، نمایش داده نمیشود.

توجه داشته باشید ScaffoldColumn(false) فقط در زمان استفاده از DisplayForModel کارایی دارد و در صورت استفاد ه از DisplayFor و یا DisplayTextFor فیلد مربوطه در خروجی نمایش داده میشود.

صفت DataType

یکی دیگر از Data Annotation های پرکاربرد جهت استفاده از فرمت مناسب در زمان نمایش داده DataType میباشد. این Attribute دارای انواع مختلفی مانند Password, Date, Time, Currency, EmailAddress, Url و غیره میباشد. این صفت، داده را در زمان نمایش با قالب و فرمت مناسب نمایش میدهد. به عنوان مثال اگر میخواهیم یک آدرس ایمیل را به عنوان یک فیلد از مدل، نمایش دهیم در صورت استفاده از DataType.EmailAddress، در خروجی ایمیل آدرس مروبطه به صورت هایپرلینک ظاهر میگردد.

در این پروژه، برای نمایش برخی از قابلیت های DataType ابتدا سه فیلد Website, Email و CurrentTime را به مدل CostRegisteredViewModel اضافه میکنیم. سپس بوسیله DataType به فیلدهای Amount, Website, Email و CurrentTime فرمت مناسب را میدهیم.

    public class CostRegisteredViewModel
    {
        [Display(Name = "Cost Amount")]
        [DataType(DataType.Currency)]
        public decimal Amount { get; set; }
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
        public DateTime Date { get; set; }
        public string Comment { get; set; }
        [Display(Name = "Selected Category")]
        [DisplayFormat(NullDisplayText = "Category Not Selected")]
        public string Category { get; set; }
        [Display(Name = "Payment Method")]
        [ScaffoldColumn(true)]
        public string PaymentMethod { set; get; }
        [DataType(DataType.Url)]
        public string WebSite { get; set; }
        [DataType(DataType.EmailAddress)]
        public string Email { get; set; }
        [DataType(DataType.Time)]
        public DateTime CurrentTime { get; set; }
    }

تغییر علامت واحد پول در ASP.NET Core MVC

برای تغییر علامت واحد پول در ASP.NET Core MVC و ASP.NET 5.0 MVC میبایست از محلی سازی (Globalization) استفاده نمود. به این منظور میبایست فضای نام System.Globalization درون کلاس Startup پروژه اضافه نمود. سپس با استفاده از CultureInfo درون متد Configure از کلاس Startup میتوان زبان، کشور، علامت واحد پول و موارد دیگر را محلی سازی نمود.

            var cultureInfo = new CultureInfo("en-UK");
            cultureInfo.NumberFormat.CurrencySymbol = "£";
            CultureInfo.DefaultThreadCurrentCulture = cultureInfo;
            CultureInfo.DefaultThreadCurrentUICulture = cultureInfo;

به عنوان مثال با اضافه نمودن قطعه کد فوق درون متد Configure از کلاس Startup پروژه علامت واحد پول به £ (پوند انگلستان)، زبان انگلیسی و کشور انگستان تغییر خواهد کرد. همچنین لیست علائم اختصاری کشور و زبان در اینجا قابل دسترس میباشد.

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

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

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