In this demonstration, I'll explain to you, how to work with the various HTML Form Controls Using the 1
ASP.NETCore MVC Form Tag Helpers. 2
So Notice, here, I have gone ahead and try to create a brand new ASP.NETCore MVC Web application 3
And it's a brand new application. 4
It doesn't have any new I mean, I haven't made any changes either in the controllers of the models or 5
the views. 6
But, before I go ahead and try to create views, and show you working with the various HTMML controls. 7
First of all, let me make a model, call it as a product model. 8
So, let's call this class as product and click on, OK? 9
And, each product belongs to a specific category. 10
So, I have two classes here. 11
So, some of you might be wondering, if I have to demonstrate you, Creating Views and then I mean to 12
demonstrate working with different Form Controls, why do we need models? 13
Yes, the answer is, I can create views, and where in those views are not bound to any models. 14
But, to use the Form Tag Helpers, that we have in ASP.NETCore MVC, we are expected to create such 15
views, which speaks to a model, which are bound to a model. 16
So, that is the reason I have created two new models, in the models folder. 17
So, as a developer, you spend a lot of time in creating your model successfully, then the ASP.NET 18
Core MVC scaffolding templates, will help you to create views pretty quickly. 19
So, we don't have to spend too much time in designing the views, as long as we do our groundwork home work. 20
A pretty nice way, at the time of creating our model class. 21
So, inside my product class, I'm going to take a bunch of the Auto implemented properties, like this. 22
So, notice here in my product class, Sorry, from the product model, I have a product ID, Product name, Product Description, 23
Quantity, So, I do have Cost, Bill Amount, Discount, Net Bill Amount, and I have wether this product as part 24
of any deal that is going on. 25
It's a boolean property here. 26
And, then I do have CategoryID, which is the foreign key for us in this products table. 27
And, I also have the other class category, as the property inside my product class, So, I can access the 28
category related information, with my product class object. 29
Also, I have payment type here. 30
Notice here, here, the types are really very important, like we have a couple of strings 31
integer, and then we have it as a boot, So, we get that as a checkbox. 32
So the scaffolding templates are intelligent enough to render a proper control, related to the data type 33
that you have given. 34
So, if I give it as a bool, you will get a checkbox. 35
If I give it as a date time, and then you get then you get a date picker. 36
So, that's the advantage of defining the data types correctly. 37
Now, interestingly, I do have a couple of properties like cost Bill amount, Discount like this. 38
OK, let's just focus on these three different properties here. 39
So, I have intentionally made them as nullable here. 40
So, the reason is if you make your properties as nullable at the time of defining your model class, 41
then those properties, then the text boxes becomes optional for you. 42
So, they are not mandatory columns for the user. 43
And, wherever they are not nullable, that means they become mandatory text boxes for you. 44
So, that's the reason why I have purposefully made these three different properties as nullable. 45
Also, I have a cost property here, and whose type is decimal and I'm just defining the column type name 46
As a decimal of 8, 2 by taking these annotations here system..component of the data 47
annotations.schema. 48
Also, it is a good practice to define the display formats for the different properties of your model 49
At the time of defining the model itself. 50
So, I'm just specifying the data format 51
string as 0:C2. Of course, the apply format. 52
In Edit mode is true. 53
That means you can go ahead and type the value, inside the text box. 54
So overall, though, this demonstration is majorly related to the views. 55
We have spent too much time, in defining our model because our view will be tied up to this, model. 56
So, that's how it becomes strongly, strongly typed views. 57
So, whatever properties that we have in this model class, we will be able to access them in the view 58
with the help of the new form tag helpers that we have, in ASP.NETCore MVC 59
Perfect. 60
So, now you know exactly why I added these format strings, here, and why we made them as nullable here. 61
And, depending on the data type like here, boolean we get a checkbox. 62
Whereas for the strings and integers, you will get text boxes. 63
And finally, we do have the category object, as a property inside the product class. 64
So, now let's go to the category.cs and define the required properties here. 65
So, the different properties for the category class, looks like this where . 66
And I have CategoryID, Category name. 67
And, I also have my because one category can have any number of products, like a one to many relationships. 68
I have a products as a IEnumerable of the type product, and it's just one of the property for us. Now, because 69
in this demonstration we're not really getting any data from the database. 70
So, I just want to have a few categories hardcoded in my solution. So, that I can populate these four categories 71
inside a drop down list. 72
So here, I'm going to define a list of the type select list item coming from the MVC.rendering. 73
And I'm going to call this property as categories. 74
And it's just a read-only property. 75
And, I'm defining a couple of selected list items, select list items for this property. 76
Now, I'm defining four different values here, now for each select list item, you're expected to have 77
a value on a text. 78
So, currently the purpose of this code is to help us, to fill a dropdown list, with these values. 79
So obviously, the text is what you see in the dropdown list, and the value is what you will read it 80
when you submit the form. 81
So, that is how inside my category class, we have hardcoded a couple of categories. 82
Of course, this products collection I'm not going to really use in this demonstration, but I've taken 83
it purposefully to tell you, like one category can have any number of products. 84
It's one to many relationship. 85
Whereas in the product class, we have category class property, which is a one to one relationship. 86
So, that is how, there will be relationships between your classes, just like how, we will have relationships 87
between the tables in our databases. 88
Perfect. 89
So, at this point of time, we are reasonably good with the creation of the models. 90
Now, it's time for us to go back to the controller, and the home controller is just having the index action. 91
So, probably what I will do, I will be creating this view one more time. 92
We, know that the the index action already has a view, but anyway, I'm going to replace it with the 93
view, that will have all the form controls here. 94
So, let's go back to the index action. 95
Right. 96
Click and click on ADD View. 97
And, it's going to be a Razor View, and I leave the Index view name as the index, and this time I'm going 98
to select my create template as the scaffolding template. 99
So, the reason is where you will get a data entry form here. 100
And, this has to be based on a model called as, product, we will be creating the data entry form for the 101
product, but not for the category. 102
I have taken it only to fetch those categories, and then have them inside the dropdown list. 103
Perfect, and then simply click on add button here. 104
So, because the view already does exist for us, I said I'm going to replace it. 105
Now, the scaffolding template is going to create the view with all the code for creating the form controls. 106
So, that is the advantage of creating a model, in place first and then you go ahead and try to create 107
the view based, on that model. 108
So, if I can go back to my index,.cshtml, Now, you can see there is a lot of code here. 109
So, now let me explain to you, what is the code that we got here? 110
The very first line is important here, @Model, and then my Namespace.Models folder.product. 111
So, this is a strongly typed model here. 112
And, then we have the form tag here. 113
So, whenever you are having your controls like Text boxes, Labels, Radio buttons, Dropdown, Check boxes. 114
Yes, all of them have to be inside your Form Tag. 115
So the ASP action is indexed. 116
So, that means when I click on the submit button. In this form, So, you can notice here, I have the submit 117
button here, Input type is submit, Value is Create a new product, and then we are using some bootstrap classes 118
here. 119
So, the moment I submit all this data will be submitted to the index action of which controller. 120
So, if you don't specify the controller by default, it uses the same controller to which this view belongs. 121
So, otherwise you may optionally specify a ASP controller =home controller. 122
And obviously, we we can also specify the method by ourselves. So, If we don't specify anything, it is 123
post. 124
So, I'm going to say method =post, if you wish. 125
So, that is how, we now have a complete form tag here. 126
So, where in we are using, asp controller, asp action, of course, the method. Now. 127
The very first line you can see here, is the ASP validation summary,=model only, and then there 128
is a bootstrap class. 129
So, this will help us to show any error messages, that if any, validation fails, for us. Now the 130
validation summary can have two different values. 131
One is All. 132
The other one is Model only. 133
So, what is the difference here? 134
So, if I leave this as Model only, which is what we got by default, it will only show you those error 135
messages, where the validations are failed at model level. 136
That means that a class level, not at the column level or the individual properties of the class. 137
So, if I specify it as all, then it is going to show me, the error messages at model level as well 138
as the messages at properties level. 139
So when we run this view, I'll try to change these values for you. 140
OK, then we have plenty of div's here. 141
Now, each div has got to one element for us. 142
Now, let's concentrate on the very first one. 143
So, the first form Tag helper we will be focusing is on the label tag here. 144
So, there is a label, and there is an input tag here, some saying label. 145
And then, there is a bootstrap class now, this label you are using it for which textbox, and that textbox 146
speaks to which property. 147
So, you know, in the product class, we have a product ID here. 148
So, I'm saying label ASP for that product ID Property in your product model. 149
Then, input ASP for product ID and then there is a bootstrap class here. 150
So, this is the label that is it is going to use for these textbox product ID. 151
So, this name should be exactly similar to the name, that we have in your model. 152
And if suppose we did not specify this as a nullable property here. 153
So, that means people are supposed to enter the value for product ID 154
Definitely. 155
That means it is a required field. 156
So, if we don't enter any value in the product ID, and then we click on the submit button, then the ASP 157
valuation for, will firing and then it will show me, the error message with the help of the ASP validation 158
for using a Span tag. 159
So, this validation is for this property. 160
And ,of course we do have the bootstrap class Perfect. 161
So, that is how literally for every control, that you wish to see, on the screen, there are three lines 162
of code. 163
One, there's a label, there's a text box, and then there is this Span tag here. 164
So by default, if we don't specify the type, it is basically text box for you. 165
So, that's the reason we're not supplying input type =textbox like that. 166
Perfect. 167
So, can I also go to the next one, which is the product name? 168
So, I don't have to explain much in the product name. 169
Then let's go to the products description. 170
Now, interestingly, the product description can be in multiple lines, but the scaffolding template 171
has created my input element here. 172
So, what I will do, I'll change this to text area, asp for product description class = so-and-so, 173
And, then we will close the text area. 174
Perfect. 175
And, then we do have the validation error message for the product description as well. 176
So, so what does that mean? 177
Like by default, the view what Got created, was with the help of the scaffolding template. 178
But, we as developers are not happy with, what is getting rendered, as part of the scaffolding template 179
auto generated code. 180
We, are pretty much welcome to make changes to this code by Ourself. 181
Nice now. 182
OK, we have the quantity. 183
There's nothing very new there, and then we have the cost. 184
And then we have the. 185
Bill amount. 186
And, then we have Discount, and of course, we do have the Net Bill Amount. 187
Now, notice here, we have made the Bill amount, Discount and the Net bill amount, as nullable properties 188
At the time of defining, the class properties. 189
The reason is these three are calculated, calculated fields. 190
So, we will not be entering any data by ourselves at the time of filling the form. 191
So, depending on the Cost, value, and Quantity wherein, we will multiply these two things to get the 192
Bill amount. 193
And, if it is part of any ongoing deal, then we will be getting some kind of discount and the net bill amount 194
has to be the bill amount - the discount here. 195
So, that's the plan I have. 196
So, because we made them as nullable properties, and these things will be. 197
We do not want people to enter the values by themselves, So the advantage is it doesn't mean that they 198
become read-only text boxes for you. 199
If we don't enter any value for the cost, for the bill amount Discounts, and Net Bill amount, validations 200
will not fire. 201
So, that's the advantage of making them as nullable properties. 202
So, if we do not want people to enter any value by themselves, inside the these text boxes, then what 203
we can do for each text box, you can say Read-Only = Read-Only. 204
So, what I'm going to do, I'm going to copy this, and we're going to have this for the discount. 205
And, we're also going to have this for the net. 206
Bill amount. 207
Perfect. 208
Then we have the IsPartOfDeal here, which is basically we're expecting a check box, because it's 209
a Boolean property. 210
Now, interestingly, you can notice here, the css class, for this is the bit different. is label class 211
= form check label, whereas for the other labels, we were having the bootstrap class as control 212
label. 213
So here, we have it as form check label. 214
And, even for this input class is, form check input and asp for IsPartOfDeal. 215
So, asp for means, you need to supply the property name to which this control has to speak. 216
So, anything that you do with this control, its value goes to this property in the model. 217
Then also, we are having some kind of caption for this checkbox, So, how I grab the caption of the 218
property, which is the IsPartOfdeal here 219
So, fortunately, we can still use the HTML helper methods, that we have in ASP.MVC, even in the ASP.NETCore MVC. 220
So, I'm just saying, @HTML.my helper method, is the display name for and then Model. 221
IsPartOfDeal. 222
So, where I say model.we should be able to see all the properties of the model, to which this view 223
is bound. 224
So, notice here, this is a small model. 225
And, if you see the very first line is @model here. 226
So, this is just that lambda expression property, what we are having, which can be anything of your 227
choice 228
here. 229
So, display named for is purely meant for displaying the caption, for this checkbox. 230
OK. 231
Now, interestingly, we have category ID here, and we do have payment types, they are coming as text 232
boxes for you, but I don't want to see them as text boxes. 233
Rather, I want to see this category as a dropdown list. 234
So, what I can do, I can remove this input tag here, and here. 235
I'm going to show you the code for creating a dropdown list. 236
And, we will fill the dropdown list, initially by ourselves, by hard coding the values inside the view. 237
And, then I will have another dropdown list, that will fetch the values, that we have in the categories 238
collection. So, let's see the code for creating the dropdown list. 239
So, the code for creating the dropdown list, looks like this, first of all, let me remove this entire 240
div tag, and let me have the new code here. 241
Now, first of all, after my IsPartOfDeal, notice here, I have one div here, I'll explain about 242
the other dropdown lists, that I have here pretty shortly. In the very first scenario, I'm going to show 243
you how you can fill the dropdown list, by yourself, by hardcoding the values inside your view. 244
So first, I have a label, Label asp for, CategoryID, and then I'm using the select tag unlike the 245
label auto input, asp for categoryID. 246
You, can see in the product model we do have the category ID, to which this product belongs. 247
And then the class is form controlled. 248
Now, you can supply some options by yourself. 249
So just like how we doing, normal, HTML, option value is one. 250
This, is what you see inside the dropdown list. 251
So, whatever value that the user selects in this dropdown, that value 1, 2, 3, 4 goes 252
to this property. 253
Perfect. 254
You may also optionally have an extra property, something like say, please select a category. 255
Nice now. 256
I do have another name div tag here, but this time I do not wish to hard code the values, I wish to grab 257
the categories, the through code, the ones that we have given in the category.cs 258
So this time I'm saying select asp for is the category 259
ID. Now, the new thing is the Asp items. 260
So, for the time being, I'm showing you here, I'm going to grab these items from the view bag. 261
viewbag collection, view bag. categories, of course I haven't created this view bag still in my controller. 262
I'll be doing that pretty shortly. 263
So this is the code for creating the dropdown list, but if you wanted to have it as a listbox, the 264
only difference that you need to do is to specify the size, because we have four products, sorry, four 265
categories I'm giving. 266
I'm going to get the size as two. 267
So, you get a chance to see a list box here. 268
Again, this list box is going to get the data from the view bag collection. 269
Perfect. 270
So at this stage, we are OK with the dropdowns here. 271
Now, where is this view bag. categories. 272
So. let me take you to the home controller and then inside my index action. 273
So first of all, I'm going to say my view bag.categories = we need to access this 274
categories of the category class. 275
So, for the time being, what I can do, inside my home controller, I will be creating. 276
Anobject for my category. 277
And then we go into. 278
Access those categories, So, I'm going to say obj category. then I'm going to access my categories. 279
So, all the categories which we have hardcoded in the category class, I'm going to. 280
Read and then store them inside my view bag categories. 281
Now, this view bag.categories, is what I have given here as well as here. 282
Perfect. 283
So that is how, we are successful with the dropdown. 284
Now, the last thing that I want to show you is here, in the case of my payment type, imagine the payment 285
types can be credit card ,or debit card, or net banking, and so on. 286
We want to have them as radio buttons. 287
So, let me have the code for creating the radio buttons now. 288
So, the code looks like this, for creating the radio buttons here, you can see inside this, div, I have 289
a label, call it as payment type, asp for, then in each div,, I'm going to have one one radio button. 290
Of course, I'm using the label class, as a radio in line, as a bootstrap class, but I'm still trying 291
to take them in different tags, here, different div tags. So, some saying input type =radio. 292
And then the bootstrap class asp for is the payment type, and the value is by default credit card. 293
And then we have a caption credit card here. 294
Similarly, we have another radio button, for net banking, and another radio button for debit card. 295
And all these three radio buttons are bound to the same property. 296
So at this stage, we are done with the creation of the form Now, in the next lecture 297
I'll show you, when we submit. 298
How do we receive that data?