In this session of ASP.NET Core Tutorial, we continue our discussion about HTML Helper and we describe BeginForm and RadioButtonFor. During session 29 and 30, we develop a Form with HTML Helpers and in this session we improve our Form and add more features to it.
Thus, we will replace <form></form> HTML tag with BeginForm method. Then, we create a new Model for our new feature Which is Payment Method. Having said that, we reviewed creating Model, Interface and repository in session 15 and 16 and here we use those technique again. Also, we make our Radio Buttons of available Payment Method with help of RadioButtonFor.
BeginForm
This HTML Helper can be replaced with <form></form> HTML tag. This method of Html class has several versions of overloaded and we can select any of them which serve our requirement. Also, We can wrap BeginForm into @using and implement form element inside @using block of code. Moreover, we can set From Method through some of the overloaded versions, but by default it is POST.
|
1 2 3 4 5 6 7 8 |
@using (Html.BeginForm("CreateStronglyTypedView", "Cost", FormMethod.Post, new { @class = "col-lg-6 offset-lg-3 border border-1" })) { } |
Above overloaded version, contain: Action Method name, Controller name, Form Method and Html Attributes.
Payment Method Model, Interface and Repository
For the scenario of this session, we need one new Model which is PaymentMethod.
|
1 2 3 4 5 6 7 8 9 |
public class PaymentMethod { public int ID { get; set; } public string Method { get; set; } } |
Also, in sake of implementation of Dependency Injection we need an Interface for this Model.
|
1 2 3 4 5 6 7 8 |
public interface IPaymentMethodRepository { List<PaymentMethod> GetAll(); } |
Next, as we have not started Database topic, we create a Static Repository of this Interface and with help of GetAll() method will return the List of Payment Method that we created in this repository.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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; } } |
As we mentioned in session 16, we should add this service inside ConfigureService in Startup class.
|
1 2 3 4 5 |
services.AddSingleton<IPaymentMethodRepository, StaticPaymentMethodRepository>(); |
Also, we need to add PaymentMethod property to Cost Model.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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; } } |
PaymentMethod and list of PaymentMethod should be added to CreateCostViewModel for passing this data from/to controller/view.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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; } } |
Then, we can inject IPaymentMethodRepository to Cost controller to be accessible through all the Action Methods of Cost Controller.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
private readonly ICostRepository costRepository; private readonly IPaymentMethodRepository paymentMethodRepository; public CostController(ICostRepository _costRepository, IPaymentMethodRepository _paymentMethodRepository) { costRepository = _costRepository; paymentMethodRepository = _paymentMethodRepository; } |
Next, we should store sleected Payment Method and its List inside object of CreateCostViewModel. We do these changes in 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 |
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
For creating Radio Button in our form, we can use RadioButtonFor HTML Helper. Also, This helper has serval versions of overloaded that can serve our requirement. Moreover, for catching Payment Methods from the List we can use Foreach loop. In this example, we use ID property of PaymentMethod model as Radio Button Value and Method property of this model as Label of the Radio Button.
|
1 2 3 4 5 6 7 8 |
@foreach (var PM in Model.PaymentMethods) { @Html.RadioButtonFor(m => m.PaymentMethod, PM.ID) @PM.Method } |
For changing the direction of the Radio Button in vertical position we can use <BR> tag after each Radio Button.
Also, we can use HTML Attribute for this HTML Helper that you can see its sample in below piece of code.
|
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 |
@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> |
What is Foreach loop?
This loop is used to retrieve all the elements of a collection. Collection can be a list or array. The loop is ended when all the elements are retrieved. Also, all the element are accessible inside the loop block of code with its variable.
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