During this session of ASP.NET 5.0 training, we use HTML Helpers in Strongly Typed View. In session 28 and session 29 we created a form with Label, TextBox, DropDownList and TextArea HTML Helper while we have not use Strongly Typed View. Now, We will design another form with another type of these Helpers in a Strongly Typed View.
Create Form with Html Helper in Strongly Typed View.
In this session, we want to create another Form same as the form that we designed in session 29, but this time we use strongly typed view. Thus, first we need to add another property to the CreateCostViewModel that store the SelectListItems.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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; } } |
Then, inside CostController we create an Action Method for the new Form.
|
1 2 3 4 5 6 7 |
public IActionResult CreateStronglyTypedView() { } |
Next, we create the SelectListItem that we want to use in the Drop Down List.
|
1 2 3 4 5 6 7 8 9 10 11 |
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" }, }; |
Now, we need to create an object of the ViewModel to store default values and the SelectListItems to be passed to the View.
|
1 2 3 4 5 6 7 8 9 10 11 |
CreateCostViewModel Model = new CreateCostViewModel { Amount=100, Comment="No Comment", Date = DateTime.Now, Categories = CatList }; |
Then, we need to pass this object to the View().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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 }; return View(Model); } |
After the above steps, we need to create a View inside Views/Cost to created Action Method. Also, we should use @model directive and bind it to the ViewModel
|
1 2 3 4 5 |
@model CreateCostViewModel |
Finally, we can create the form with LabelFor, TextBoxFor, TextAreaFor and DropDownListFor in the created strongly typed view.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div> @Html.LabelFor(m=> m.Amount) @Html.TextBoxFor(m=> m.Amount) </div> <div> @Html.LabelFor(m=>m.Date) @Html.TextBoxFor(m=>m.Date) </div> <div> @Html.LabelFor(m => m.Category) @Html.DropDownListFor(m=>m.Categories,Model.Categories,"Select a Category") </div> <div> @Html.LabelFor(m=> m.Comment) @Html.TextAreaFor(m=>m.Comment) </div> |
As you can see in above code, we don’t use “Expression” and “Default Values” in the helpers and just we bind each helper to the respective property of the ViewModel with Lambda Expression (for example m=>m.comment)
Also, we can use Html Attributes in the helpers and you can see 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 |
@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> <form 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 class="mt-2"> <button type="submit" class="btn btn-primary btn-block mb-1">Create</button> </div> </form> </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