BeginForm و RadioButtonFor – جلسه ۳۱

BeginForm & RadioButtonFor HTML Helper - Session31

در این جلسه از آموزش ASP.NET Core مبحث HTML Helper را ادامه خوایم داد و روش استفاده از دو هلپر BeginForm و RadioButtonFor را بررسی خواهیم کرد. در جلسه 29 و 30ام با استفاده از HTML Helperها یک فرم جهت ثبت داده‌های مورد نظر خود ایجاد نمودیم. در این جلسه به توسعه بیشتر همان فرم خواهیم پرداخت و به آن قابلیت‌های بیشتری را اضافه خواهیم کرد.

ما در این جلسه قصد داریم تگ From را با هلپر BeginForm جایگزین نماییم. سپس یک مدل برای روشهای پرداخت ایجاد نموده و همانگونه که در جلسات 15 و 16 به شما آموزش دادیم برای آن اینترفیس ریپازیتوری ایجاد نماییم. در ادامه روش‌های پرداخت را توسط RadioButtonFor در فرم ایجاد خواهیم کرد.

BeginForm

این هلپر برای ایجاد فرم در صفحه مورد استفاده قرار میگیرد. این متد از کلاس Html دارای Overloaded های مختلفی بوده که بنا بر نیاز میتوان از آنها استفاده نمود. بهتر است این هلپر درون یک using قرار بگیرد و المان های فرم درون بلاک کد using وارد شوند. همچنین با استفاده از FormMethod میتوان روش ارسال داده به کنترلر را مشخص نمود. البته به صورت پیشفرض POST به عنوان روش ارسال داده قرار دارد.

    @using (Html.BeginForm("CreateStronglyTypedView", "Cost", FormMethod.Post, new { @class = "col-lg-6 offset-lg-3 border border-1" }))
    {

    }

در قطعه کد فوق ما از حالتی از BeginForm استفاده نمودیم که قابلیت دریافت نام Action Method نام Controller روش ارسال فرم و Html Attribute را دارا میباشد.

ایجاد Model, Interface و Repository مربوط به Payment Method

در مرحله بعد درون پروژه خود ابتدا نیاز داریم درون پوشه Models یک کلاس برای مدل Payment Method ایجاد نماییم.

    public class PaymentMethod
    {
        public int ID { get; set; }
        public string Method { get; set; }
    }

سپس برای این مدل جهت انجام تزریق وابستگی (Dependency Injection) یک Interface با تعریف متدهای مورد نیاز درون پوشه Models ایجاد مینماییم.

    public interface IPaymentMethodRepository
    {
        List<PaymentMethod> GetAll();
    }

در ادامه، با توجه به عدم فراگیری مباحث پایگاه داده تا این جلسه، یک ریپازیتوری ایستا از روی این Interface درون پوشه Models ایجاد میکنم. همچنین لیستی از PaymentMethod به صورت ایستا درون آن ایجاد میکنیم. ضمنا با استفاده از متد GetAll لیست ایجاد شده را بر می‌گردانیم.

    public class StaticPaymentMethodRepository : IPaymentMethodRepository
    {
        private List<PaymentMethod> PaymentMethods = new()
        {
            new PaymentMethod {ID=1,Method="Cash"},
            new PaymentMethod {ID=2 , Method="Credit Card"},
            new PaymentMethod {ID=3, Method="Debit Card"}
        };

        public List<PaymentMethod> GetAll()
        {
            return PaymentMethods;
        }
    }

همانگونه که قبلا در جلسه 16ام به آن اشاره کرده بودیم حالا نوبت ثبت این سرویس در کلاس Startup و متد ConfigureServices میباشد.

services.AddSingleton<IPaymentMethodRepository, StaticPaymentMethodRepository>();

همچنین میبایست درون مدل Cost یک خصوصیت برای نوع پرداخت ایجاد نماییم.

    public class Cost
    {
        public int ID { get; set; }
        public decimal Amount { get; set; }
        public DateTime Date { get; set; }
        public string Comment { get; set; }
        public string Category { get; set; }
        public int PaymentMethod { set; get; }
    }

ضمنا نیاز داریم تا به View Model مربوط دو خصوصیت برای ارسال و دریافت روش پرداخت انتخابی و لیست روشهای پرداخت اضافه نماییم.

    public class CreateCostViewModel
    {
        public decimal Amount { get; set; }
        public DateTime Date { get; set; }
        public string Comment { get; set; }
        public string Category { get; set; }
        public List<SelectListItem> Categories { get; set; }
        public int PaymentMethod { set; get; }
        public List<PaymentMethod> PaymentMethods { get; set; }
    }

