ASPNET MVC Bootstrap Responsive Web Programming Lecture 10 Tag Helpers TempData Annotations

ASP.NET - MVC - Bootstrap Responsive Web Programming, Lecture 10: Tag Helpers, TempData, Annotations

Full tutorial link > https://www.youtube.com/watch?v=Jo6gQ7Od0tM

#SoftwareDevelopment #Software #Engineering #CSharp #Coding #Course

Asp.NET Core V5 - MVC Pattern - Bootstrap V5 - Responsive Web #Programming with C# Full Course Playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffsnAWtgk4ja3HN3xgMKF7BOE

GitHub repository of the course : https://github.com/FurkanGozukara/Responsive-Web-Design-With-ASP.NET-5-and-MVC-Pattern-and-BootStrap-5-2021

Discord channel link of the course : https://discord.gg/6Mrb8MwteQ

How to use Discord : https://youtu.be/AEwPtYiLvsQ

In lecture 10:

What are tag helpers
How to enable tag helpers in all views with using ViewImport
How to utilize tag helpers
How to use form tag helpers
How to post specific controller and action with html tag helpers
How to define custom route for forms with tag helpers and routing
How to redirect back to specific view after a post back while keeping the model
How to save model between RedirectToAction by using TempData
What is TempData and is it session safe
How to store objects of complex classes in TempData
Examples for the following attribute annotations: Display, Display Name, Phone, EmailAddress, DataType, Password, Date, MultilineText
HttpGet and HttpPost requirements on Controller Actions
How to generate multi-line supporting input with TextArea
What is self closing tag
What is antiforgery and why it is using
How to enable antiforgery at the controller and do check server side

last page : https://asp.mvc-tutorial.com/layout/introduction/

Please subscribe and make comments.

This course requires fundamental knowledge about programming and C#. So please watch our below playlists related to C#.

Our courses playlists are like below:

[1] Introduction to Programming Full Course with C# playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffskoSXySh0MdiayPJsBZ7m2o

[2] Advanced #Programming with C# Full Course Playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffslHaBdS3RUW26RKzSjkl8m4

[3] Object Oriented Programming Full Course with C# playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffsnH3XJb66FDIHh1yHwWC26I

[4] Asp.NET Core V5 - MVC Pattern - Bootstrap V5 - Responsive Web #Programming with C# Full Course Playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffsnAWtgk4ja3HN3xgMKF7BOE

[5] Artificial Intelligence (AI) and Machine Learning (ML) Full Course with C# Examples playlist: https://www.youtube.com/playlist?list=PL_pbwdIyffskVschrADCL6KEnL_nqDtgD

[6] Software Engineering Full Course playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffslgxMVyXhnHiSn_EWTvx1G-

[7] Security of Information Systems Full Course playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffslM_o92NwkaUzD7C6Fekx26

[8] (Turkish) Bilgisayar Becerileri Tam Ders playlist : https://www.youtube.com/playlist?list=PL_pbwdIyffsmyE2e909ea1MXLcMb8MenG

auto subtitle timing : NA

Video Transcription

