In this session of ASP.NET Core tutorial, we modify the form that we implemented during previous sessions and add two more features to it with CheckBoxFor and ListBoxFor HTML Helper. As their names imply, these two helpers help us to create Check Box and List Box in our Views. Thus, with help of CheckBoxFor, we add this option to the form to make all Text Boxes empty or keep the data after form submission. Also, we enable clients to select more than one Category in the “Create New Cost Record: form with help of ListBoxFor.
CheckBoxFor
First, for adding the above mentioned Check Box, we need to add “MakeFormClear” property with type of Boolean to “CreateCostViewModel” View Model.
|
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; } } |
Then, we can set default amount for the created property Inside “CostController” Controller and “CreateStronglyTypedView” Action Method.
|
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); } |
Finally, we can add the Check Box to “CreateStronglyTypedView” View with help of CheckBoxFor HTML Helper.
|
1 2 3 4 5 |
@Html.CheckBoxFor(m=> m.MakeFormClear) Make Form Clear after Submission |
Moreover, same as other HTML Helper, we can use Html Attribute for CheckBoxFor.
|
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> |
HttpGet & HttpPost Methods
By default, all the Action Methods embark with HTTPGET method. It means whether we add HttpGet method above our Action Method or leave it without the method, they run with Get method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[HttpGet] public IActionResult CreateStronglyTypedView() { } OR public IActionResult CreateStronglyTypedView() { } |
But, if we want to run it with Post method, we should add HttpPost method above the respective Action Method.
|
1 2 3 4 5 6 7 8 9 |
[HttpPost] public IActionResult CreateStronglyTypedView(CreateCostViewModel Model) { } |
Generally, in ASP.NET Core (ASP.NET 5.0) MVC application, for the Action Method with Form which should be submitted with post method, we need to create two Action Methods with the exact same name. One of the Action Method should be decorated with or without [HttpGet] and the next one should be decorated with [HttpPost]. In this situation, first time that we call the Action Method, HttpGet Action method is embarked. Then, when we submit the Form, HttpPost Action Method will be executed.
|
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(); } |
Also, in the Action Method with Post Method, the Form Data is available through Input Parameter of the Action Method that its type can be the same as Model Directive of the Strongly Typed View.
ListBoxFor
For adding the mentioned List Box, we need to modify “CreateCostViewModel” View Model again and add proper property to store the list of selected categories.
|
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; } } |
Then, we can add the List Box inside “CreateStronglyTypedView” View with help of ListBoxFor HTML Helper.
|
1 2 3 4 5 |
@Html.ListBoxFor(m=> m.SelectedCategories,Model.Categories) |
As you can see, the List Box is bound to “SelectedCategories” property with lambda expression. Also, List Box same as Drop Down List needs List< SelectListItem> and here we used Model.Categories.
Also, you can check the way that we can use Html Attribute in DropDownList in below piece of code which is related to “CreateStronglyTypedView” View.
|
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> |
If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube. Also you can have access to list of all sessions HERE.
You can download this Session Slides form HERE