حال نوبت به کنترلر Cost میرسد که ابتدا IPaymentMethodRepository را به آن تزریق نماییم. این کار را با استفاده از سازنده (Constructor) کنترلر Cost انجام میدهیم.

        private readonly ICostRepository costRepository;
        private readonly IPaymentMethodRepository paymentMethodRepository;

        public CostController(ICostRepository _costRepository, IPaymentMethodRepository _paymentMethodRepository)
        {
            costRepository = _costRepository;
            paymentMethodRepository = _paymentMethodRepository;
        }

با تغییرات فوق هر دو ریپازیتوری مربوط به Payment Method و Cost برای تمامی Action Method های این کنترلر قابل دسترس میباشد.

سپس به کنترلر CreateStronglyTypedView رفته و درون object ساخته شده از CreateCostViewModel لیست Payment Method و Payment Method مورد نظر را ذخیره میکنیم تا به View مربوطه ارسال کنیم.

        public IActionResult CreateStronglyTypedView()
        {
            List<SelectListItem> CatList = new List<SelectListItem>
               {
                   new SelectListItem{Text = "Grocery", Value = "Grocery", Selected=true },
                   new SelectListItem{Text = "Bill", Value = "Bill" },
                   new SelectListItem{Text = "Rent", Value = "Rent" },
                   new SelectListItem{Text = "Home Appliance", Value = "Home Appliance" },
               };
            CreateCostViewModel Model = new CreateCostViewModel
            {
                Amount = 100,
                Comment = "No Comment",
                Date = DateTime.Now,
                Categories = CatList,
                PaymentMethods = paymentMethodRepository.GetAll(),
                PaymentMethod = 3
            };

            return View(Model);
        }

RadioButtonFor

برای ایجاد Radio Button ها و واکشی آنها از مدل میتوانیم از حلقه Foreach استفاده نماییم. سپس درون بلاک کد حلقه از هلپر RadioButtonFor استفاده میکنیم. همچنین برای Value هر Radio Button از خصوصیت ID هر PaymentMethod استفاده میکنیم. ضمنا برای لیبل هر Radio Button میتوانیم از خصوصیت Method هر PaymentMethod استفاده کنیم.

            @foreach (var PM in Model.PaymentMethods)
            {
                    @Html.RadioButtonFor(m => m.PaymentMethod, PM.ID) @PM.Method
            }

برای عمودی شدن لیست Radio Button ها میتوان بعد از هر Radio Button از تگ <BR> استفاده نمود.

همچنین میتوان از Html Attribute هم درون Radio Button ها استفاده نمود که در ادامه میتوانید نحوه استفاده از آن را مشاهده کنید.

حلقه Foreach چیست؟

در صورتی که بخواهیم به تمامی عناصر یک لیست یا آزایه دست پیدا کنیم میتوانیم از این حلقه استفاده کنیم. حلقه زمانی پایان میابد که تمامی عناصر آن لیست یا آرایه پیمایش شده باشند. درون بلاک کد این حلقه توسط متغییر آن حلقه میتوان به تک تک عناصر لیست یا آرایه دسترسی پیدا کرد.

قطعه کد کامل مربوط به نمای CreateStronglyTypedView.

@model CreateCostViewModel

@{
    ViewBag.Title = "Create New Cost Record";
}

<div class="row">
    <div class="alert alert-primary col-lg-6 offset-lg-3 mt-5" role="alert">
        <h2>Create Cost Record</h2>
    </div>
    @using (Html.BeginForm("CreateStronglyTypedView", "Cost", FormMethod.Post, new { @class = "col-lg-6 offset-lg-3 border border-1" }))
    {
        <div>
            @Html.LabelFor(m => m.Amount, new { @class = "form-lable" })
            @Html.TextBoxFor(m => m.Amount, new { @class = "form-control" })
        </div>
        <div>
            @Html.LabelFor(m => m.Date, new { @class = "form-lable" })
            @Html.TextBoxFor(m => m.Date, new { @class = "form-control" })
        </div>
        <div>
            @Html.LabelFor(m => m.Category, new { @class = "form-lable" })
            @Html.DropDownListFor(m => m.Categories, Model.Categories, "Select a Category", new { @class = "form-control" })
        </div>
        <div>
            @Html.LabelFor(m => m.Comment, new { @class = "form-lable" })
            @Html.TextAreaFor(m => m.Comment, new { @class = "form-control" })
        </div>
        <div>
            @Html.Label("PaymentMethods", "Payment Methods", new { @class = "form-lable" })
            @foreach (var PM in Model.PaymentMethods)
            {
                <div class="form-check">
                    @Html.RadioButtonFor(m => m.PaymentMethod, PM.ID, new { @class = "form-check-input" }) @PM.Method
                </div>
            }
        </div>
        <div class="mt-2">
            <button type="submit" class="btn btn-primary btn-block mb-1">Create</button>
        </div>
    }

</div>

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

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

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

برچسب ها

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
0
افکار شما را دوست داریم، لطفا نظر دهید.x