00:00:02 hello dear students welcome to the lecture 10
00:00:03 lecture 10 of responsive web design with asp.net 5
00:00:06 of responsive web design with asp.net 5 and mvc patan and bootstrap 5.
00:00:09 and mvc patan and bootstrap 5. so uh today we will continue
00:00:13 so uh today we will continue our course from
00:00:16 our course from with tag helpers and let's start with
00:00:19 with tag helpers and let's start with cloning our
00:00:20 cloning our project as usual
00:00:46 okay so talk helpers let's start reading it tag helpers
00:00:51 let's start reading it tag helpers introduction in this article
00:00:54 introduction in this article i'll be going through a bit of
00:00:56 i'll be going through a bit of asp.asp.net history
00:00:58 asp.asp.net history and tell you how microsoft came up with
00:01:00 and tell you how microsoft came up with the concept of tag helpers
00:01:02 the concept of tag helpers in case you just want to see how they
00:01:04 in case you just want to see how they are used and you don't care too much
00:01:06 are used and you don't care too much about the journey that led to tag
00:01:07 about the journey that led to tag helpers
00:01:08 helpers you may choose to skip to the summary in
00:01:10 you may choose to skip to the summary in the bottom of the article
00:01:11 the bottom of the article and then move on to the next articles
00:01:13 and then move on to the next articles where we'll see how the various tag
00:01:14 where we'll see how the various tag helpers work
00:01:17 helpers work when microsoft replaced asp classic with
00:01:19 when microsoft replaced asp classic with what we today
00:01:20 what we today refer to as asp.net web forms they
00:01:23 refer to as asp.net web forms they introduced the concept of controls to
00:01:25 introduced the concept of controls to the world of coding for the web
00:01:27 the world of coding for the web this was a well-known concept when
00:01:29 this was a well-known concept when creating applications for the desktop
00:01:31 creating applications for the desktop but not for the web controls allowed you
00:01:34 but not for the web controls allowed you to get a lot of out of the box
00:01:35 to get a lot of out of the box functionality by writing tags which were
00:01:38 functionality by writing tags which were then interpreted by asp.net
00:01:40 then interpreted by asp.net and turned into regular html and css
00:01:43 and turned into regular html and css before reaching the browser
00:01:45 before reaching the browser from markup to server controls
00:01:49 from markup to server controls microsoft basically implemented server
00:01:51 microsoft basically implemented server controls for all the common html
00:01:53 controls for all the common html controls like the asp text box which
00:01:57 controls like the asp text box which would be rendered as an input or text
00:01:59 would be rendered as an input or text area html tag
00:02:00 area html tag or the asp label however they also went
00:02:04 or the asp label however they also went beyond that with controls like the asp
00:02:06 beyond that with controls like the asp data grid which would take a lot of
00:02:08 data grid which would take a lot of parameters and options
00:02:10 parameters and options and then be rendered as a complete table
00:02:11 and then be rendered as a complete table with columns and rows based on the
00:02:13 with columns and rows based on the configuration and the data source
00:02:17 configuration and the data source unfortunately the concept of the asp.net
00:02:20 unfortunately the concept of the asp.net web form
00:02:21 web form server controls never felt completely
00:02:23 server controls never felt completely natural for all developers
00:02:25 natural for all developers the server controls were initially
00:02:27 the server controls were initially created to save time
00:02:28 created to save time and code by allowing you to quickly
00:02:30 and code by allowing you to quickly implement even advanced functionality
00:02:32 implement even advanced functionality with few lines of markup
00:02:34 with few lines of markup okay so uh this is important to
00:02:36 okay so uh this is important to understand
00:02:37 understand the server controls with web forms
00:02:40 the server controls with web forms are really easy to use really quick to
00:02:43 are really easy to use really quick to start
00:02:44 start however it also has downsides so with
00:02:48 however it also has downsides so with isp.net web forms you can quickly build
00:02:51 isp.net web forms you can quickly build your website uh runner and make it
00:02:53 your website uh runner and make it running uh
00:02:55 running uh and put it to production however it also
00:02:59 and put it to production however it also comes with downsides
00:03:00 comes with downsides uh for example i have my project since i
00:03:04 uh for example i have my project since i have been developing
00:03:05 have been developing uh since uh my graduation from
00:03:08 uh since uh my graduation from university
00:03:09 university monster mmrpg this is done with
00:03:13 monster mmrpg this is done with asp.net web forms uh however
00:03:16 asp.net web forms uh however uh right now i am so much
00:03:22 uh right now i am so much regretting that i didn't follow the
00:03:25 regretting that i didn't follow the uh that time standards because
00:03:29 uh that time standards because now it is very hard to change things and
00:03:32 now it is very hard to change things and make them
00:03:33 make them adapt them to recent technology
00:03:37 adapt them to recent technology so i can tell you that
00:03:40 so i can tell you that if i were gonna do this project now
00:03:43 if i were gonna do this project now i would definitely choose asp.net
00:03:47 i would definitely choose asp.net mvc not the web forms
00:03:51 mvc not the web forms markup but instead of saving time you
00:03:54 markup but instead of saving time you would often find yourself
00:03:55 would often find yourself writing more code to work around odd
00:03:57 writing more code to work around odd cases which the server controls didn't
00:03:59 cases which the server controls didn't fully support another major complaint about
00:04:03 support another major complaint about the asp.net web form server control was
00:04:06 the asp.net web form server control was the lack of control over the resulting
00:04:08 the lack of control over the resulting html by abstracting away the actual html
00:04:11 html by abstracting away the actual html into server controls
00:04:13 into server controls asp.net web forms would then be in
00:04:15 asp.net web forms would then be in charge of generating the output to the
00:04:17 charge of generating the output to the browser
00:04:17 browser and this became a problem for two
00:04:19 and this became a problem for two reasons
00:04:21 reasons first of all sometimes the resulting
00:04:23 first of all sometimes the resulting html would not work in all browsers
00:04:26 html would not work in all browsers back in the days when asp.net web forms
00:04:29 back in the days when asp.net web forms was the at its peak
00:04:30 was the at its peak there were big differences in how
00:04:32 there were big differences in how various browsers would respond to the
00:04:34 various browsers would respond to the html
00:04:35 html and css you provided it with since you
00:04:38 and css you provided it with since you didn't control the html and css
00:04:40 didn't control the html and css generated
00:04:41 generated you could run into rendering issues
00:04:43 you could run into rendering issues which now became almost impossible to
00:04:45 which now became almost impossible to fix
00:04:47 fix second of all a lot of purists out there
00:04:49 second of all a lot of purists out there demanded the html to be formatted in a
00:04:52 demanded the html to be formatted in a specific way
00:04:53 specific way even though the browser didn't care as
00:04:55 even though the browser didn't care as an example
00:04:56 an example you can write html tags in uppercase or
00:04:59 you can write html tags in uppercase or lowercase
00:05:00 lowercase you can use single quotes or double
00:05:02 you can use single quotes or double quotes for attribute slash values and so
00:05:04 quotes for attribute slash values and so on
00:05:05 on the browser doesn't care but a lot of
00:05:07 the browser doesn't care but a lot of programmers are used to case sensitive
00:05:09 programmers are used to case sensitive programming languages
00:05:10 programming languages and their eyes hurt when the html they
00:05:12 and their eyes hurt when the html they wrote wasn't formatted the same way as
00:05:14 wrote wasn't formatted the same way as the html generated by the server
00:05:16 the html generated by the server controls
00:05:18 controls from server controls to html helpers
00:05:22 from server controls to html helpers for this reason microsoft decided to
00:05:25 for this reason microsoft decided to completely leave out the server controls
00:05:27 completely leave out the server controls when they implemented asp.net mvc
00:05:30 when they implemented asp.net mvc they had listened to the developers and
00:05:32 they had listened to the developers and the developers wanted full control of
00:05:34 the developers wanted full control of the generated markup
00:05:35 the generated markup even if they had to write it all
00:05:37 even if they had to write it all themselves for this
00:05:39 themselves for this they invented the razer language already
00:05:41 they invented the razer language already explained in detail in this tutorial
00:05:43 explained in detail in this tutorial which allowed you to combine programming
00:05:45 which allowed you to combine programming logic like if statements and loops with
00:05:47 logic like if statements and loops with regular markup
00:05:49 regular markup people were generally happy with this
00:05:51 people were generally happy with this new approach but something was lacking
00:05:54 new approach but something was lacking microsoft always strives to make things
00:05:56 microsoft always strives to make things easier for developers and right now
00:05:58 easier for developers and right now too much markup and razor code was
00:06:00 too much markup and razor code was written without the ability to connect
00:06:02 written without the ability to connect the model data with its visual
00:06:04 the model data with its visual representation in the view
00:06:06 representation in the view for this reason they introduced html
00:06:08 for this reason they introduced html helpers
00:06:10 helpers the concept of html helpers allowed you
00:06:13 the concept of html helpers allowed you to generate markup for your model data
00:06:15 to generate markup for your model data especially when generating forms and its
00:06:18 especially when generating forms and its elements
00:06:19 elements for instance if you were to create an
00:06:21 for instance if you were to create an input field for the title property of
00:06:23 input field for the title property of your model
00:06:23 your model you would write markup like this
00:06:26 you would write markup like this input type equals text name equals title
00:06:29 input type equals text name equals title value equals at model
00:06:31 value equals at model title slash with the introduction of
00:06:34 title slash with the introduction of html helpers
00:06:35 html helpers you could instead call the text box for
00:06:38 you could instead call the text box for method on the html helper class
00:06:40 method on the html helper class to have this tag generated automatically
00:06:44 to have this tag generated automatically at html dot text box for model equals
00:06:47 at html dot text box for model equals model
00:06:47 model title okay we have already seen that and
00:06:50 title okay we have already seen that and make examples of them in our previous
00:06:55 examples of them in our previous lecture let's open our wheels to see
00:06:58 lecture let's open our wheels to see [Music]
00:07:00 [Music] okay in lecture nine cs html okay
00:07:04 okay in lecture nine cs html okay we have html label for so this generates
00:07:07 we have html label for so this generates automatic
00:07:08 automatic markup and we have also asp push
00:07:12 markup and we have also asp push this also generates you see input value
00:07:14 this also generates you see input value asp port
00:07:17 asp port and this or this also generates input
00:07:20 and this or this also generates input output
00:07:21 output however we also need to add a tag helper
00:07:25 however we also need to add a tag helper reference to our uh to the
00:07:28 reference to our uh to the top of our page okay let's continue
00:07:33 top of our page okay let's continue title it's shorter and you get the added
00:07:36 title it's shorter and you get the added benefit of compile time checking of the
00:07:38 benefit of compile time checking of the razor code if the title property
00:07:40 razor code if the title property suddenly stops existing
00:07:41 suddenly stops existing eg because you renamed it the compiler
00:07:44 eg because you renamed it the compiler will complain about it
00:07:46 will complain about it from html helpers to tag helpers
00:07:51 from html helpers to tag helpers thanks to html helpers binding your
00:07:53 thanks to html helpers binding your model data together with the markup in
00:07:55 model data together with the markup in your views
00:07:56 your views is now a lot easier but a problem from
00:07:58 is now a lot easier but a problem from the days of server control
00:07:59 the days of server control still exists since the markup has been
00:08:02 still exists since the markup has been abstracted into helper methods
00:08:03 abstracted into helper methods these helper methods are now responsible
00:08:05 these helper methods are now responsible for generating your html
00:08:07 for generating your html and they also have to be flexible enough
00:08:09 and they also have to be flexible enough to support all the ways you might want
00:08:11 to support all the ways you might want to use them
00:08:12 to use them consider our example from before but now
00:08:15 consider our example from before but now imagine that we want to add a couple of
00:08:17 imagine that we want to add a couple of properties with values to the html
00:08:19 properties with values to the html generated
00:08:20 generated okay so we are adding properties like
00:08:23 okay so we are adding properties like here near class equal to this style equal to
00:08:26 near class equal to this style equal to this
00:08:27 this okay we also have an example of that in
00:08:30 okay we also have an example of that in our code like here playful placeholder
00:08:33 our code like here playful placeholder is equal to this
00:08:35 is equal to this and like this is the format output
00:08:38 and like this is the format output like this and the type of the output
00:08:42 like this and the type of the output like this
00:08:43 like this however it is still not
00:08:47 however it is still not as good as directly writing as html
00:08:51 as good as directly writing as html but also binding it to server side
00:08:54 but also binding it to server side controls and it is possible
00:08:56 controls and it is possible with asp4 this is tag helpers
00:08:59 with asp4 this is tag helpers so these are html helpers and these are
00:09:02 so these are html helpers and these are tag helpers
00:09:03 tag helpers let's continue
00:09:09 the example is now way less elegant than it was before
00:09:10 it was before just because we wanted to add a class
00:09:12 just because we wanted to add a class and style property with values to the
00:09:14 and style property with values to the input tag
00:09:15 input tag to some developers this approach never
00:09:18 to some developers this approach never felt natural either they didn't like the
00:09:19 felt natural either they didn't like the mix of c sharp code in the razer syntax
00:09:22 mix of c sharp code in the razer syntax with inline css
00:09:23 with inline css or even javascript especially in large
00:09:27 or even javascript especially in large forms
00:09:27 forms the constant mix of regular html tags
00:09:30 the constant mix of regular html tags and razer calls to html helper methods
00:09:32 and razer calls to html helper methods could look really messy
00:09:35 could look really messy microsoft decided to solve this problem
00:09:37 microsoft decided to solve this problem by taking the best from both worlds
00:09:39 by taking the best from both worlds with tag helpers you write regular html
00:09:42 with tag helpers you write regular html tags instead of razer commands
00:09:44 tags instead of razer commands but you can mix in custom server side
00:09:46 but you can mix in custom server side attributes which will allow you to
00:09:48 attributes which will allow you to for instance easily bind to data from
00:09:50 for instance easily bind to data from your model
00:09:51 your model okay this is really important let's
00:09:53 okay this is really important let's repeat this
00:09:56 repeat this microsoft decided to solve this problem
00:09:58 microsoft decided to solve this problem by taking the best from both worlds
00:10:00 by taking the best from both worlds with tag helpers you write regular html
00:10:03 with tag helpers you write regular html tags instead of razer commands
00:10:05 tags instead of razer commands but you can mix in custom server side
00:10:07 but you can mix in custom server side attributes which will allow you to
00:10:08 attributes which will allow you to for instance easily bind to data from
00:10:11 for instance easily bind to data from your model
00:10:12 your model so with tag helpers we write regular
00:10:14 so with tag helpers we write regular html but we can also bind it to the
00:10:17 html but we can also bind it to the server side controls and this is exactly
00:10:19 server side controls and this is exactly what we
00:10:20 what we would like to have okay
00:10:23 would like to have okay with tag helpers we can rewrite our
00:10:26 with tag helpers we can rewrite our previous example to something like this
00:10:28 previous example to something like this okay so this is regular html input this
00:10:31 okay so this is regular html input this is the uh
00:10:32 is the uh h tag helper sp 4 you see this is tag
00:10:35 h tag helper sp 4 you see this is tag helper
00:10:36 helper this is regular html and this is also
00:10:39 this is regular html and this is also regular html
00:10:41 regular html so here we are binding it to
00:10:45 so here we are binding it to title property of the model you see here
00:10:54 okay so before continuing let's start our lecture 10
00:10:56 our lecture 10 view and start doing examples to
00:10:59 view and start doing examples to understand
00:10:59 understand it better first i will rename project
00:11:02 it better first i will rename project lecture 10
00:11:14 usually when you are doing programming you should always do
00:11:16 you should always do examples and with that way you will only
00:11:19 examples and with that way you will only understand it
00:11:21 understand it uh perfectly or better we can say
00:11:26 uh perfectly or better we can say okay let's add lectures on controller
00:11:43 okay and let's add our lecture term here
00:11:54 okay i will add it under pad a folder actually
00:12:25 okay so we have our view we have our controller we need to
00:12:27 controller we need to route website uh
00:12:30 route website uh index as lecture 10 so to that i need to
00:12:34 index as lecture 10 so to that i need to remove this and i will
00:12:44 i will change this to back as lecture nine okay like this
00:12:57 okay so with this approach we should be able to access lecture nine
00:13:00 able to access lecture nine and root of lecture ten will be
00:13:03 and root of lecture ten will be like this okay
00:13:07 like this okay and then and by the way we have renamed
00:13:10 and then and by the way we have renamed our view therefore we have to
00:13:13 our view therefore we have to give exact uh real name as lecture 10
00:13:17 give exact uh real name as lecture 10 let's write here something as h1
00:13:22 let's write here something as h1 lecture 10 let's start our application
00:13:26 lecture 10 let's start our application to see it is working or not
00:14:10 okay says lecture time was not found in lecture or
00:14:21 in our controller lecture time okay lecture time
00:14:25 lecture time okay lecture time lecture time
00:14:41 okay so uh since there is no naming error here probably we have made
00:14:43 naming error here probably we have made error in controller
00:14:45 error in controller and when we see the controller you see
00:14:48 and when we see the controller you see it is yes
00:14:49 it is yes correct type it so lecture tab
00:14:53 correct type it so lecture tab rename it okay
00:14:56 rename it okay okay i also need to rename here okay
00:14:59 okay i also need to rename here okay it's automatically named okay
00:15:02 it's automatically named okay let's start again
00:15:25 okay lecture time is working let's try our lecture
00:15:26 our lecture nine
00:15:39 okay lecture nine is also working okay now we can uh
00:15:40 now we can uh start writing our
00:15:48 attack helpers like this okay so currently you see
00:15:51 okay so currently you see asp for title is
00:15:54 asp for title is not styled or highlighted with different
00:15:58 not styled or highlighted with different colors because it is
00:16:00 colors because it is being seen as a regular html let me
00:16:03 being seen as a regular html let me restart the application and
00:16:05 restart the application and show it to you in the source code
00:16:19 we also don't have any class like as far control but it doesn't matter by the way
00:16:23 control but it doesn't matter by the way so this will generate the default input
00:16:28 so this will generate the default input and
00:16:34 okay font size like this font weight like this is before title is
00:16:37 like this is before title is here and nothing special nothing fancy
00:16:40 here and nothing special nothing fancy as well
00:16:42 as well okay now i am going to
00:16:45 okay now i am going to turn this into a attack helper
00:16:49 turn this into a attack helper how with adding tag helpers
00:16:52 how with adding tag helpers reference to the top page like this
00:16:56 reference to the top page like this okay as soon as i edit you see asp4
00:17:00 okay as soon as i edit you see asp4 now highlighted differently and i am
00:17:03 now highlighted differently and i am getting error
00:17:04 getting error of title why because
00:17:08 of title why because uh there is no model
00:17:11 uh there is no model uh right now for this uh
00:17:15 uh right now for this uh cs html for this razer page
00:17:19 cs html for this razer page and let's generate our lecture 10 model
00:17:28 okay models are regular classes
00:17:31 regular classes simply okay public class lecture 10 and
00:17:36 simply okay public class lecture 10 and let's add a property
00:17:37 let's add a property as string as our
00:17:40 as string as our title okay let's name it as
00:17:44 title okay let's name it as our page title
00:17:48 our page title or whatever the title we want yeah let's
00:17:50 or whatever the title we want yeah let's save it as title
00:17:52 save it as title and then i have to return this model in
00:17:55 and then i have to return this model in my view
00:17:57 my view okay how am i going to do that first i
00:17:59 okay how am i going to do that first i need to add
00:18:01 need to add using okay system
00:18:11 models lecture nine on that system okay lecture nine dot
00:18:13 on that system okay lecture nine dot models okay
00:18:15 models okay now i can use it as lecture time
00:18:20 now i can use it as lecture time i okay model equal to new
00:18:24 i okay model equal to new lecture term model and let's initialize
00:18:27 lecture term model and let's initialize it as our title as
00:18:31 as our title as let's say okay
00:18:44 lecture 10 i am assuming that this will be displayed
00:18:46 be displayed inside the text box so
00:18:49 inside the text box so let's return my model i mean
00:18:52 let's return my model i mean input and let's see if it will ah
00:18:56 input and let's see if it will ah first i need to set the model as as
00:18:58 first i need to set the model as as model
00:19:00 model lecture
00:19:08 nine dot models dot lecture time now auto control appears
00:19:11 now auto control appears let's try it
00:19:21 okay okay now intellisense automatically completed it
00:19:23 completed it for us and let's see
00:19:26 for us and let's see so now this will be bound to
00:19:30 so now this will be bound to a model
00:19:39 and if i do a prospect i can get this value automatically
00:19:41 value automatically probably this won't display the value
00:19:43 probably this won't display the value immediately inside this text box
00:19:46 immediately inside this text box oh it has displayed okay so the value
00:19:49 oh it has displayed okay so the value is also being assigned like this however
00:19:53 is also being assigned like this however i can change that as value equal to
00:19:57 i can change that as value equal to something like this and placeholder
00:19:59 something like this and placeholder equal to
00:20:01 equal to type something here so if i do it like
00:20:04 type something here so if i do it like this i think it will only show
00:20:06 this i think it will only show a placeholder and
00:20:09 a placeholder and it it will be still bound to sr title in
00:20:12 it it will be still bound to sr title in the
00:20:33 okay you see there's placeholder and when i type something it is going away
00:20:35 when i type something it is going away okay moreover we can type
00:20:39 okay moreover we can type our model here as i mean the model title
00:20:43 our model here as i mean the model title here as sr title
00:20:51 okay now we are seeing uh our
00:21:02 notice that the only thing that doesn't look like a regular html tag slash
00:21:05 look like a regular html tag slash attribute setup is the asp for attribute
00:21:08 attribute setup is the asp for attribute this is how asp.net mvc knows which
00:21:11 this is how asp.net mvc knows which property from the model that this
00:21:13 property from the model that this control is created for this information
00:21:15 control is created for this information will be used to generate the name of the
00:21:17 will be used to generate the name of the input field
00:21:17 input field title in this case and the value will be
00:21:20 title in this case and the value will be automatically added as well
00:21:22 automatically added as well an id attribute will also be gen okay so
00:21:25 an id attribute will also be gen okay so it says that
00:21:26 it says that and the value will be automatically
00:21:27 and the value will be automatically added as well so if we want another
00:21:29 added as well so if we want another value or a custom value or an
00:21:32 value or a custom value or an empty value we need to define value
00:21:34 empty value we need to define value ourselves
00:21:35 ourselves like this and this is so elegant
00:21:38 like this and this is so elegant it is simply a regular html
00:21:43 it is simply a regular html and that's it
00:21:50 an id attribute will also be generated for the control
00:21:51 for the control but you are free to override this value
00:21:53 but you are free to override this value by adding your own id attribute and
00:21:55 by adding your own id attribute and value
00:21:56 value okay so we can also add attribute id and
00:22:01 okay so we can also add attribute id and id attribute and value why
00:22:04 id attribute and value why because the asp.net in the
00:22:07 because the asp.net in the server side checks name we can't add a
00:22:11 server side checks name we can't add a name because if we add a name then it
00:22:13 because if we add a name then it wouldn't work
00:22:15 wouldn't work in the code behind probably because
00:22:18 in the code behind probably because this asp4 sets its name to sr title
00:22:23 this asp4 sets its name to sr title okay that is how caught behind
00:22:26 okay that is how caught behind understands it however we are free to
00:22:29 understands it however we are free to add id and this is regular id of
00:22:32 id and this is regular id of um let's say
00:22:42 regular html okay so with that id you can do anything
00:22:43 can do anything you want to do with javascript or jquery
00:22:46 you want to do with javascript or jquery or other things
00:22:48 or other things tag helpers versus html helpers
00:22:52 tag helpers versus html helpers with all of the above in mind one thing
00:22:54 with all of the above in mind one thing is clear the asp.net platform
00:22:57 is clear the asp.net platform as most other platforms is under
00:22:59 as most other platforms is under constant development
00:23:01 constant development new concepts are constantly added while
00:23:03 new concepts are constantly added while older ones might be deprecated
00:23:06 older ones might be deprecated however as of writing this html helpers
00:23:09 however as of writing this html helpers are still relevant
00:23:10 are still relevant and a viable choice in asp.net mvc
00:23:14 and a viable choice in asp.net mvc you may prefer their syntax or the way
00:23:16 you may prefer their syntax or the way they work but on top of that
00:23:17 they work but on top of that there are still things they can do which
00:23:19 there are still things they can do which tag helpers can't do
00:23:21 tag helpers can't do yet for this reason you will also see
00:23:24 yet for this reason you will also see both tag helpers and html helpers being
00:23:27 both tag helpers and html helpers being used throughout this tutorial
00:23:29 used throughout this tutorial and that's fine use whichever approach
00:23:31 and that's fine use whichever approach you find best for the task at hand
00:23:34 you find best for the task at hand after all both tag helpers and html
00:23:36 after all both tag helpers and html helpers
00:23:37 helpers are syntactical sugar they help you
00:23:39 are syntactical sugar they help you accomplish a mundane task with less
00:23:41 accomplish a mundane task with less keystrokes
00:23:43 keystrokes and that is what we want we don't want
00:23:45 and that is what we want we don't want to reinvent
00:23:46 to reinvent wheel we want to accomplish our
00:23:49 wheel we want to accomplish our task with the best possible way
00:23:52 task with the best possible way in the shortest possible time okay with
00:23:55 in the shortest possible time okay with the
00:23:56 the least possible effort
00:23:59 least possible effort so using whatever whatever is available
00:24:03 so using whatever whatever is available for us and if it is good we should use it
00:24:05 us and if it is good we should use it okay
00:24:11 summary asp.net mvc tag helpers will aid you in the
00:24:13 mvc tag helpers will aid you in the generation of markup for your views
00:24:16 generation of markup for your views especially when the purpose is to bind
00:24:18 especially when the purpose is to bind data from your models to control
00:24:19 data from your models to control slash markup in your view unlike
00:24:22 slash markup in your view unlike previous approaches
00:24:23 previous approaches like server controls and html helpers
00:24:26 like server controls and html helpers you don't have to shift to another
00:24:28 you don't have to shift to another language to connect the model and view
00:24:30 language to connect the model and view and you remain in control of the markup
00:24:32 and you remain in control of the markup generated
00:24:33 generated in other words tag helpers will make a
00:24:35 in other words tag helpers will make a lot of things easier for you when you
00:24:37 lot of things easier for you when you create your views
00:24:39 create your views in the following articles we'll go
00:24:41 in the following articles we'll go through all the built-in tag helpers
00:24:43 through all the built-in tag helpers so that you can see how powerful and yet
00:24:45 so that you can see how powerful and yet easy to use they are
00:24:47 easy to use they are personally i would prefer tag helpers
00:24:49 personally i would prefer tag helpers instead of hdmi helpers because
00:24:52 instead of hdmi helpers because this looks better this is easier to
00:24:54 this looks better this is easier to understand
00:24:55 understand this is more elegant and
00:24:59 this is more elegant and that's it okay let's move to the next
00:25:02 that's it okay let's move to the next uh article okay
00:25:15 tag helpers using tag helpers in the previous article we talked about
00:25:17 in the previous article we talked about how the concept of tag helpers were
00:25:19 how the concept of tag helpers were initially added to the mvc
00:25:20 initially added to the mvc framework we also saw a simple example
00:25:23 framework we also saw a simple example of a tag helper in action
00:25:25 of a tag helper in action but in this article we'll dig deeper
00:25:27 but in this article we'll dig deeper into how they work
00:25:28 into how they work and how you get started using them how
00:25:31 and how you get started using them how does tag helpers work
00:25:34 does tag helpers work have a look at this example input class
00:25:37 have a look at this example input class equals form control
00:25:39 equals form control asp for equals title slash
00:25:42 asp for equals title slash at first this might seem like a regular
00:25:44 at first this might seem like a regular input tag
00:25:45 input tag but if you look closer you'll notice
00:25:47 but if you look closer you'll notice that the last attribute is special
00:25:49 that the last attribute is special the asp prefix will let you know that
00:25:52 the asp prefix will let you know that this html tag
00:25:53 this html tag is using a tag helper and that the
00:25:55 is using a tag helper and that the actual output
00:25:56 actual output sent to the browser will likely be
00:25:58 sent to the browser will likely be manipulated by the server
00:26:00 manipulated by the server in this specific case we use the asp for
00:26:03 in this specific case we use the asp for attribute to instruct
00:26:04 attribute to instruct asp.net to bind this input field to a
00:26:07 asp.net to bind this input field to a property called title on the model
00:26:10 property called title on the model so imagine that your model is a class
00:26:12 so imagine that your model is a class called movie which has a property called
00:26:14 called movie which has a property called title
00:26:16 title because you use the title property in
00:26:17 because you use the title property in the asp for attribute
00:26:19 the asp for attribute asp.net mvc will now automatically bind
00:26:22 asp.net mvc will now automatically bind to this property and fill the regular
00:26:24 to this property and fill the regular input html attributes name
00:26:26 input html attributes name id and value in accordance with the name
00:26:29 id and value in accordance with the name and the value of the bound property
00:26:31 and the value of the bound property the result will look like this input
00:26:35 the result will look like this input class equals form control type equals
00:26:37 class equals form control type equals text id
00:26:38 text id equals title name equals title value
00:26:40 equals title name equals title value equals the godfather
00:26:42 equals the godfather okay so usually it is adding
00:26:44 okay so usually it is adding automatically
00:26:46 automatically name and
00:26:49 name and id and value by default and the value is
00:26:53 id and value by default and the value is coming from your model
00:26:55 coming from your model okay it can be empty it can be anything
00:27:04 two things that are very cool about this first of all
00:27:05 first of all a lot of markup was just generated for
00:27:07 a lot of markup was just generated for you completely automatically
00:27:09 you completely automatically saving you lots of keystrokes in time
00:27:12 saving you lots of keystrokes in time second of all
00:27:13 second of all the asp for tag helper attribute is
00:27:15 the asp for tag helper attribute is checked at compile time
00:27:16 checked at compile time so if you ever misspell the property or
00:27:18 so if you ever misspell the property or suddenly decide to change its name in
00:27:20 suddenly decide to change its name in the model
00:27:21 the model the compiler will complain about it and
00:27:22 the compiler will complain about it and force you to fix it before you release
00:27:24 force you to fix it before you release your work and potentially break your
00:27:26 your work and potentially break your website
00:27:28 website the add tag helper directive to use tag
00:27:31 the add tag helper directive to use tag helpers in your views
00:27:32 helpers in your views you need to add support for them this is
00:27:35 you need to add support for them this is done using the add tag helper directive
00:27:38 using the add tag helper directive either directly in the view
00:27:39 either directly in the view where you want to use them or if you
00:27:41 where you want to use them or if you want to use them in all your views
00:27:43 want to use them in all your views in the underscore view imports dot
00:27:45 in the underscore view imports dot cshtml file
00:27:46 cshtml file okay so to be able to use stack helpers
00:27:50 okay so to be able to use stack helpers as i've shown you you have to add
00:27:53 as i've shown you you have to add this reference to the top
00:27:57 this reference to the top and instead of adding this to every page
00:27:59 and instead of adding this to every page you can put it to the
00:28:01 you can put it to the viv import file which we have seen in
00:28:04 viv import file which we have seen in our previous lectures that this file is
00:28:08 previous lectures that this file is first embedded first loaded into the all
00:28:12 first embedded first loaded into the all of the pages then the page is rendered
00:28:15 of the pages then the page is rendered so you can either do that or you can either
00:28:18 you can either do that or you can either add
00:28:20 add each page individually
00:28:26 i suggest the underscore view imports.cshtml solution
00:28:28 imports.cshtml solution unless you have a specific reason for
00:28:30 unless you have a specific reason for not wanting tag helper support in all
00:28:32 not wanting tag helper support in all your views
00:28:33 your views so yes this is true uh let's
00:28:36 so yes this is true uh let's add we import and
00:28:39 add we import and remember that as password we import was
00:28:43 remember that as password we import was going into shaded folder okay
00:28:46 going into shaded folder okay so it was under like this if i remember
00:28:51 so it was under like this if i remember correctly
00:28:52 correctly we had a shaded folder inside view
00:28:55 we had a shaded folder inside view and here we are going to have view
00:28:58 and here we are going to have view import
00:29:05 by the way you have to follow exact naming otherwise it won't
00:29:06 naming otherwise it won't work so we import cshtml
00:29:11 work so we import cshtml and here i will remove this
00:29:15 and here i will remove this and put it here and let's see
00:29:19 and put it here and let's see if it will become
00:29:40 let me see if i'm doing an error a mistake
00:29:55 okay so the view import
00:29:59 so the view import is positioned under
00:30:09 oh not shaded but in the main folder under views so i made a mistake
00:30:13 folder under views so i made a mistake there
00:30:19 okay so you can actually make specific weave import for each folder when you put it
00:30:22 import for each folder when you put it under the view
00:30:23 under the view now it is becoming global for all
00:30:26 now it is becoming global for all uh views under the weaves folders
00:30:29 uh views under the weaves folders by default okay now it is visible now i
00:30:32 by default okay now it is visible now i don't need to add
00:30:36 don't need to add now i don't need to add a tag helpers
00:30:53 please notice that if you have used one of the non-empty visual studio templates
00:30:55 of the non-empty visual studio templates to create your project with
00:30:57 to create your project with support for tag helpers might already
00:30:59 support for tag helpers might already have been added
00:31:00 have been added look for a file called underscore view
00:31:02 look for a file called underscore view imports imports.cshtml in your project
00:31:05 imports imports.cshtml in your project if it's there
00:31:06 if it's there and it includes the line below you are
00:31:08 and it includes the line below you are good to go
00:31:10 good to go to add support for the built-in tag
00:31:11 to add support for the built-in tag helpers which are the ones we'll be
00:31:13 helpers which are the ones we'll be discussing in this article
00:31:15 discussing in this article as well as the following articles you
00:31:16 as well as the following articles you should add the following line
00:31:19 should add the following line at add tag helper asterisk
00:31:21 at add tag helper asterisk microsoft.asp.net core
00:31:23 microsoft.asp.net core mvc.tag helpers
00:31:26 mvc.tag helpers after doing this you should be able to
00:31:28 after doing this you should be able to see the asp-asterisk properties in
00:31:31 see the asp-asterisk properties in intellisense whenever you type an html
00:31:33 intellisense whenever you type an html tag supported by one of the tag helpers
00:31:36 tag supported by one of the tag helpers the syntax of this directive looks like
00:31:38 the syntax of this directive looks like this
00:31:40 this at add tag helper namespace assembly so
00:31:43 at add tag helper namespace assembly so this is the namespace it adds
00:31:45 this is the namespace it adds all of the tech helpers and this is the
00:31:47 all of the tech helpers and this is the assembly file name
00:31:50 assembly file name microsoft.net core mvc tag helpers i
00:31:52 microsoft.net core mvc tag helpers i think we can even see that in our
00:31:56 think we can even see that in our dependencies let's see packages
00:32:00 dependencies let's see packages okay and we see asp.net score up
00:32:09 no maybe under that oh okay there are a lot of things
00:32:21 and we see here you see here so this is the assembly name that we are
00:32:24 so this is the assembly name that we are referencing you see it is the exact the
00:32:26 referencing you see it is the exact the same microsoft dot net core and we see
00:32:28 same microsoft dot net core and we see tag helpers
00:32:29 tag helpers so simply this is the name space we are
00:32:32 so simply this is the name space we are adding all possible and this is the
00:32:34 adding all possible and this is the assembly name
00:32:36 assembly name okay let's continue
00:32:42 okay let's continue so in our example we are importing all
00:32:44 so in our example we are importing all tag helpers
00:32:45 tag helpers as noted by the wildcard asterisk
00:32:47 as noted by the wildcard asterisk character from the microsoft.asp.net
00:32:49 character from the microsoft.asp.net core
00:32:50 core mvc.tag helpers assembly
00:32:53 mvc.tag helpers assembly in case you want to limit the helpers
00:32:55 in case you want to limit the helpers imported you can specify just one
00:32:57 imported you can specify just one by using its fully qualified name eg
00:33:00 by using its fully qualified name eg microsoft.asp.net core
00:33:02 microsoft.asp.net core nvc dot tag helpers dot anchor tag
00:33:04 nvc dot tag helpers dot anchor tag helper or you can import
00:33:05 helper or you can import all tag helpers within a name space like
00:33:08 all tag helpers within a name space like this microsoft microsoft.asp.net core
00:33:11 this microsoft microsoft.asp.net core nvc.tag helpers so if you need a
00:33:13 nvc.tag helpers so if you need a specific one you can add this as
00:33:15 specific one you can add this as specific one or you can add all
00:33:17 specific one or you can add all like this if you have a reason you can
00:33:19 like this if you have a reason you can add specific one or
00:33:21 add specific one or why not adding all the add tag helper
00:33:24 why not adding all the add tag helper directive can also be used to add
00:33:26 directive can also be used to add support for your own
00:33:27 support for your own custom tag helpers more about that later
00:33:31 custom tag helpers more about that later summary tag helpers makes it a lot
00:33:34 summary tag helpers makes it a lot easier to write markup
00:33:36 easier to write markup while having the added benefit of
00:33:37 while having the added benefit of creating a tight relation between your
00:33:39 creating a tight relation between your html control slash tags
00:33:41 html control slash tags and your model this will become much
00:33:44 and your model this will become much more obvious in the next articles
00:33:46 more obvious in the next articles where we'll look into the various tag
00:33:47 where we'll look into the various tag helpers okay
00:33:49 helpers okay now we have much more idea about how tag
00:33:51 now we have much more idea about how tag has works
00:33:53 has works so we can move to the next article
00:34:13 tag helpers the form tag helper the form tag helper will aid you in the
00:34:15 the form tag helper will aid you in the generation of the form tags
00:34:16 generation of the form tags which should be around any form elements
00:34:18 which should be around any form elements that you would like to eg
00:34:19 that you would like to eg submit back to the server including
00:34:21 submit back to the server including input fields text areas etcetera
00:34:24 input fields text areas etcetera when using the form tag helper you
00:34:26 when using the form tag helper you benefit from the following things
00:34:28 benefit from the following things compared to writing all the markup
00:34:30 compared to writing all the markup manually
00:34:32 manually you can easily reference the controller
00:34:34 you can easily reference the controller and the action to submit the form to
00:34:36 and the action to submit the form to or even reference a route a hidden
00:34:39 or even reference a route a hidden request verification token is
00:34:41 request verification token is automatically generated and appended to
00:34:43 automatically generated and appended to the form
00:34:43 the form to help protect you against cross-site
00:34:45 to help protect you against cross-site request forgery
00:34:47 request forgery controller and action attributes okay so
00:34:50 controller and action attributes okay so what
00:34:51 what is a cross site request surgery
00:34:56 is a cross site request surgery let's also read about it
00:35:03 let's also read about it cross site request forgery also known as
00:35:05 cross site request forgery also known as one click attack or session writing and
00:35:08 one click attack or session writing and abbreviated as csrf
00:35:10 abbreviated as csrf sometimes pronounced sea surf 1 or xsrf
00:35:13 sometimes pronounced sea surf 1 or xsrf is a type of malicious exploit of a
00:35:15 is a type of malicious exploit of a website where unauthorized commands are
00:35:17 website where unauthorized commands are submitted from a user that the web
00:35:19 submitted from a user that the web application trusts
00:35:20 application trusts two there are many ways in which a
00:35:22 two there are many ways in which a malicious website can transmit such
00:35:24 malicious website can transmit such commands
00:35:25 commands specially crafted image tags hidden
00:35:27 specially crafted image tags hidden forms and javascript xml http
00:35:29 forms and javascript xml http requests for example can all work
00:35:32 requests for example can all work without the user's interaction or even
00:35:35 without the user's interaction or even knowledge unlike cross-site scripting
00:35:38 knowledge unlike cross-site scripting xss which exploits the trust a user has
00:35:41 xss which exploits the trust a user has for a particular site
00:35:42 for a particular site csrf exploits the trust that a site has
00:35:45 csrf exploits the trust that a site has in a user's browser
00:35:48 in a user's browser in a csrf attack an innocent end user is
00:35:51 in a csrf attack an innocent end user is tricked by an attacker into submitting a
00:35:53 tricked by an attacker into submitting a web request that they did not intend
00:35:55 web request that they did not intend this may cause actions to be performed
00:35:57 this may cause actions to be performed on the website that can include
00:35:59 on the website that can include inadvertent client or server data
00:36:01 inadvertent client or server data leakage change of session state
00:36:03 leakage change of session state or manipulation of an end user's account
00:36:06 or manipulation of an end user's account csrf is also used as an abbreviation in
00:36:09 csrf is also used as an abbreviation in defenses against csrf attacks such as
00:36:12 defenses against csrf attacks such as techniques that use header data
00:36:13 techniques that use header data form data or cookies to test for and
00:36:16 form data or cookies to test for and prevent such attacks
00:36:17 prevent such attacks okay let's see example
00:36:26 attackers who can find a reproducible link that executes a specific action on
00:36:28 link that executes a specific action on the target page
00:36:29 the target page while the victim is logged in can embed
00:36:31 while the victim is logged in can embed such link on a page they control and
00:36:33 such link on a page they control and trick the victim into opening it
00:36:35 trick the victim into opening it one the attack carrier link may be
00:36:37 one the attack carrier link may be placed in a location that the victim is
00:36:38 placed in a location that the victim is likely to visit while
00:36:40 likely to visit while logged into the target site for example
00:36:42 logged into the target site for example a discussion forum
00:36:43 a discussion forum were sent in an html email body or
00:36:46 were sent in an html email body or attachment
00:36:47 attachment a real csrf vulnerability in utorrent
00:36:50 a real csrf vulnerability in utorrent cve
00:36:52 cve 2008-6586 exploited the fact that it's
00:36:55 2008-6586 exploited the fact that it's web console accessible at localhost
00:36:57 web console accessible at localhost 8080 allowed critical actions to be
00:36:59 8080 allowed critical actions to be executed using a simple get request
00:37:07 force a dot torrent file download http slash slash localhost
00:37:10 http slash slash localhost 8080 slash google a slash action equals
00:37:13 8080 slash google a slash action equals add url and s
00:37:14 add url and s equals http slash slash evil dot example
00:37:18 equals http slash slash evil dot example dot com slash backdoor dot torrent
00:37:21 dot com slash backdoor dot torrent okay so what is this if you wonder for
00:37:23 okay so what is this if you wonder for example i am visiting
00:37:25 example i am visiting example.com and there is a malicious
00:37:28 example.com and there is a malicious uh script or code on example.com
00:37:32 uh script or code on example.com and it is execute it is calling this
00:37:35 and it is execute it is calling this url for example in a button click or
00:37:38 url for example in a button click or in a image link etc
00:37:42 in a image link etc and if my form of
00:37:45 and if my form of localhost is vulnerable to that then
00:37:49 localhost is vulnerable to that then it would executed so this is for
00:37:52 it would executed so this is for preventing
00:37:53 preventing other websites to uh
00:37:56 other websites to uh calling my website uh
00:37:59 calling my website uh web forms okay so my web form can only
00:38:02 web forms okay so my web form can only be called from
00:38:05 be called from my website when the user is on my
00:38:07 my website when the user is on my website not
00:38:08 website not from other websites or such okay so this
00:38:11 from other websites or such okay so this is for it
00:38:12 is for it this is for preventing preventing
00:38:20 my forms to be executed from other websites okay
00:38:31 the easiest and perhaps most common way of using the form tag helper
00:38:33 of using the form tag helper is with the controller and action
00:38:34 is with the controller and action attributes
00:38:36 attributes this allows you to specify which action
00:38:38 this allows you to specify which action method on which controller you want the
00:38:40 method on which controller you want the form to be submitted to
00:38:42 form to be submitted to here's an example okay for example you
00:38:45 here's an example okay for example you see
00:38:46 see uh let's write our form submit
00:38:50 uh let's write our form submit okay so form
00:38:54 okay so form asp okay action
00:38:57 asp okay action so action expects which data from us
00:39:11 our action name in our controller so this will be
00:39:13 this will be posted back to our lecture tag
00:39:15 posted back to our lecture tag controller
00:39:16 controller let's write a method here
00:39:21 let's write a method here okay like
00:39:33 and this will get my model which is lecture 10
00:39:37 which is lecture 10 my model first i will verify if the
00:39:41 my model first i will verify if the model is valid
00:39:49 [Music] my model
00:40:02 okay modal state is valid oh it is just like that
00:40:12 if the model state is not valid return then i will update
00:40:17 then i will update actually it will be already updated
00:40:21 actually it will be already updated so um
00:40:24 so um i would return with my updated model
00:40:27 i would return with my updated model that's it
00:40:28 that's it yeah also
00:40:31 yeah also it is expecting i action results
00:40:35 it is expecting i action results therefore can i do
00:40:37 therefore can i do [Music]
00:40:39 [Music] let's return um content
00:40:43 let's return um content and say okay invalid
00:40:46 and say okay invalid invalid data it sends to the
00:40:50 invalid data it sends to the server
00:41:05 okay else we will return my model or whatever we
00:41:09 we will return my model or whatever we want we can
00:41:10 want we can append something to the
00:41:13 append something to the text that we got like okay uh
00:41:17 text that we got like okay uh data is received okay
00:41:21 data is received okay so let's add
00:41:25 so let's add a label here such as
00:41:28 a label here such as how can we type it
00:41:36 label asp push is our title yeah
00:41:39 is our title yeah and so the action will be
00:41:51 in our controller update model title the asp force
00:41:54 the asp force or the asp controller here will be
00:41:58 or the asp controller here will be lecture 10 okay
00:42:01 lecture 10 okay so there is form action and do we need
00:42:05 so there is form action and do we need anything else
00:42:06 anything else yeah method let's define method as post
00:42:11 yeah method let's define method as post and i can also limit this to bits
00:42:15 and i can also limit this to bits only http post like this so this action
00:42:18 only http post like this so this action can only be called
00:42:20 can only be called with post it cannot be coded with
00:42:23 with post it cannot be coded with get all right and
00:42:28 get all right and then we need input type
00:42:31 then we need input type submit not search
00:42:35 submit not search and text of
00:42:39 and text of value here will be
00:42:43 value here will be send updated data
00:42:53 okay so is this title need to be inside here or not i think it
00:42:56 need to be inside here or not i think it has to be inside here but let's
00:42:59 has to be inside here but let's test our
00:43:18 i think it won't be posted back to the server because it is not inside
00:43:21 server because it is not inside form but let's try to be sure
00:43:33 okay so the title is not displayed for asp
00:43:36 is not displayed for asp so not asp4 but i need to set value
00:43:50 yeah i i don't need this why do i type it anyway
00:43:51 it anyway i just need to type as
00:43:54 i just need to type as model dot sr title okay that's it
00:44:08 oh we already have that why did i duplicate it i don't know
00:44:10 duplicate it i don't know anyway let's continue
00:44:13 anyway let's continue so after we submit something it should
00:44:16 so after we submit something it should be it should have been changed okay change
00:44:20 it should have been changed okay change it
00:44:22 it okay so it didn't work because it is
00:44:25 okay so it didn't work because it is still same
00:44:28 still same and therefore let's put this inside here
00:44:33 and therefore let's put this inside here and restart
00:44:57 okay lecture time stand okay so after sent
00:45:03 stand okay so after sent we are not getting what we want
00:45:06 we are not getting what we want let's put a break point here to first
00:45:09 let's put a break point here to first see if it is working
00:45:11 see if it is working no so currently our
00:45:14 no so currently our form action is not working why because
00:45:17 form action is not working why because we have a
00:45:18 we have a isp action update title
00:45:21 isp action update title yeah and sv controller lecture time
00:45:31 okay let's check the form data what how it is generated
00:45:32 it is generated so we have form and action okay so
00:45:35 so we have form and action okay so something
00:45:36 something is wrong here obviously because
00:45:39 is wrong here obviously because the url and controller is
00:45:42 the url and controller is not written
00:46:00 therefore what could be wrong okay as we control the lecture time
00:46:14 title my action results
00:46:17 my action results yes it is looking correct
00:46:29 okay i think we have an example of the sunlight
00:46:30 sunlight in our project
00:47:03 okay it looks correct okay my application frozen
00:47:26 so this is the generated html code automatically it is not
00:47:28 automatically it is not written by the developer you can
00:47:31 written by the developer you can cancel it my computer
00:47:35 cancel it my computer is a bit slow i think i will
00:47:40 is a bit slow i think i will terminate it and reopen
00:47:52 okay um this one
00:48:06 so why it didn't automatically generate
00:48:21 automatically generate okay it's still being loaded therefore
00:48:23 okay it's still being loaded therefore it is not highlighted as supposed to be
00:48:33 okay and it should not wrong with import
00:48:36 wrong with import let's see yes
00:48:39 let's see yes and
00:48:48 still getting ready okay now it's ready however
00:48:51 okay now it's ready however we have a problem which is
00:48:55 we have a problem which is our action is not matching
00:49:11 here lecture 10 controllers and the action is update model title
00:49:17 and the action is update model title which takes my model
00:49:38 okay i don't want to use asb road but i want this to work
00:49:42 but i want this to work however it is not working maybe because
00:49:44 however it is not working maybe because of our input
00:49:56 okay one when something is not working don't give up just
00:49:57 don't give up just try to find what is wrong okay there is
00:50:01 try to find what is wrong okay there is input value
00:50:03 input value input type submit value 8 usage
00:50:06 input type submit value 8 usage yeah same
00:50:16 okay let's run again and see what happens
00:50:27 and let's check electric 9 as well so this is the lecture nine and here
00:50:30 so this is the lecture nine and here isp controller lecture nine expect
00:50:33 isp controller lecture nine expect action update
00:50:34 action update uh lecture nine model
00:50:37 uh lecture nine model let's check that as well
00:50:41 let's check that as well lecture nine controllers okay
00:50:51 update oh i see i see so we have to define a custom action name
00:50:55 we have to define a custom action name okay that is why it wasn't working
00:50:58 okay that is why it wasn't working because it is looking for
00:50:59 because it is looking for this action name and there is no such
00:51:01 this action name and there is no such action name
00:51:02 action name so i will make it same
00:51:06 so i will make it same and when i restart it should be same
00:51:19 interesting by i have to set action name like that
00:51:36 okay let's check the source code no still not here you see request
00:51:39 no still not here you see request verification token is here
00:51:42 verification token is here input here form here however
00:51:45 input here form here however form values are missing
00:52:03 okay here so this is the second okay here we see the lecture nine action
00:52:21 um action okay
00:53:07 okay so what might be wrong it looks like we are riding
00:53:11 wrong it looks like we are riding picture 10
00:53:15 picture 10 okay let's look for our
00:54:39 maybe it is because we are using a routing here therefore it is not
00:54:42 routing here therefore it is not available it is not able to recognize it
00:54:48 available it is not able to recognize it so um
00:54:58 yeah probably because of that so let's define a root here as
00:55:10 yeah let's try like this i wonder what will happen
00:55:42 okay now we see action like this not working so you see it was because of
00:55:45 not working so you see it was because of routing
00:55:46 routing and you have to provide same routing
00:55:49 and you have to provide same routing so new lectures done okay you see
00:55:53 so new lectures done okay you see new lecture time data is received it is
00:55:55 new lecture time data is received it is working yes
00:55:57 working yes we can also use
00:56:02 we can also use different routing and uh different
00:56:05 different routing and uh different uh methods let's also test that so i
00:56:09 uh methods let's also test that so i will call this as
00:56:12 will call this as okay update
00:56:18 data version two so this will be a different route
00:56:20 different route and i will make it as version two
00:56:28 okay now for it to be work i think we have to
00:56:33 to be work i think we have to change our route
00:56:45 road and root will be
00:56:49 and root will be this okay like this
00:56:52 this okay like this okay
00:57:01 version two and inside version two where it is yeah let's try
00:57:24 so after this uh action results it is supposed to return a new wheel actually
00:57:27 supposed to return a new wheel actually our
00:57:28 our regular beef
00:57:39 oh we have an error cannot determine action attribute
00:57:39 action attribute or form which makes you the exclusive
00:57:43 or form which makes you the exclusive road controller s action page i see
00:57:47 road controller s action page i see so when we define route
00:57:56 we can't define other parameters obviously
00:58:05 so we need to remove this and now it should work let's try
00:58:29 okay so you see there are multiple solutions
00:58:37 let's update okay update it and return it back as we wanted okay
00:58:40 it back as we wanted okay but oh this is this is data received
00:58:43 but oh this is this is data received pumped actually we were expecting
00:58:57 okay so the action oh the action is incorrect
00:58:59 incorrect i see so this is
00:59:02 i see so this is this didn't work
00:59:39 maybe we need to also set action name i don't know
01:00:05 this is expected because it only supports
01:00:06 supports http post
01:00:29 okay so what is wrong what is this root id by the way
01:00:33 what is this root id by the way model.id it says
01:00:42 actually okay so what could be wrong
01:00:56 controller perform action on walls
01:01:46 maybe we also need to set action name so let's also put action name i'm not
01:01:48 so let's also put action name i'm not sure
01:01:50 sure okay there is road but action
01:02:13 must be known if contact action or contact or
01:02:15 contact or so this won't work
01:02:24 okay so maybe we need to update this something like this
01:02:25 something like this tests because in root maybe it is not
01:02:28 tests because in root maybe it is not working
01:02:30 working so let's set it like this let's look
01:02:33 so let's set it like this let's look like because you see we have root like
01:02:37 this because you see we have root like this therefore it may be
01:02:39 this therefore it may be not working
01:04:06 maybe we need to set road like this i'm not sure
01:04:07 not sure let's test it as well
01:04:24 okay we will figure this out don't worry
01:05:47 different roles and actually i'm not sure like this
01:05:52 i'm not sure like this i wonder how will it behave oh we can
01:05:55 i wonder how will it behave oh we can set the direction name yeah
01:05:58 set the direction name yeah this won't work
01:06:11 okay there is something definitely not we are
01:06:12 we are making right when working with roads it
01:06:16 making right when working with roads it looks
01:06:18 looks hard
01:06:47 okay i guess our only option is setting the same
01:06:50 the same well we can't also set the same route
01:06:52 well we can't also set the same route because it will
01:06:54 because it will then cause problems probably
01:07:01 then cause problems probably or maybe not i'm not sure let's try to
01:07:04 or maybe not i'm not sure let's try to have different
01:07:07 have different parameters like this and
01:07:13 let's see if we can have multiple post data
01:07:15 data so i think it will work like this
01:07:19 so i think it will work like this in this way
01:07:26 so same routing they are http posts therefore they won't affect these
01:07:29 posts therefore they won't affect these words so this will be http get
01:07:37 okay and actually i can set this row to here i guess
01:07:42 set this row to here i guess so i don't need to define it every time
01:07:55 action like this and see what happens i think this is the proper way of doing it
01:07:57 think this is the proper way of doing it that is why we can't find
01:07:59 that is why we can't find another solution
01:08:25 okay let's see [Music]
01:08:28 [Music] oh no it is generating same action not
01:08:31 oh no it is generating same action not method so the action
01:08:35 method so the action is not defined therefore i'm sure it
01:08:39 is not defined therefore i'm sure it won't work
01:08:40 won't work yeah it says you are having the same
01:08:43 yeah it says you are having the same multiple actions measured
01:08:52 so it's simply not getting specific action name
01:09:46 asp.net update block entry route block update name update block entry
01:09:50 update name update block entry maybe we can try something like this
01:09:52 maybe we can try something like this here
01:10:02 i see so this is expecting wrote name not wrote itself i see this is why
01:10:06 name not wrote itself i see this is why it didn't work
01:10:07 it didn't work okay so let's keep this and
01:10:11 okay so let's keep this and change this to something like this
01:10:15 change this to something like this i will make it as
01:10:30 i have to give it as different router for
01:10:31 for lecture 10 update
01:10:35 lecture 10 update and update version 2
01:10:39 and update version 2 name okay
01:10:45 name okay so this is lecture 10 update update
01:10:47 so this is lecture 10 update update version 2
01:10:49 version 2 and here we will give
01:10:52 and here we will give as we wrote version 2
01:10:57 as we wrote version 2 so this is expecting the name of the
01:11:00 so this is expecting the name of the road
01:11:01 road not the road itself that is why it will
01:11:04 not the road itself that is why it will work i think previously
01:11:13 work i think previously so this the first one should be same
01:11:17 so this the first one should be same and let's see
01:11:24 okay now its action is generated okay so k is one
01:11:28 okay so k is one okay it has entered the correct action
01:11:32 okay it has entered the correct action and case two and it has entered the
01:11:35 and case two and it has entered the correct okay
01:11:36 correct okay okay we have solved our problem now it
01:11:39 okay we have solved our problem now it is
01:11:40 is working however i wonder something else
01:11:43 working however i wonder something else uh if i make it same road like this i
01:11:46 uh if i make it same road like this i wonder what will happen i think it won't
01:11:48 wonder what will happen i think it won't work
01:11:49 work because there will be matching two
01:11:52 because there will be matching two actions and however when you post
01:11:55 actions and however when you post some data to server they have to have
01:11:58 some data to server they have to have unique
01:11:59 unique paths therefore now it won't work
01:12:03 paths therefore now it won't work because there is no way for server to
01:12:07 because there is no way for server to get which action is called let's try
01:12:10 get which action is called let's try yes multiple actions match it
01:12:14 yes multiple actions match it therefore you have to define different
01:12:17 therefore you have to define different paths
01:12:18 paths rods for each action
01:12:22 rods for each action you have okay and
01:12:27 you have okay and so this is working
01:12:38 appending road parameters okay so this is important
01:12:51 okay let's continue appending root parameters
01:12:53 parameters the route you wish to hit may take one
01:12:55 the route you wish to hit may take one or several parameters which you may need
01:12:57 or several parameters which you may need to pass to it from your form
01:12:59 to pass to it from your form this can be done using a syntax like
01:13:01 this can be done using a syntax like this
01:13:03 this asp root dash parameter name equals
01:13:05 asp root dash parameter name equals value
01:13:07 value so if the name of the parameter of your
01:13:09 so if the name of the parameter of your parameter is id
01:13:11 parameter is id your complete form tag could look like
01:13:12 your complete form tag could look like this
01:13:14 this form method equals post asp root equals
01:13:17 form method equals post asp root equals update blog entry asp root id
01:13:19 update blog entry asp root id equals 42 form
01:13:22 equals 42 form of course in most situations the value
01:13:25 of course in most situations the value would likely be dynamic and come from eg
01:13:27 would likely be dynamic and come from eg your model
01:13:28 your model like this form method equals post
01:13:31 like this form method equals post asp root equals update blog entry asp
01:13:34 asp root equals update blog entry asp root id equals at model dot id slash
01:13:37 root id equals at model dot id slash form
01:13:39 form the result will look like this okay so
01:13:41 the result will look like this okay so this is a parameter that we will get
01:13:43 this is a parameter that we will get from root which means
01:13:57 get back to our model i think okay let's let's check it out so
01:14:00 let's check it out so in our model i'm going to add another
01:14:04 in our model i'm going to add another parameter
01:14:06 parameter okay so i will make it into
01:14:15 ir counters okay so by default it will be zero
01:14:21 i will also display the display right here like this counters
01:14:28 okay and i will also send asp road
01:14:43 four parameter what was it why it is not here
01:14:59 okay let's see if we type it correctly yeah okay
01:15:06 now it will be appended to the model or what let's see what happens
01:15:25 i will if you can type it here maybe we need to type it here yes
01:15:28 need to type it here yes okay
01:15:35 first let's make a test and then we can see
01:15:36 see counter zero my mother
01:15:40 counter zero my mother yes my model now has counter set
01:15:45 yes my model now has counter set and therefore it will become 32 okay
01:15:48 and therefore it will become 32 okay so this is working this way what happens
01:15:52 so this is working this way what happens if we don't get
01:15:55 if we don't get something in model like this
01:16:04 okay ir test as 11 and put ir test here
01:16:11 as 11 and put ir test here okay how can we set it as ir test equals
01:16:14 okay how can we set it as ir test equals zero
01:16:16 zero i won't refill this work as well let's
01:16:19 i won't refill this work as well let's try it
01:16:25 i think it should work because it will be
01:16:26 be sending back that but
01:16:29 sending back that but let's try our
01:16:34 let's try our prediction test
01:16:48 yes it is posted so you can both have parameter in your model or as an
01:16:50 parameter in your model or as an external like this
01:16:52 external like this however putting that in model is better
01:16:54 however putting that in model is better approach
01:16:55 approach and now it is working as we wanted
01:17:03 okay so when we put multiple values i think it will append that
01:17:05 think it will append that as a regular html with
01:17:08 as a regular html with and tags and characters i will show you
01:17:11 and tags and characters i will show you in a minute
01:17:12 in a minute and the page loads
01:17:22 let's see check it and on
01:17:25 and on action okay you see with this
01:17:28 action okay you see with this uh it means that uh the rest of the
01:17:33 uh it means that uh the rest of the url is parameters value and data
01:17:37 url is parameters value and data so this is the name of the value this is
01:17:39 so this is the name of the value this is the value this is the name of the value
01:17:41 the value this is the name of the value and this is the value okay regular html
01:17:45 and this is the value okay regular html and let's continue reading more options
01:17:50 and let's continue reading more options these were the most relevant and
01:17:51 these were the most relevant and commonly used attributes for the form
01:17:53 commonly used attributes for the form tag helper
01:17:55 tag helper for a complete list of options and
01:17:57 for a complete list of options and possibilities please refer to the
01:17:59 possibilities please refer to the documentation
01:18:00 documentation okay let's check out the documentation
01:18:08 okay here so you see there are versions you can pick
01:18:09 you can pick version 6 preview or you can pick
01:18:12 version 6 preview or you can pick version
01:18:13 version 5. i think our application is version 5
01:18:17 5. i think our application is version 5 right now we don't have version 6 set
01:18:20 right now we don't have version 6 set we can see it from project
01:18:24 we can see it from project properties i believe
01:18:28 properties i believe yes we are version five currently
01:18:32 yes we are version five currently so let's see what parameters there are
01:18:34 so let's see what parameters there are okay there is
01:18:35 okay there is controller action area
01:18:38 controller action area and name of the laser page
01:18:42 and name of the laser page name of the laser page handler road
01:18:45 name of the laser page handler road wrote value a single url road value like
01:18:47 wrote value a single url road value like this we are already doing that
01:18:50 this we are already doing that all route.data all the road bodies and
01:18:53 all route.data all the road bodies and url fragments
01:18:55 url fragments so these are the all
01:19:02 parameters that you can use there are also some examples such as
01:19:04 also some examples such as submit controller example like this
01:19:08 submit controller example like this submit page example method post
01:19:12 submit page example method post and there is form action
01:19:17 and there is form action like this submit wrote example you see
01:19:20 like this submit wrote example you see you define a name
01:19:22 you define a name and you decide it like this so you see
01:19:26 and you decide it like this so you see you can also set the road in bottom not
01:19:29 you can also set the road in bottom not in form action
01:19:30 in form action both is possible or formation like this
01:19:35 both is possible or formation like this there's also input tag hardware
01:19:37 there's also input tag hardware asp for expression name
01:19:45 okay so there is input i have been saying what is the regular input i think
01:19:48 saying what is the regular input i think guys so we can set input as
01:19:52 guys so we can set input as checkbox text
01:20:03 email url hidden telephone password i think i will show each of
01:20:06 password i think i will show each of them
01:20:07 them if they are not shown in the next
01:20:11 if they are not shown in the next yeah they are shown in the next uh
01:20:14 yeah they are shown in the next uh article next tutorial page
01:20:18 article next tutorial page summary summary
01:20:22 summary summary the form tag helper helps you generate a
01:20:24 the form tag helper helps you generate a correct html form
01:20:26 correct html form while also adding security to your
01:20:27 while also adding security to your solution with the automatically appended
01:20:29 solution with the automatically appended request verification token
01:20:31 request verification token okay this is really important to have
01:20:33 okay this is really important to have request
01:20:34 request verification token if what happens if we
01:20:39 verification token if what happens if we change this value and send data
01:20:54 okay it's it's still workers i guess
01:21:02 why why did we have changed the request verification token
01:21:08 maybe we need to verify it at the postback
01:21:16 yeah let's add a request verification token how do we
01:21:38 okay so there is an attribute as validate and perjury token
01:21:41 validate and perjury token so we need to add it here i guess
01:21:44 so we need to add it here i guess and let's start
01:21:51 i'm not sure if this is the correct one but it it is probably something like
01:21:53 but it it is probably something like this
01:21:55 this okay so http oh we can add it
01:21:58 okay so http oh we can add it like this also you see there it can be
01:22:00 like this also you see there it can be stacked
01:22:09 and oh there is anti bourgeoisie let's see if this is the case
01:22:17 okay several cuts so this is not the way
01:22:24 let's see what other options do we have oh we didn't change by uh
01:22:36 okay let's let's try because i think i we didn't change
01:22:39 we didn't change the verification
01:23:27 now we have a problem okay so you see once i add
01:23:28 once i add anti-forgery it doesn't work okay so
01:23:32 anti-forgery it doesn't work okay so this is the way
01:23:33 this is the way so i am changing this and nice it is not
01:23:36 so i am changing this and nice it is not working
01:23:37 working so basically what does this mean let's
01:23:40 so basically what does this mean let's assume
01:23:40 assume that someone on example.com
01:23:45 that someone on example.com put a button that will prospect to my
01:23:47 put a button that will prospect to my url
01:23:48 url this simply however since
01:23:51 this simply however since uh that request will not have this
01:23:55 uh that request will not have this anti-forgery it won't work
01:23:57 anti-forgery it won't work okay so this will work for only this
01:23:59 okay so this will work for only this session
01:24:00 session we all we already have a session i think
01:24:04 we all we already have a session i think we can see the session id in our cookies
01:24:07 we can see the session id in our cookies let's
01:24:08 let's also check that out
01:24:14 so where was the session displayed can you see the session
01:24:18 displayed can you see the session preview local storage
01:24:22 preview local storage i think i should be able to see it in
01:24:24 i think i should be able to see it in cookies
01:24:29 yes so you see there is asp.net antivirus cookie
01:24:31 antivirus cookie and a regular cookie which is used
01:24:35 and a regular cookie which is used to define this session therefore
01:24:39 to define this session therefore this value will be only valid for this
01:24:42 this value will be only valid for this session cookie okay if i change this as
01:24:45 session cookie okay if i change this as well like this
01:24:47 well like this and pause i think it will still fail
01:24:50 and pause i think it will still fail oh it didn't fail because it has the
01:24:53 oh it didn't fail because it has the correct
01:24:55 correct uh let's refresh and see
01:25:00 uh let's refresh and see the refresh it no it is still same
01:25:10 maybe i need to edit this as well or i can change this let's try
01:25:14 or i can change this let's try some something okay now it is not
01:25:17 some something okay now it is not working
01:25:18 working so addis this or that will be
01:25:22 so addis this or that will be correct okay now i can't get back to
01:25:27 correct okay now i can't get back to okay now the cookie is reset
01:25:31 okay now the cookie is reset okay so this cookie is important i think
01:25:34 okay so this cookie is important i think so i didn't change the form and purge uh
01:25:38 so i didn't change the form and purge uh anti forgery but i have changed the
01:25:41 anti forgery but i have changed the cookie
01:25:43 cookie now again not working so it is verifying
01:25:46 now again not working so it is verifying that
01:25:47 that based on that volume okay i think we can
01:25:51 based on that volume okay i think we can move to the next
01:25:52 move to the next uh tutorial
01:25:55 uh tutorial okay
01:26:08 all right tag helpers the label tag helper
01:26:13 tag helpers the label tag helper the html label element is normally used
01:26:16 the html label element is normally used in combination with another control
01:26:18 in combination with another control to convey the purpose of the other
01:26:19 to convey the purpose of the other control in other words and as the name
01:26:21 control in other words and as the name implies
01:26:22 implies it can label another control visually
01:26:25 it can label another control visually you could achieve the same by placing a
01:26:27 you could achieve the same by placing a piece of text next to the control
01:26:29 piece of text next to the control but when you use a label the browser
01:26:31 but when you use a label the browser knows that these two items belong
01:26:32 knows that these two items belong together
01:26:34 together this gives you a couple of advantages
01:26:36 this gives you a couple of advantages where the most notable one is the fact
01:26:38 where the most notable one is the fact that when you click the label
01:26:39 that when you click the label the linked control is automatically
01:26:41 the linked control is automatically activated
01:26:42 activated this is nice for eg a text field but
01:26:45 this is nice for eg a text field but it's even nicer for a checkbox or radio
01:26:47 it's even nicer for a checkbox or radio button where the clickable part of the control
01:26:49 where the clickable part of the control is very small
01:26:52 is very small linking a label with another control is
01:26:54 linking a label with another control is normally done by using the html property
01:26:57 normally done by using the html property called 4
01:26:57 called 4 and referring to the id property of the
01:26:59 and referring to the id property of the other control like this
01:27:01 other control like this okay this is really important so with
01:27:04 okay this is really important so with this labeling
01:27:10 you are actually coupling a control field and a text so when the
01:27:13 a control field and a text so when the text is click it
01:27:14 text is click it actually you are activating the control
01:27:16 actually you are activating the control and it is much easier
01:27:19 and it is much easier for users to use and it may be also seo
01:27:22 for users to use and it may be also seo friendly
01:27:23 friendly search engine optimization
01:27:27 search engine optimization however when using the label tag helper
01:27:29 however when using the label tag helper you get the advantage of a strongly
01:27:31 you get the advantage of a strongly typed connection between the model
01:27:33 typed connection between the model and the label if you change to the
01:27:34 and the label if you change to the property on the model the change is
01:27:36 property on the model the change is automatically reflected in all places
01:27:38 automatically reflected in all places where you use the tag helper
01:27:41 where you use the tag helper so we don't need to come here and change
01:27:43 so we don't need to come here and change it okay
01:27:45 it okay because we can use the display property
01:27:48 because we can use the display property of model i will show you in a moment the
01:27:51 model i will show you in a moment the for property
01:27:53 for property as with several other tag helpers the
01:27:55 as with several other tag helpers the connection to the model is created with
01:27:57 connection to the model is created with the for property and as with any other tag
01:27:59 property and as with any other tag helper property it requires a prefix
01:28:03 helper property it requires a prefix this prefix is usually asp unless you
01:28:06 this prefix is usually asp unless you specifically change this
01:28:08 specifically change this in other words a tag helper enabled
01:28:10 in other words a tag helper enabled label would look like this
01:28:19 notice how you no longer have to specify the text of the label
01:28:20 the text of the label it will be automatically pulled from the
01:28:22 it will be automatically pulled from the model and the html for attribute will be
01:28:25 model and the html for attribute will be automatically filled to match the
01:28:26 automatically filled to match the designated input
01:28:27 designated input element the resulting html will look
01:28:31 element the resulting html will look like this
01:28:32 like this okay let's test it immediately
01:28:41 so we have an input but before the input i am going to have
01:28:42 i am going to have asp i am enable psp4
01:28:47 asp i am enable psp4 as our title and that's it
01:28:50 as our title and that's it and when we refresh restart application
01:28:52 and when we refresh restart application let's see
01:28:53 let's see it will generate sr title then uh
01:28:57 it will generate sr title then uh the text box the input field of sr title
01:29:01 the text box the input field of sr title however we don't want to of course
01:29:03 however we don't want to of course display the parameter name
01:29:05 display the parameter name we would like to display more user
01:29:07 we would like to display more user currently name and
01:29:09 currently name and in a moment we are going to see that as
01:29:11 in a moment we are going to see that as well actually we have seen that already
01:29:14 well actually we have seen that already in the previous lecture with annotations
01:29:17 in the previous lecture with annotations you see sr title okay
01:29:25 so also let's add your talk here better visuality okay
01:29:29 better visuality okay now let's continue
01:29:37 the display data annotation when looking at the two
01:29:37 at the two examples you'll notice a small
01:29:39 examples you'll notice a small difference in the first one
01:29:41 difference in the first one where i used an old school html label
01:29:43 where i used an old school html label the text was set to first name
01:29:46 the text was set to first name when using the tag helper the text was
01:29:48 when using the tag helper the text was automatically pulled from the model
01:29:50 automatically pulled from the model and the result
01:30:34 when using the tag helper the text was automatically pulled from the model
01:30:36 automatically pulled from the model and the result was first name because
01:30:38 and the result was first name because that's the property name
01:30:39 that's the property name yeah however so it is by default uh
01:30:42 yeah however so it is by default uh displaying the property name however
01:30:44 displaying the property name however that is not we want usually
01:30:47 that is not we want usually however often you'll find that property
01:30:49 however often you'll find that property names doesn't make good labels
01:30:51 names doesn't make good labels i mean surely anyone would understand
01:30:54 i mean surely anyone would understand the purpose of first name
01:30:55 the purpose of first name but first name is more correct and makes
01:30:57 but first name is more correct and makes more sense
01:30:59 more sense fortunately for us this is easy to
01:31:02 fortunately for us this is easy to change simply use the display data
01:31:03 change simply use the display data annotation on your model
01:31:05 annotation on your model like this public okay so
01:31:08 like this public okay so you see as we progress we are getting
01:31:11 you see as we progress we are getting more and more user to how to do
01:31:13 more and more user to how to do asp.net programming in a better way in a
01:31:16 asp.net programming in a better way in a more
01:31:18 more effective way so when i right click can
01:31:20 effective way so when i right click can i go to definition
01:31:22 i go to definition yes and then i'm going to add
01:31:26 yes and then i'm going to add okay enters title
01:31:30 okay enters title of the page or let's say title of the
01:31:33 of the page or let's say title of the page
01:31:39 of nif title okay let's not
01:31:42 title okay let's not make it like this so to be able to use
01:31:44 make it like this so to be able to use it i need to add a reference
01:31:46 it i need to add a reference as data annotations
01:31:49 as data annotations and when i run the application now it
01:31:51 and when i run the application now it will be displayed like that
01:31:53 will be displayed like that and when i click that label i should
01:31:56 and when i click that label i should automatically
01:32:02 my cursor should be automatically set to the input box
01:32:04 the input box text box
01:32:21 okay so you see it is here displayed as new title
01:32:22 new title when i click the title you see it is
01:32:25 when i click the title you see it is picking that up
01:32:26 picking that up and when i check this source code
01:32:30 and when i check this source code i can see that labeled for sr title
01:32:33 i can see that labeled for sr title and then i can see the id is
01:32:36 and then i can see the id is as our title and name is also sr title
01:32:40 as our title and name is also sr title so when i click it i can type something
01:32:42 so when i click it i can type something and
01:32:43 and tada it is working
01:32:46 tada it is working let's continue
01:32:52 and the cool thing here is of course that whenever you change the name
01:32:54 that whenever you change the name property of the display data annotation
01:32:56 property of the display data annotation on your model
01:32:56 on your model it will be reflected anywhere you use it
01:32:59 it will be reflected anywhere you use it so if you have multiple views using your
01:33:01 so if you have multiple views using your model you don't have to manually edit them to
01:33:03 you don't have to manually edit them to reflect this change
01:33:04 reflect this change okay this was another cool benefit of
01:33:08 okay this was another cool benefit of using label for with this
01:33:11 using label for with this basically you are updating whenever
01:33:14 basically you are updating whenever wherever you are using that model
01:33:22 this is how you program your software you should never have duplicate code so
01:33:26 you should never have duplicate code so instead of duplicate code you should use
01:33:28 instead of duplicate code you should use models
01:33:29 models classes methods and such and this is
01:33:33 classes methods and such and this is the correct way of doing that
01:33:37 the correct way of doing that summary the label tag helper is one of
01:33:40 summary the label tag helper is one of the simplest tag helpers in the
01:33:42 the simplest tag helpers in the framework
01:33:42 framework but it's still very useful allowing you
01:33:45 but it's still very useful allowing you to easily generate labels for your forms
01:33:47 to easily generate labels for your forms and tying them together with the
01:33:48 and tying them together with the relevant field definitely
01:33:51 relevant field definitely i would say definitely okay let's
01:33:54 i would say definitely okay let's continue by the way you will become more
01:33:57 continue by the way you will become more accustomed to
01:33:58 accustomed to and more expert of this as you do
01:34:01 and more expert of this as you do a project on that just by watching
01:34:06 a project on that just by watching these videos you may forget it to be
01:34:09 these videos you may forget it to be able to understand it perfectly you have
01:34:12 able to understand it perfectly you have to make a project and use this
01:34:14 to make a project and use this as you progress in your project
01:34:16 as you progress in your project development okay
01:34:26 tag helpers the input tag helper we just talked about the form tag helper
01:34:28 we just talked about the form tag helper in a previous article
01:34:30 in a previous article but all forms must contain some elements
01:34:32 but all forms must contain some elements slash controls
01:34:34 slash controls one of the most commonly used is the
01:34:36 one of the most commonly used is the input control which can take many forms
01:34:38 input control which can take many forms to support various types of input
01:34:40 to support various types of input okay so this is important input control
01:34:43 okay so this is important input control can take
01:34:43 can take many forms okay not just text okay
01:34:54 input the most common type is the text input control
01:34:55 input control which will be rendered as a single line
01:34:57 which will be rendered as a single line text box control
01:34:59 text box control however the html input tag can do much
01:35:02 however the html input tag can do much more than just
01:35:02 more than just accept simple text i will demonstrate
01:35:04 accept simple text i will demonstrate that in this article
01:35:07 that in this article the for attribute while some tag helpers
01:35:10 the for attribute while some tag helpers have several attributes available for
01:35:12 have several attributes available for various purposes
01:35:13 various purposes the input tag helper only has one the
01:35:16 the input tag helper only has one the asp for attribute
01:35:18 asp for attribute on the other hand this attribute is
01:35:20 on the other hand this attribute is extremely powerful
01:35:22 extremely powerful it will allow you to bind the input
01:35:24 it will allow you to bind the input control to a specific property on the
01:35:26 control to a specific property on the model
01:35:27 model as an example consider that you have a
01:35:29 as an example consider that you have a model called movie with a property
01:35:31 model called movie with a property called title string
01:35:33 called title string you could create an input field for it
01:35:35 you could create an input field for it very easily using the asp for attribute
01:35:38 very easily using the asp for attribute like this
01:35:39 like this input asp for equals title slash
01:35:43 input asp for equals title slash asp.net mvc automatically turns it into
01:35:47 asp.net mvc automatically turns it into a proper input tag like this
01:35:53 [Music] notice how the single tag helper
01:35:55 notice how the single tag helper attribute we specified
01:35:57 attribute we specified asp for was automatically turned into
01:35:59 asp for was automatically turned into four html attributes
01:36:01 four html attributes type id name and value this can really
01:36:05 type id name and value this can really save you some time when creating forms
01:36:08 save you some time when creating forms using data types the value for the name
01:36:12 using data types the value for the name and id attributes came directly from the
01:36:14 and id attributes came directly from the name of the title property
01:36:15 name of the title property while the value naturally came from the
01:36:17 while the value naturally came from the value of the title property
01:36:19 value of the title property but what about the type attribute
01:36:22 but what about the type attribute actually
01:36:23 actually the net framework simply looks at the
01:36:25 the net framework simply looks at the data type of the property
01:36:26 data type of the property and then generates an appropriate and
01:36:28 and then generates an appropriate and supported type for this html attribute
01:36:31 supported type for this html attribute in this case because the title property
01:36:34 in this case because the title property has been defined as a string
01:36:35 has been defined as a string the text value is used for the type
01:36:37 the text value is used for the type attribute
01:36:39 attribute using data annotations however a string
01:36:43 using data annotations however a string can be many things it could be an email
01:36:45 can be many things it could be an email address
01:36:45 address a phone number with dashes and or spaces
01:36:48 a phone number with dashes and or spaces or a password
01:36:49 or a password all of these examples could be defined
01:36:51 all of these examples could be defined as a string but require some extra
01:36:53 as a string but require some extra attention
01:36:55 attention fortunately for us asp.net mvc allows us
01:36:58 fortunately for us asp.net mvc allows us to specify the purpose of a member with
01:37:00 to specify the purpose of a member with data annotations
01:37:01 data annotations and not just for strings here's an
01:37:04 and not just for strings here's an example okay
01:37:06 example okay now uh this is a good example
01:37:10 now uh this is a good example let's expand our model as
01:37:14 let's expand our model as phone number it is string however it is
01:37:18 phone number it is string however it is annotated as fon attribute mail address
01:37:21 annotated as fon attribute mail address it is email but
01:37:23 it is email but it is string but annotated as mail
01:37:27 it is string but annotated as mail now password it is string but it is
01:37:30 now password it is string but it is set as data type data type of password
01:37:33 set as data type data type of password and birthday
01:37:34 and birthday datatype and datatype as
01:37:37 datatype and datatype as date and then there is active
01:37:41 date and then there is active let's also add something else let's see
01:37:43 let's also add something else let's see what other data types there are
01:37:46 what other data types there are we have password text email address
01:37:50 we have password text email address date multi-line text okay so this will
01:37:52 date multi-line text okay so this will be multi-line text
01:37:54 be multi-line text and i will call it as multi
01:37:57 and i will call it as multi or big letters okay
01:38:01 or big letters okay now i will uh generate another form
01:38:05 now i will uh generate another form which will include all these types
01:38:15 okay so i will make it as um yeah it can be same i don't need to
01:38:19 um yeah it can be same i don't need to change anything
01:38:20 change anything i just need to show you how they are
01:38:23 i just need to show you how they are done
01:38:24 done okay so they will all input
01:38:27 okay so they will all input to be able to change it so input
01:38:32 to be able to change it so input asp.4 equal to
01:38:35 asp.4 equal to male address okay and that's it
01:38:39 male address okay and that's it then input sb sp4
01:38:45 then input sb sp4 okay what other options there we have
01:38:48 okay what other options there we have let's start from
01:38:49 let's start from beginning in our model
01:38:52 beginning in our model which is here phone number
01:38:57 which is here phone number okay and i will also generate stairs
01:39:03 okay and i will also generate stairs labels okay label
01:39:06 labels okay label and asp for
01:39:09 and asp for phone number so they will match it
01:39:18 like this and mail address like this
01:39:23 mail address like this then okay and
01:39:26 then okay and [Music]
01:39:27 [Music] pass first like this
01:39:32 pass first like this then
01:39:33 then [Music]
01:39:40 let's continue okay birthday so this will be a daytime box
01:39:42 so this will be a daytime box automatically generated
01:39:45 automatically generated yes and
01:39:49 yes and active this will be boolean therefore it
01:39:51 active this will be boolean therefore it will be a check spot
01:39:52 will be a check spot check box because it is boolean and
01:39:55 check box because it is boolean and finally
01:39:57 finally a big letters let's also give them
01:40:01 a big letters let's also give them some display annotation here
01:40:05 some display annotation here so font as display name
01:40:08 so font as display name enter your phone
01:40:15 phone number okay and then email enter your email
01:40:22 and then email enter your email here type your password
01:40:25 here type your password or set your
01:40:36 password set your birthday and
01:40:40 set your birthday and will you active of lesson
01:40:44 will you active of lesson will you be online okay
01:40:48 will you be online okay and
01:40:51 and [Music]
01:40:52 [Music] type your command as you wish
01:40:56 type your command as you wish okay let's run the application and see
01:40:59 okay let's run the application and see what kind what kind of outputs we are
01:41:01 what kind what kind of outputs we are going to get
01:41:28 okay so they are like this however i want to
01:41:30 want to format them a little bit better
01:41:33 format them a little bit better so to do that let's open an ordered list
01:41:38 so to do that let's open an ordered list and
01:42:19 okay you see it has auto formatted everything i have typed and now
01:42:21 everything i have typed and now let's rerun
01:42:44 all right now it's much better enter your phone number i i was
01:42:46 enter your phone number i i was expecting some phone but it didn't work
01:42:49 expecting some phone but it didn't work email and
01:42:53 email and yeah it is also not formatted password
01:42:55 yeah it is also not formatted password is formatted as password box
01:42:58 is formatted as password box so birthday is formatted as birthday but
01:43:01 so birthday is formatted as birthday but it is starting from date1
01:43:05 starting from date1 you see it's a checkbox i can also click
01:43:07 you see it's a checkbox i can also click this so it will automatic select it
01:43:09 this so it will automatic select it you see because they have their labels
01:43:12 you see because they have their labels type your commands but
01:43:14 type your commands but this is also not a
01:43:22 multi-line however when i click send data you see it is expecting ads
01:43:26 send data you see it is expecting ads and not only that it will also expect
01:43:29 and not only that it will also expect like this
01:43:37 okay however phone numbers is not working okay
01:43:37 working okay it says invalid data is sent
01:43:47 okay so the url has changed it [Music]
01:43:50 [Music] um
01:43:53 um why the url has changed
01:44:52 actually it was yes redirect to action or maybe something else
01:45:23 action okay and then what can we provide we can provide action name and object
01:45:25 we can provide action name and object root values
01:45:26 root values string controller name
01:45:29 string controller name fragment object okay
01:45:33 fragment object okay we can't change
01:45:37 we can't change okay so if we do it like this then our
01:45:40 okay so if we do it like this then our updated model will not work to make it
01:45:44 updated model will not work to make it work
01:45:49 we need to also get a model here and it should be optional
01:46:10 action name object wrote no it wouldn't work
01:46:32 oh we can set the model maybe yeah let's try that okay my model and if
01:46:36 yeah let's try that okay my model and if my model is not known
01:46:40 my model is not known no i will set my model to that so this
01:46:44 no i will set my model to that so this will be by default my model
01:46:46 will be by default my model and if it is not new it's going to be my
01:46:50 and if it is not new it's going to be my model okay
01:46:53 model okay and by the way i have to set this as
01:46:57 and by the way i have to set this as null by default so uh it would work
01:47:01 null by default so uh it would work and action name will be so this is the
01:47:04 and action name will be so this is the expect an action which is
01:47:06 expect an action which is index action and then
01:47:10 index action and then the model i wonder if this will work
01:47:20 so let's make it like this and let's try
01:47:29 okay we have a problem oh this won't be anymore
01:47:31 anymore my action results it will become
01:47:37 my action results it will become [Music]
01:48:02 okay so it says not all calls but nobody
01:48:14 oh after this i have to type return here okay now let's
01:48:17 okay now let's try again and see if the updated model
01:48:20 try again and see if the updated model will be there
01:48:27 because we are updating our model and it will be redirecting to
01:48:28 will be redirecting to this index action
01:48:32 this index action therefore i have to keep updated model
01:48:34 therefore i have to keep updated model so to be able to that
01:48:36 so to be able to that dd okay
01:48:41 dd okay and dd 2 or let's say test
01:48:46 and dd 2 or let's say test okay invalidator sent to the servers
01:49:00 the redirection didn't work why because i all see all parameters here
01:49:03 because i all see all parameters here so the second pro the providing model
01:49:07 so the second pro the providing model didn't work from here
01:49:09 didn't work from here because it's take it as object group
01:49:12 because it's take it as object group values
01:49:13 values and that's not the thing i want
01:49:25 redirect action with money how can we do that
01:50:25 okay yeah they are using session i think
01:50:37 or even temp data yeah temp data is something else probably
01:50:40 something else probably so before the redirect let's see if
01:50:42 so before the redirect let's see if there is temp data
01:50:43 there is temp data yes so guess or sends a pictures used by
01:50:47 yes so guess or sends a pictures used by the results okay set
01:50:51 results okay set model let's set is a set model
01:50:55 model let's set is a set model equal to my model
01:50:59 equal to my model so i won't provide this and
01:51:15 okay tab data and here i will say
01:51:18 and here i will say set model is not known
01:51:34 and i have to also explicitly tell that it is
01:51:35 it is lecture time 10 type
01:51:39 lecture time 10 type yeah now it should work let's try
01:52:08 is some data session specific that is important because if multiple users are
01:52:10 important because if multiple users are working it may cause problems
01:52:57 okay so temp data is session bound therefore it is safe to use
01:52:58 therefore it is safe to use we got our answer and it will be only
01:53:02 we got our answer and it will be only alive
01:53:02 alive for a single uh
01:53:06 for a single uh concurrent update therefore it will hold
01:53:08 concurrent update therefore it will hold only the latest data
01:53:10 only the latest data i will type hold update
01:53:26 okay it's failed to serialize and why
01:53:34 let's refresh and retry again
01:53:41 so maybe it didn't work for uh it didn't work as
01:53:42 work as subsequent test
01:53:47 subsequent test center updated data model step is valid
01:53:52 center updated data model step is valid my model here set to temp
01:53:56 my model here set to temp model redirection
01:54:31 so where did i think it happened to here there oh no it didn't happen there
01:54:48 maybe because it is our class is not serializable
01:54:49 serializable yeah i think we need to change our class
01:54:52 yeah i think we need to change our class as
01:54:53 as here as serializable
01:54:57 here as serializable and let's retry
01:55:04 now we should be able to serialize it and then
01:55:11 set as object in the memory and set a serializable object in the
01:55:30 okay so when i refresh first it should be no yes it is node
01:55:34 first it should be no yes it is node and then let's update it
01:55:46 no we still have another problem let's look for this error and see
01:55:53 what is the problem store complex object in term data
01:56:21 so we need to add an extension for this to work and it is
01:56:23 to work and it is it is looking pretty easy one so let's
01:56:26 it is looking pretty easy one so let's add that extension
01:56:28 add that extension into our
01:56:35 i think where it is global methods it's a pretty simple
01:56:39 global methods it's a pretty simple extension basically this extension will
01:57:22 json okay and we still have
01:57:32 top data extensions okay so must be related to this
01:58:07 yes we did that okay it says we had to use ads
01:58:34 okay extensions there's put and get but why it is not
01:58:36 there's put and get but why it is not working
01:58:45 oh i see it it has to be defined in the top level yeah that's why it has to be
01:58:48 top level yeah that's why it has to be inside here
01:58:50 inside here we were putting it okay now uh
01:59:02 top level static class so this is another class not inside
01:59:05 so this is another class not inside global method
01:59:06 global method because it's the extension class
01:59:10 because it's the extension class like this okay now it is working so
01:59:13 like this okay now it is working so this will be used whenever we use
01:59:21 okay i thumped at the dictionary let's see
01:59:23 see okay so in our controller
01:59:28 okay so in our controller here we are going to use
01:59:36 let's see the usage how it is done temp data puts here so
01:59:39 temp data puts here so simply we will use stamp data put
01:59:43 simply we will use stamp data put like this it will expect a key
01:59:46 like this it will expect a key so the key will be
01:59:53 updated data and the value will be t and t can be anything so it will be our
01:59:57 and t can be anything so it will be our my model and it is serializable
02:00:01 my model and it is serializable and then you are going to check
02:00:04 and then you are going to check uh if there is
02:00:08 uh if there is ph so p checks
02:00:18 or then there's get or there's try get yeah try get is
02:00:20 or there's try get yeah try get is better i think
02:00:22 better i think so i get value so key and object are
02:00:26 so i get value so key and object are folio
02:00:28 folio so the
02:00:31 so the we will use like this and the art
02:00:36 we will use like this and the art will be my model yes simply
02:00:41 will be my model yes simply okay and
02:01:02 i think i need to check that if that exists
02:01:22 okay it will get a key and let's see what does this get at the
02:01:24 let's see what does this get at the first
02:01:26 first if it is null or time
02:01:30 if it is null or time equal to because if this data is not
02:01:33 equal to because if this data is not existing i wonder how will it behave
02:01:37 existing i wonder how will it behave okay
02:01:53 we f10 data contains key okay updated data
02:01:57 okay updated data i think i need to make it like this then
02:02:01 i think i need to make it like this then it will like this delete this
02:02:05 it will like this delete this and maybe we need to
02:02:10 and maybe we need to explicitly set it no
02:02:31 so all we did was riding an extension which can
02:02:35 an extension which can serialize and deserialize objects any
02:02:38 serialize and deserialize objects any object
02:02:38 object basically object serialization we have i
02:02:41 basically object serialization we have i have shown that in
02:02:44 have shown that in object-oriented programming it's
02:02:46 object-oriented programming it's extremely useful
02:02:49 extremely useful so test and
02:02:57 okay so you see test that i receive it and we are still at the same url
02:03:00 and we are still at the same url okay test test tests or when i refresh
02:03:02 okay test test tests or when i refresh the page it should not be like this
02:03:05 the page it should not be like this yes because it is alive only for
02:03:09 yes because it is alive only for single concurrent operation
02:03:15 single concurrent operation and yes it is working
02:03:24 but when i use this form it is not updated here because
02:03:26 updated here because this is inside another one not inside
02:03:28 this is inside another one not inside this form
02:03:29 this form okay so our phone number and other
02:03:32 okay so our phone number and other things are not
02:03:43 formatted let's read continue reading notice how i have
02:03:46 continue reading notice how i have specified the purpose of the members
02:03:48 specified the purpose of the members with data annotations
02:03:50 with data annotations there are two types used here the phone
02:03:52 there are two types used here the phone type where the intention is specified
02:03:54 type where the intention is specified directly in the annotation
02:03:56 directly in the annotation and the data type annotation where we
02:03:58 and the data type annotation where we use the data type enumeration to specify
02:04:01 use the data type enumeration to specify the purpose
02:04:02 the purpose the result is the same though notice
02:04:05 the result is the same though notice also how i use it for strings but also
02:04:07 also how i use it for strings but also for the birthday property
02:04:09 for the birthday property by default a date time type is rendered
02:04:12 by default a date time type is rendered as an input field which takes both a
02:04:13 as an input field which takes both a date and a time
02:04:14 date and a time but a birthday is usually specified as a
02:04:17 but a birthday is usually specified as a date only
02:04:18 date only we can specify this requirement by using
02:04:20 we can specify this requirement by using the data type
02:04:21 the data type date value we can now create a view
02:04:25 date value we can now create a view where these properties are used
02:04:27 where these properties are used and by using tag helpers these
02:04:29 and by using tag helpers these properties will be rendered with the
02:04:30 properties will be rendered with the desired input types
02:04:32 desired input types without extra effort
02:04:39 okay so it says the mail address the phone number is not valid
02:04:50 however on our screen there is nothing special
02:04:51 special here switch it formatted phone but it
02:04:54 here switch it formatted phone but it explains a
02:04:56 explains a telephone so when i send
02:05:03 okay it says invalid data because it is expecting a telephone number
02:05:06 expecting a telephone number and maybe something like this yes it is
02:05:09 and maybe something like this yes it is working
02:05:11 working however i need to also it is keeping the
02:05:14 however i need to also it is keeping the model
02:05:15 model you see and therefore it is set setback
02:05:27 so maybe we can change the format of the telephone numbers
02:05:28 telephone numbers um format
02:05:31 um format on numbers okay
02:05:48 on numbers okay okay this pattern
02:06:01 okay this pattern okay so this is the mozilla
02:06:03 okay so this is the mozilla [Music]
02:06:06 [Music] okay there is placeholder here maybe
02:06:08 okay there is placeholder here maybe placeholders no
02:06:10 placeholders no controlling input size
02:06:27 pattern validation okay here the pattern yeah
02:06:29 yeah so we can add pattern like this
02:06:32 so we can add pattern like this so it will expect pattern
02:06:43 okay so add a pattern here am i going to do that simply type it
02:06:46 am i going to do that simply type it here
02:06:47 here and then i'm going to add a placeholder
02:06:50 and then i'm going to add a placeholder to show so it will expect xxx
02:06:53 to show so it will expect xxx xx and x6x
02:06:57 xx and x6x okay so i think
02:07:01 okay so i think we can also set a letter as
02:07:13 xx okay that's checking out
02:07:26 and here for okay i wonder if this will work
02:07:37 yeah so country local and whatever let's retry i am hoping that this will
02:08:09 okay please mr requested formats like fish
02:08:13 like fish by upon minutes yes our format is
02:08:16 by upon minutes yes our format is working nice
02:08:18 working nice and it is also a valid format so if i
02:08:21 and it is also a valid format so if i type it even like this
02:08:23 type it even like this it won't you see and when i delete it
02:08:26 it won't you see and when i delete it it is showing like this okay it is
02:08:29 it is showing like this okay it is working exactly as we wanted great we
02:08:31 working exactly as we wanted great we can also
02:08:33 can also put a placeholder here for mail address
02:08:36 put a placeholder here for mail address as
02:08:38 as x at
02:08:47 die dot co okay something like this is up to you and we can also set a
02:08:51 is up to you and we can also set a default birthday value
02:08:54 default birthday value in our model and it will be displayed
02:08:59 in our model and it will be displayed so let's set a default birthday here
02:09:03 so let's set a default birthday here as maybe
02:09:11 name daytime okay year 2000.1
02:09:25 so it will be easier for user to pick up from there
02:09:26 from there because starting from year one is not
02:09:29 because starting from year one is not logical
02:09:30 logical obviously
02:09:56 yes now it's working next let's go to next the texts are the
02:09:59 let's go to next the texts are the attack helpers
02:10:06 and then we have the other tag helpers and then we have core concept http
02:10:09 and then we have core concept http okay i think i will end this week here
02:10:13 okay i think i will end this week here and we can
02:10:14 and we can continue from here at the next week
02:10:22 so we will also remember that this week as well at the next week
02:10:34 okay in lecture time are we left
02:10:41 okay what have we seen in the lecture time
02:10:49 let's start from the beginning of the lecture time
02:10:56 in our controller we have seen
02:11:38 after you use okay forum tag helpers also
02:11:43 helpers also post specific controllers
02:11:47 post specific controllers and action with asp
02:11:52 and action with asp or html attack helpers
02:12:06 okay define custom rods or
02:12:13 forms with stack helpers and routing
02:12:20 also redirect back to specific
02:12:23 back to specific wave after approach
02:12:26 wave after approach back while keeping
02:12:30 back while keeping model how to
02:12:33 model how to save model uh
02:12:48 okay redirect to action by using temp data
02:12:53 by using temp data okay what is temp
02:12:56 okay what is temp data and is it
02:13:00 data and is it session save
02:13:03 session save okay and how to store complex
02:13:07 okay and how to store complex data or cloud complex
02:13:11 data or cloud complex on how to search store objects
02:13:14 on how to search store objects complex classes in term
02:13:18 complex classes in term data okay
02:13:37 okay um [Music]
02:13:58 examples for the following attribute annotations
02:14:00 annotations display display
02:14:03 display display name
02:14:13 okay um email address
02:14:32 and multi-line text however multi-line text didn't work so
02:14:34 however multi-line text didn't work so let's check that as well
02:15:32 i see so we need to set rows so let's also set rows for multi-line
02:15:35 so let's also set rows for multi-line text which is here
02:15:38 text which is here and this is
02:15:56 html input multi-line rows
02:16:04 okay [Music]
02:16:18 this attribute loss or something oh it is text area
02:16:19 is text area not an input so can we make it like that
02:16:22 not an input so can we make it like that text area and rows
02:16:26 text area and rows equal to how many rows five and how many
02:16:28 equal to how many rows five and how many columns
02:16:30 columns i don't need a column for perhaps let's
02:16:33 i don't need a column for perhaps let's try like that
02:16:35 try like that i wonder if it will work i think it
02:16:37 i wonder if it will work i think it should work either text area or input
02:16:46 but i'm not sure let's see and let's see if we are getting back to
02:16:49 and let's see if we are getting back to data as we wanted
02:16:54 okay so [Music]
02:16:56 [Music] okay inside this text area we are seeing
02:17:14 so this text area has broken our application and i wonder why
02:17:28 okay so need input type
02:17:31 need input type okay text
02:17:39 how do we gonna do that input type text but multiple lines
02:18:00 okay it appears that only texture supports
02:18:03 supports however oh i see the reason i think so i
02:18:05 however oh i see the reason i think so i need to close
02:18:07 need to close but it shouldn't be the case
02:18:17 okay why did it get back the other things inside it
02:18:29 oh it says it takes that i can't be self-closing that is why
02:18:31 self-closing that is why my previous code were invalid
02:18:38 my previous code were invalid you see only some code
02:18:41 you see only some code support some self closing for example
02:18:45 support some self closing for example input supports self closing however text
02:18:48 input supports self closing however text area is not and now it is looking as we
02:18:52 is not and now it is looking as we wanted
02:18:52 wanted you so you see this has
02:18:55 you so you see this has five lines of raw or whatever i want
02:18:59 five lines of raw or whatever i want and when i send back it to server
02:19:08 let's see if it is here or i did click f10 okay
02:19:11 or i did click f10 okay now send
02:19:15 now send okay let's check the model and
02:19:18 okay let's check the model and yes it is sent back to the server as
02:19:21 yes it is sent back to the server as expected so text area is also fully
02:19:23 expected so text area is also fully supported
02:19:42 next okay okay okay what is [Music]
02:19:44 [Music] closing
02:19:49 closing okay
02:19:56 let's also learn that so these are the self closing tags
02:19:58 self closing tags area base br called embed hr
02:20:01 area base br called embed hr input link meta program source track
02:20:04 input link meta program source track however others are
02:20:06 however others are not self closing
02:20:14 okay and anything else that you see return raw or
02:20:18 that you see return raw or anti-forgery okay
02:20:25 what is anti-forgery and why it is using
02:20:36 all to enable on the forgery the controller and check to check
02:20:41 the controller and check to check server side
02:20:45 server side okay we also have seen that we have
02:20:48 okay we also have seen that we have limited with this http post
02:20:51 limited with this http post let's also get that
02:20:58 post actually this is not a this is another
02:21:00 another annotation these are
02:21:03 annotation these are recurrence validations
02:21:18 um okay controllers actions
02:21:23 controllers actions okay we have seen many things we have
02:21:25 okay we have seen many things we have solved some problems
02:21:27 solved some problems and
02:21:32 all right i think we can end the lecture here it is all it's it has been already
02:21:34 here it is all it's it has been already over two hours
02:21:36 over two hours if you have any questions please feel to
02:21:39 if you have any questions please feel to ask me
02:21:40 ask me don't hesitate you can ask me through
02:21:43 don't hesitate you can ask me through our discord
02:21:45 our discord i am hoping that you have already
02:21:46 i am hoping that you have already started your project
02:21:48 started your project about your project it has to be
02:21:51 about your project it has to be web-based it and it has to be mvc okay
02:21:53 web-based it and it has to be mvc okay these two
02:21:54 these two are mandatory and it has to be
02:21:57 are mandatory and it has to be responsive
02:21:58 responsive however i am not forcing asp.net or c
02:22:01 however i am not forcing asp.net or c sharp
02:22:02 sharp as programming language uh so
02:22:05 as programming language uh so there are three mandatory rules it has
02:22:07 there are three mandatory rules it has to be web-based
02:22:09 to be web-based or web supporting it has to be
02:22:14 or web supporting it has to be responsive and it has to be a messy
02:22:16 responsive and it has to be a messy pattern following
02:22:17 pattern following and then the rest is totally up to you
02:22:21 and then the rest is totally up to you okay let's upload our code to our
02:22:24 okay let's upload our code to our repository
02:22:57 oh anyway it is not much important let's let's learn how to rename the
02:22:59 let's let's learn how to rename the latest commit
02:23:36 okay so it's like this so let's try git comment exam and
02:23:46 let's try git comment exam and what is not renaming
02:24:14 okay so oh it is like this okay get commit xxm and
02:24:27 and get status it push origin
02:24:32 it push origin master so it has changed
02:24:48 okay okay let's check our [Music]
02:24:56 repository okay lecture 10 source code edit
02:24:59 okay lecture 10 source code edit and yeah it's there
02:25:03 and yeah it's there okay end of lectures and hopefully see
02:25:05 okay end of lectures and hopefully see you next week

ASPNET MVC Bootstrap Responsive Web Programming Lecture 10 Tag Helpers TempData Annotations

ASP.NET - MVC - Bootstrap Responsive Web Programming, Lecture 10: Tag Helpers, TempData, Annotations

Full tutorial link > https://www.youtube.com/watch?v=Jo6gQ7Od0tM

Video Transcription

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!