Instagram Youtube Telegram

CheckBoxFor و ListBoxFor – جلسه ۳۲

Checkboxfor & ListBoxFor HTML Helper - Session32

در این جلسه از آموزش ASP.NET Core، به معرفی CheckBoxFor و ListBoxFor خواهیم پرداخت و با این دو HTML Helper آشنا خواهیم شد. همانگونه که از نام این هلپرها مشخص میباشد، جهت ایجاد Check Box و List Box در فرم مورد استفاده قرار میگیرند. پس قصد داریم به فرمی که در جلسات گذشته ایجاد نمودیم یک Check Box جهت دادن انتخاب به کاربر برای پاک کرن یا نکرن Text Boxها پس از سابمیت فرم ایجاد کنیم. همچنین با استفاده از List Box امکان انتخاب چندیدن دسته را در زمان ورود اطلاعات بدهیم.

CheckBoxFor

برای اضافه نمودن Check Box اشاره شده به فرم، ابتدا یک خصوصیت از نوع Bool با نام MakeFormClear درون CreateCostViewModel ایجاد میکنیم.

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
    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; }
        public bool MakeFormClear { get; set; }
    }
 
 

سپس میتوانیم درون CostController و اکشن متد CreateStronglyTypedView برای این خصوصیت، مقدار پیش فرض تعیین نمود.

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 
        public IActionResult CreateStronglyTypedView()
        {
            List<SelectListItem> CatList = new()
            {
                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()
            {
                Amount = 100,
                Comment = "No Comment",
                Date = DateTime.Now,
                Categories = CatList,
                PaymentMethods = paymentMethodRepository.GetAll(),
                PaymentMethod = 3,
                MakeFormClear = false
            };
 
            return View(Model);
        }
 
 

در ادامه به نمای CreateStronglyTypedView رفته و با استفاده از CheckBoxFor HTML Helper اقدام به ایجاد Check Box مربوطه میکنیم.

XHTML
1
2
3
4
5
 
 
@Html.CheckBoxFor(m=> m.MakeFormClear) Make Form Clear after Submission
 
 

ضمنا مانند دیگر HTML Helperها امکان استفاده از Html Attribute نیز میسر میباشد.

XHTML
1
2
3
4
5
6
7
 
 
        <div class="form-check">
            @Html.CheckBoxFor(m=> m.MakeFormClear, new { @class = "form-check-input" }) Make Form Clear after Submission
        </div>
 
 

متدهای HTTPPOST و HTTPGET

به صورت پیشفرض، اگر برای هر Action Method نوع ارسال داده ذکر نگردد، آن اکشن متد، از متد GET استفاده مینماید. پس میتوان برای اجرای یک اکشن متد با متد GET، بالای آن اکشن متد از [HttpGet] استفاده نمود و یا چیزی ذکر نکرد.

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
        [HttpGet]
        public IActionResult CreateStronglyTypedView()
        {
 
        }
 
 
         OR
        public IActionResult CreateStronglyTypedView()
        {
 
        }
 
 

ولی درصورتی که نمای ما دارای یک فرم باشد، و بخواهیم داده فرم را به صورت متد POST به کنترلر ارسال نماییم، میبایست قبل از نام آن Action Method از متد [HttpPost] استفاده نماییم.

C#
1
2
3
4
5
6
7
8
9
 
 
        [HttpPost]
        public IActionResult CreateStronglyTypedView(CreateCostViewModel Model)
        {
 
        }
 
 

به طور کلی در ASP.NET Core MVC برای هر اکشن‌متدی که دارای فرم میباشد میبایست دو اکشن‌متد همنام، یکی با متد Get و دیگری با متد Post ایجاد نمود. در این حالت که ابتدا اکشن ‌متد با متد Get اجرا میگردد. سپس، در زمان سابمیت، فرم اکشن‌متد مربوطه با متد Post فراخوانی و اجرا میگردد.

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
 
        [HttpGet]
        public IActionResult CreateStronglyTypedView()
        {
            List<SelectListItem> CatList = new()
            {
                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()
            {
                Amount = 100,
                Comment = "No Comment",
                Date = DateTime.Now,
                Categories = CatList,
                PaymentMethods = paymentMethodRepository.GetAll(),
                PaymentMethod = 3,
                MakeFormClear = false
            };
 
            return View(Model);
        }
        [HttpPost]
        public IActionResult CreateStronglyTypedView(CreateCostViewModel Model)
        {
            return View();
        }
 
 

همچنین در اکشن‌متد با متد Post داده‌های فرم از طریق پارامترهای ورودی آن متد قابل دسترس میباشد. نوع این داده میتواند از نوع Model Directive همان نما باشد.

ListBoxFor

برای اضافه نمودن List Box شرح داده شده، ابتدا یک خصوصیت با نام SelectedCategories از نوع لیست رشته ایی درون CreateCostViewModel ایجاد میکنیم.

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
    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 List<string> SelectedCategories { get; set; }
        public int PaymentMethod { set; get; }
        public List<PaymentMethod> PaymentMethods { get; set; }
        public bool MakeFormClear { get; set; }
    }
 
 

سپس، به نمای CreateStronglyTypedView رفته و List Box خود را توسط متد ListBoxFor ایجاد میکنیم.

XHTML
1
2
3
4
5
 
 
@Html.ListBoxFor(m=> m.SelectedCategories,Model.Categories)
 
 

همانگونه که مشاهده نمودید، List Box از طریق Lambda Expression به خصوصیت ایجاد شده متصل می گردد. ضمنا List Box مانند Drop Down List نیاز به یک لیست از SelectListItem دارد که ما از خصوصیت Categories استفاده نمودیم.

همچنین در قطعه کد کامل مربوط به نمای CreateStronglyTypedView نحوه اضافه نمودن Html Attribute به ListBoxFor را میتوانید مشاهده نمایید.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
 
@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.Category, Model.Categories, "Select a Category", new { @class = "form-control" })
        </div>
        <div>
            @Html.ListBoxFor(m=> m.SelectedCategories,Model.Categories, new { @class = "form-select" })
        </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="form-check">
            @Html.CheckBoxFor(m=> m.MakeFormClear, new { @class = "form-check-input" }) Make Form Clear after Submission
        </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