ASP.NET - MVC - Core - Responsive Web Design - Lecture 14: Asynchronous Ajax and DB Operations

[FurkanGozukara]

ASP.NET - MVC - Core - Responsive Web Design - Lecture 14: Asynchronous Ajax and DB Operations

Full tutorial: https://www.youtube.com/watch?v=4T3aplS2EDw

#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 14:

How to do database operations such as insert, update, delete, select in MS-SQL database with using Entity Framework in ASP.NET Core 5 MVC application

How to postback necessary part of an entity to update changes in the database

How to fully postback a model to update entity changes in the database

How to do a deep clone of an object instance with JsonConvert SerializeObject and DeserializeObject

How to copy values of all properties of an object instance into another object with PropertyCopier custom class

How to convert reguler html into fully ajax supporting html elements such as form, a href, etc. with using jquery-ajax-unobtrusive script

How to update part of a page with ajax asynchronously by using data-ajax-complete method call

How to display loading gif with using data-ajax-begin and data-ajax-complete method calls

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:04 led students welcome to the lecture 14 of responsive web design with asp.net 5

• 00:00:07 of responsive web design with asp.net 5 and mvc pattern and bootstrap 5

• 00:00:10 and mvc pattern and bootstrap 5 course so today

• 00:00:13 course so today this is our last uh tutorial article

• 00:00:16 this is our last uh tutorial article related to

• 00:00:18 related to this asp.nvidia tutorial.com

• 00:00:22 this asp.nvidia tutorial.com it is about working with databases and

• 00:00:24 it is about working with databases and we already have worked with database

• 00:00:28 we already have worked with database here they are using

• 00:00:31 here they are using uh a custom framework a third-party

• 00:00:34 uh a custom framework a third-party framework to handle database operations

• 00:00:37 framework to handle database operations and their example is not

• 00:00:40 and their example is not asynchronous it is doing full post page

• 00:00:43 asynchronous it is doing full post page so i plan to implement their example

• 00:00:46 so i plan to implement their example with our entity framework and then make

• 00:00:49 with our entity framework and then make it uh as asynchronous with ajax queries

• 00:00:55 uh as asynchronous with ajax queries so our example will be a more advanced

• 00:00:57 so our example will be a more advanced version

• 00:00:58 version so let's start as usual with cloning our

• 00:01:03 so let's start as usual with cloning our latest project code here

• 00:01:12 latest project code here okay okay lecture 14.

• 00:01:15 okay okay lecture 14. hopefully i plan to uh show you

• 00:01:19 hopefully i plan to uh show you uh bootstrap uh related things in the

• 00:01:24 uh bootstrap uh related things in the next week it will be the 15th video

• 00:01:27 next week it will be the 15th video normally this is the last week of our

• 00:01:29 normally this is the last week of our semester but

• 00:01:30 semester but i will record an extra video for you

• 00:01:39 okay okay so here it it is talking about uh database engine

• 00:01:42 it is talking about uh database engine they have made example with sql server

• 00:01:45 they have made example with sql server express local db

• 00:01:51 we can also use that or you can use mssql server as well it doesn't matter

• 00:01:54 mssql server as well it doesn't matter everything would work exactly same

• 00:01:58 everything would work exactly same with a entity framework

• 00:02:01 with a entity framework only the connection string would be

• 00:02:04 only the connection string would be different

• 00:02:11 so there is a to-do list and um it's a very simple thing

• 00:02:14 it's a very simple thing as an example so they generate

• 00:02:19 as an example so they generate let's see their table

• 00:02:22 let's see their table they compose a table such as this one

• 00:02:25 they compose a table such as this one so it has id as primary key it has add

• 00:02:29 so it has id as primary key it has add date time it says title and it has

• 00:02:32 date time it says title and it has a bit is done

• 00:02:35 a bit is done okay so we will compose the same table

• 00:02:39 okay so we will compose the same table in our

• 00:02:40 in our database let's rename this as picture 14

• 00:02:51 and also let's open our sql management studio

• 00:03:05 okay so it is var character 200 and others are like this

• 00:03:19 okay it is taking a little bit of time so they have used a third-party pro

• 00:03:21 so they have used a third-party pro framework dapper

• 00:03:23 framework dapper it is explained here we will use entity

• 00:03:26 it is explained here we will use entity framework with

• 00:03:28 framework with uh entity framework tool that we have

• 00:03:31 uh entity framework tool that we have added to our

• 00:03:33 added to our application okay so this is our database

• 00:03:37 application okay so this is our database and let's add a new table

• 00:03:39 and let's add a new table as to do list

• 00:03:46 okay so it will have id of to do things it will be

• 00:03:50 id of to do things it will be primary i won't make it um

• 00:03:58 okay i will make it uh identity yeah we don't need to manually set

• 00:04:02 yeah we don't need to manually set id so let's make it identity here

• 00:04:14 and it has okay update it will be datetime we want all of nodes

• 00:04:18 it will be datetime we want all of nodes and for update we can set

• 00:04:22 and for update we can set a default time

• 00:04:29 a default time or with your money on the peak today

• 00:04:31 or with your money on the peak today time

• 00:04:33 time so i think i will set it as

• 00:04:36 so i think i will set it as uh utc time

• 00:04:39 uh utc time okay system utc

• 00:04:44 okay system utc date time like this

• 00:04:48 date time like this it won't accept if it is not valid so

• 00:04:51 it won't accept if it is not valid so then we have

• 00:04:52 then we have title of the to-do list

• 00:04:56 title of the to-do list and work character 200

• 00:05:02 and it's once we know and then we have is done

• 00:05:03 is done so is done has default zero

• 00:05:11 okay this is a bit and by default it will be zero

• 00:05:13 will be zero okay so we have default value for update

• 00:05:16 okay so we have default value for update and is done and id is

• 00:05:20 is done and id is uh auto increment and we have title

• 00:05:23 uh auto increment and we have title let's save it as table to

• 00:05:27 let's save it as table to do list

• 00:05:34 okay so our date time was valid you can also

• 00:05:35 also verify it with select

• 00:05:39 verify it with select it is a daytime like this it will return

• 00:05:42 it is a daytime like this it will return utc daytime

• 00:05:45 utc daytime okay okay so the name didn't

• 00:05:49 okay okay so the name didn't go well so let's just restart it

• 00:06:06 okay we have composed our table then we will auto generate

• 00:06:08 will auto generate the related classes

• 00:06:16 okay there is a problem since the renaming didn't go well

• 00:06:19 since the renaming didn't go well it is another problem let's just clone

• 00:06:22 it is another problem let's just clone it again

• 00:06:32 it is not a problem i will delete it later

• 00:06:42 version two i would rename that folder later actually

• 00:06:57 okay okay let's move to nip okay so um

• 00:07:08 start adding with our lecture 14 controller viv

• 00:07:10 controller viv and model

• 00:07:19 okay we will uh have to wait okay they are getting opened let's

• 00:07:21 wait okay they are getting opened let's close

• 00:07:22 close everything from our previous lectures

• 00:07:27 everything from our previous lectures and wait for visual use your studio to

• 00:07:31 and wait for visual use your studio to be fully loaded

• 00:07:41 okay okay it looks like pretty much okay there are still background tasks

• 00:07:50 okay let's start with adding our lecture 14 folder

• 00:08:09 first let's add its default folder to 14.

• 00:08:12 to 14. let's add index field of lecture 14.

• 00:08:26 okay then let's add controller of lecture 14.

• 00:08:51 all right a form as a model uh i will also generate it in a moment

• 00:08:54 i will also generate it in a moment but before that i will rename this to

• 00:08:58 but before that i will rename this to lecture 14.

• 00:09:08 let's rename these two okay so first let's uh generate

• 00:09:11 okay so first let's uh generate our ep code if he is eve

• 00:09:15 our ep code if he is eve power tools reverse engineer it will

• 00:09:17 power tools reverse engineer it will generate the code

• 00:09:19 generate the code of our new class

• 00:09:22 of our new class then we will inherit it to compose our

• 00:09:25 then we will inherit it to compose our model if it is necessary but it won't be

• 00:09:27 model if it is necessary but it won't be necessary probably

• 00:09:30 necessary probably so you see i am adding new to-do list

• 00:09:33 so you see i am adding new to-do list as well i am including

• 00:09:37 as well i am including connection stream 2

• 00:09:45 okay this is the connection string here and

• 00:09:46 and [Music]

• 00:09:48 [Music] let's see where it is generated okay

• 00:09:51 let's see where it is generated okay here the tbr to-do list

• 00:09:53 here the tbr to-do list so you see this is our database

• 00:09:57 so you see this is our database table

• 00:10:03 however i am going to add some customization to this

• 00:10:06 customization to this class in lecture 14 model

• 00:10:10 class in lecture 14 model okay

• 00:10:18 what kind of customization if you wonder let me show you

• 00:10:32 okay plus lecture 14. okay so this class

• 00:10:36 lecture 14. okay so this class will inherit uh

• 00:10:39 will inherit uh tbl to do list like this therefore all

• 00:10:43 tbl to do list like this therefore all of the items will be

• 00:10:44 of the items will be available and simply

• 00:10:50 available and simply we will add some requirement

• 00:10:54 we will add some requirement such as how we gonna do that

• 00:10:58 such as how we gonna do that is

• 00:11:00 is again let's check it out

• 00:11:30 i will have other values or

• 00:11:50 so we can can we override it let's try

• 00:11:56 let's try prop and heidi

• 00:12:08 so okay so it's very hide the inherited id

• 00:12:17 use the new keyboard if i didn't give us impact and

• 00:12:20 impact and intended here

• 00:12:24 intended here so high place manager plus i need

• 00:12:28 so high place manager plus i need right base member and

• 00:12:52 okay oh this won't be required because this

• 00:12:54 oh this won't be required because this is automatic

• 00:12:55 is automatic okay i don't need to do that

• 00:13:02 i need to i don't also need a date time as well i just need to

• 00:13:05 date time as well i just need to overwrite title

• 00:13:08 overwrite title so i will overwrite it speak new

• 00:13:12 so i will overwrite it speak new actually it will hide the previous title

• 00:13:15 actually it will hide the previous title it is as public string

• 00:13:20 is as public string okay so the

• 00:13:30 yeah so title must contain at least two characters and something must contain at

• 00:13:32 characters and something must contain at least 200 characters

• 00:13:34 least 200 characters and i would hide it like this but if i

• 00:13:38 and i would hide it like this but if i hide it what happens

• 00:13:54 and then we have is done okay i also know don't need anything

• 00:13:56 okay i also know don't need anything regarding to that

• 00:13:59 regarding to that okay so lecture 14

• 00:14:02 okay so lecture 14 model will be like this

• 00:14:05 model will be like this we have updated our class okay let's

• 00:14:07 we have updated our class okay let's continue

• 00:14:15 okay then there is two list view model let's read it

• 00:14:19 let's read it so which v model we will list

• 00:14:22 so which v model we will list whatever is available

• 00:14:25 whatever is available okay so here in our controller

• 00:14:30 okay so here in our controller which is here here we will load whatever

• 00:14:34 which is here here we will load whatever what is available

• 00:14:35 what is available inside the database and to use that we

• 00:14:39 inside the database and to use that we will have using

• 00:14:40 will have using okay so there is our mvc context

• 00:14:44 okay so there is our mvc context here okay my context

• 00:14:48 here okay my context like this let me see context

• 00:15:00 and here let's define our lecture 14 model

• 00:15:08 what is the name of our lecture 14 it is just lecture 14 so let's add it to

• 00:15:10 it is just lecture 14 so let's add it to here using

• 00:15:13 here using okay uh lecture nine model starts

• 00:15:18 okay uh lecture nine model starts yeah just this and

• 00:15:21 yeah just this and lecture 14

• 00:15:24 lecture 14 my model also need my

• 00:15:27 my model also need my name lecture 14.

• 00:15:36 and we are going to have tbi to-do list

• 00:15:40 tbi to-do list okay and one moment

• 00:15:49 okay so here we will [Music]

• 00:15:51 [Music] select all the to-do list

• 00:15:55 select all the to-do list okay and how we gonna do that

• 00:15:58 okay and how we gonna do that is i think

• 00:16:00 is i think [Music]

• 00:16:02 [Music] it was like

• 00:16:07 it was like okay let's see what options we have we

• 00:16:10 okay let's see what options we have we have find

• 00:16:17 okay now find all no

• 00:16:44 let us take a real quick union zip i think i will use

• 00:16:51 i think i will use okay this is selector so

• 00:17:04 anti-framework so it will take a little bit of time to

• 00:17:07 so it will take a little bit of time to get me used to

• 00:17:18 which is what is like this so here my contacts.tbrl

• 00:17:22 so here my contacts.tbrl to the list so this will return

• 00:17:26 to the list so this will return okay a set of all to-do lists

• 00:17:42 actually this is a list of our model probably let me check it

• 00:18:12 okay probably i need to get it to a list like this

• 00:18:23 so our model actually is a single element therefore i need to

• 00:18:26 is a single element therefore i need to modify my model

• 00:18:29 modify my model how am i going to do that is

• 00:18:58 so this is today this lecture 14 and

• 00:19:29 um item let's see all to do items

• 00:19:38 okay like this so it will contain to the item

• 00:19:46 and i need to cast this into my list how am i going to do that is

• 00:19:55 it will be like this okay and this thing to the items will be equal to

• 00:19:58 to the items will be equal to to list and i need to cast it yeah

• 00:20:03 to list and i need to cast it yeah what am i gonna cast is

• 00:20:06 what am i gonna cast is to the item

• 00:21:09 maybe something like this and we will call the cast here

• 00:21:26 it won't be supporting explicit casting i think

• 00:21:31 explicit casting i think i can have a constructor as to the item

• 00:21:34 i can have a constructor as to the item here

• 00:21:36 here so like this i'll make

• 00:21:40 so like this i'll make okay to the item

• 00:21:44 okay to the item and in the constructors

• 00:22:19 okay so how can we achieve that i have never done something like this before

• 00:22:35 c-sharp pass to child class wrong parent class yeah

• 00:22:39 wrong parent class yeah let's see

• 00:22:45 okay costs child object as parent how do we do that

• 00:23:15 okay so there is person clause then there's customer class which inherits

• 00:23:17 there's customer class which inherits person and it has some extra type

• 00:23:46 okay so here's we have customer person employee person

• 00:23:48 employee person so the customer per person base first

• 00:24:13 so this is a copy constructors maybe we can do that

• 00:24:18 maybe we can do that which is something like this

• 00:24:21 which is something like this public

• 00:24:32 to do let's put it like this

• 00:24:52 there is base that's title equal to these are title

• 00:24:56 equal to these are title in the constructors

• 00:25:00 in the constructors and still we need to cast it to our

• 00:25:03 and still we need to cast it to our item so this is rather an advanced topic

• 00:25:14 item so this is rather an advanced topic maybe we can cast it like this

• 00:25:34 and explicit cast so listen to me this is right

• 00:25:42 here yeah let's see if it will work

• 00:25:46 yeah let's see if it will work i'm not sure then we will return

• 00:25:51 i'm not sure then we will return uh index actually it is like this index

• 00:25:55 uh index actually it is like this index view with our model which will be this

• 00:26:00 with our model which will be this and let's get back to our next one here

• 00:26:03 and let's get back to our next one here we will have our

• 00:26:06 we will have our model

• 00:26:06 model [Music]

• 00:26:09 [Music] let me as

• 00:26:10 let me as [Music]

• 00:26:12 [Music] lecture 9 model start lecture 14

• 00:26:25 okay so i will add a debug here and

• 00:26:29 a debug here and let's add some random value

• 00:26:38 let's add some random value okay so test one okay it is added

• 00:26:43 okay so test one okay it is added and let's run the application

• 00:27:49 okay so lecture 14 dot index okay

• 00:27:52 dot index okay it is triggered let's see what happens

• 00:27:55 it is triggered let's see what happens in our casting okay unable to cast

• 00:27:58 in our casting okay unable to cast object type of circuits

• 00:28:01 object type of circuits two type of yeah so our casting didn't

• 00:28:05 two type of yeah so our casting didn't work

• 00:28:06 work what we need to do is we need to extend

• 00:28:09 what we need to do is we need to extend base class to convert it

• 00:28:26 um something like it here i'll mix static

• 00:28:43 i will add this to global methods actually

• 00:28:53 okay here we have global controller with our global methods here

• 00:28:58 with our global methods here yeah here i can write it as an extension

• 00:29:02 yeah here i can write it as an extension okay it has to be under some cluster

• 00:29:06 okay it has to be under some cluster so let's see

• 00:29:09 so let's see global methods here only static to your

• 00:29:12 global methods here only static to your item

• 00:29:14 item um let's name it as convert

• 00:29:27 child okay let's also off let's say convert to do yeah

• 00:29:31 convert to do yeah and this will take this tbl

• 00:29:35 and this will take this tbl okay to-do list my list

• 00:29:40 okay to-do list my list and what it is going to do is

• 00:29:44 and what it is going to do is it will define a to-do class object

• 00:29:53 and need to do item and simply i will just

• 00:29:56 and simply i will just have constructed as

• 00:29:59 have constructed as table to-do list my list

• 00:30:03 table to-do list my list and basically

• 00:30:11 this will assign as my list title this dot id equal to my list start

• 00:30:16 this dot id equal to my list start id is that um is none is equal to minus

• 00:30:21 id is that um is none is equal to minus that is down and

• 00:30:24 is down and is that id title

• 00:30:29 is that id title that take equals on minus start and date

• 00:30:32 that take equals on minus start and date yeah

• 00:30:47 okay this simply yeah so this is an expansion extension

• 00:30:51 yeah so this is an expansion extension and here when we select them

• 00:30:55 and here when we select them uh we will select them as

• 00:30:58 uh we will select them as we are to convert to do here

• 00:31:03 we are to convert to do here and then we will

• 00:31:10 convert it to list okay now it should work

• 00:31:12 work let's see

• 00:31:38 so here to do list you see i could modify

• 00:31:38 modify this as well however whenever you

• 00:31:41 this as well however whenever you replace your

• 00:31:43 replace your database classes this will get overrated

• 00:31:46 database classes this will get overrated therefore

• 00:31:46 therefore you shouldn't make any changes here

• 00:31:50 you shouldn't make any changes here okay okay so lecture 14

• 00:31:54 okay okay so lecture 14 index

• 00:32:01 okay it is working and we have our item here as you can see

• 00:32:09 all right let's also set this as a route so currently it is opening i think

• 00:32:14 so currently it is opening i think um lecture 10

• 00:32:18 um lecture 10 if i remember correctly yeah so it is

• 00:32:21 if i remember correctly yeah so it is opening lecture 10 i will

• 00:32:24 opening lecture 10 i will start opening lecture 14 as default like

• 00:32:27 start opening lecture 14 as default like this

• 00:32:29 this and let's check the

• 00:32:33 and let's check the lectures on if there is any other

• 00:32:36 lectures on if there is any other routing

• 00:32:44 okay no uh we don't need lecture 10 anymore by the way so let's

• 00:32:47 lecture 10 anymore by the way so let's continue with the

• 00:32:48 continue with the tutorial article so we are having this

• 00:32:52 tutorial article so we are having this uh right now in our format

• 00:33:00 and in the view it is something like this let's add this to our

• 00:33:02 this let's add this to our weave

• 00:33:10 okay so it uses create update home for methods

• 00:33:12 methods so our model dot um

• 00:33:21 i see we need to have for each so this is for

• 00:33:24 for each so this is for adding i think

• 00:33:34 let's see there is yeah so this is adding part

• 00:33:35 adding part i think part is something like this so

• 00:33:38 i think part is something like this so in the editing part

• 00:33:39 in the editing part it will be

• 00:34:00 okay so in our model for to be able to add we need

• 00:34:01 add we need another instance let's go to our

• 00:34:05 another instance let's go to our model make your protein here

• 00:34:09 model make your protein here and we will have list to keep the list

• 00:34:13 and we will have list to keep the list of uh items from database and we need an

• 00:34:16 uh items from database and we need an instance of to the item

• 00:34:19 instance of to the item okay publish to the item

• 00:34:24 okay publish to the item name to task

• 00:34:35 this okay so it doesn't have a default constructor

• 00:34:37 so it doesn't have a default constructor therefore i also need to set that

• 00:34:41 therefore i also need to set that something like this

• 00:34:49 and yeah okay now it should work yeah so

• 00:34:52 yeah so model dots need to do task

• 00:34:56 model dots need to do task dot id yeah hidden for

• 00:35:00 dot id yeah hidden for we can also have display thing if we

• 00:35:03 we can also have display thing if we want

• 00:35:03 want but this is hidden therefore it won't be

• 00:35:07 but this is hidden therefore it won't be visible

• 00:35:09 visible and we have title form control okay

• 00:35:13 and we have title form control okay and we have id so if id is bigger than

• 00:35:17 and we have id so if id is bigger than zero

• 00:35:22 it will be update otherwise it will be red

• 00:35:24 red okay it is done

• 00:35:27 okay it is done so basically this will

• 00:35:30 so basically this will call home controller create update

• 00:35:34 call home controller create update however i will change it so let's

• 00:35:41 start with coding our edit method this will be

• 00:35:43 will be http post only

• 00:35:50 like this and i will call it as update add or update

• 00:35:53 update add or update insert yeah and i will also add

• 00:35:57 insert yeah and i will also add a rule for it so root will be

• 00:36:05 something like this lecture 14 [Music]

• 00:36:11 okay and update insert and let's give it a name so we can access it directly

• 00:36:15 name so we can access it directly [Music]

• 00:36:17 [Music] update insert name

• 00:36:20 update insert name to the task

• 00:36:27 okay it will take our to-do model my model

• 00:36:32 our to-do model my model okay here's

• 00:36:40 okay we are setting id we are setting title

• 00:36:41 title actually we are not setting id we are

• 00:36:43 actually we are not setting id we are setting title

• 00:36:45 setting title only yeah other things are default

• 00:36:49 only yeah other things are default and

• 00:36:50 and [Music]

• 00:36:52 [Music] we will check if my model is

• 00:36:57 we will check if my model is valid if

• 00:37:01 valid if all the motor state is valid

• 00:37:06 all the motor state is valid if it is not validated but return

• 00:37:10 if it is not validated but return and then what we are going to do is

• 00:37:13 and then what we are going to do is simply

• 00:37:14 simply return content yeah

• 00:37:23 okay okay some

• 00:37:27 okay some unexpected error accurate

• 00:37:31 unexpected error accurate please try again

• 00:37:41 if it is not valid if it is embodied then we will check

• 00:37:47 basically we will just use update yeah so to be able to use update what we

• 00:37:51 yeah so to be able to use update what we are going to do

• 00:37:52 are going to do is okay

• 00:37:55 is okay um we need to convert this

• 00:37:59 um we need to convert this into the base model we can do it

• 00:38:03 into the base model we can do it my tbl

• 00:38:07 my tbl to-do list okay updated

• 00:38:10 to-do list okay updated item

• 00:38:16 will be equal to tbr to do lists

• 00:38:19 to do lists my model i think this should work

• 00:38:33 okay there is add however if it is updated

• 00:38:34 updated will this work

• 00:39:24 okay there is add or update which is from entity framework

• 00:39:26 from entity framework okay migrations so basically i will use

• 00:39:30 okay migrations so basically i will use that

• 00:39:43 for add or update we need to add and framework migrations

• 00:40:08 and since we are using anti-framework tools

• 00:40:10 tools we may not have anticipated migrations

• 00:41:13 let's try this way and see if it is working or not

• 00:41:21 okay so basically uh we will add a new item

• 00:41:36 set its um state modified

• 00:42:00 and okay it doesn't support this in the end framework obviously

• 00:42:10 yeah okay it is working so there is entry

• 00:42:11 entry state equal to enter state dot

• 00:42:16 state equal to enter state dot modified

• 00:42:23 and then we will call save changes okay so this is for both update and

• 00:42:29 delete uh currently this will be always at

• 00:42:34 uh currently this will be always at because we are not getting any id

• 00:42:38 because we are not getting any id so first let's try this and if it is

• 00:42:40 so first let's try this and if it is working or not

• 00:42:41 working or not let's see that

• 00:42:44 let's see that then we will also work on the update as

• 00:43:18 okay so yeah it is like this test two at

• 00:43:22 test two at okay so it did go home create

• 00:43:25 okay so it did go home create ah we didn't fix the uh

• 00:43:28 ah we didn't fix the uh naming in our weave let's fix that

• 00:43:40 okay we will just give roach name those values as let's see

• 00:43:52 so there is html begin form which takes let's see

• 00:44:10 okay simple begin form i can't see the parameters that it takes

• 00:44:22 so okay so there's four method t model

• 00:44:24 okay so there's four method t model attributes okay now i can see

• 00:44:27 attributes okay now i can see okay four methods support attributes

• 00:44:43 action name yeah so i need to have what is it also to use

• 00:44:53 okay i think i'll use classical methods that we have used in

• 00:44:56 classical methods that we have used in our previous lecture

• 00:44:59 our previous lecture it is better approach so in

• 00:45:02 it is better approach so in here we have this

• 00:45:05 here we have this let's copy and paste it

• 00:45:12 so here's okay and let's take our road name

• 00:45:17 and let's take our road name yes then we have

• 00:45:22 yes then we have a hidden force so input and

• 00:45:27 a hidden force so input and let's see asp

• 00:45:57 so there is asp for but asv hidden for okay so that is just type hidden

• 00:46:01 okay so that is just type hidden type okay

• 00:46:08 hidden here and it will be for

• 00:46:15 okay id actually it should automatically get it

• 00:46:22 it doesn't get this will be hidden there for no actually they are

• 00:46:26 no actually they are not

• 00:46:28 not [Music]

• 00:46:31 [Music] being seen right now even though we did

• 00:46:34 being seen right now even though we did attack helpers

• 00:46:37 attack helpers so where is the problem

• 00:46:42 so where is the problem remove this

• 00:46:46 and [Music]

• 00:47:01 okay still the talk helpers is not visible

• 00:47:17 okay interesting i don't see the talk at all

• 00:47:18 all okay so the talk helpers are visible

• 00:47:20 okay so the talk helpers are visible here

• 00:47:39 and why is that maybe let's close and okay now visible

• 00:47:43 maybe let's close and okay now visible here

• 00:47:44 here so type hidden asp for id

• 00:47:47 so type hidden asp for id value is nothing

• 00:47:57 so id is not visible i have to set it like this yeah

• 00:47:59 like this yeah okay and

• 00:48:33 one second so this is the code that we did get and then we have text box for

• 00:48:42 yeah something like this we give to the title we can also have a custom

• 00:48:46 to the title we can also have a custom title

• 00:48:48 title so let's also set that in our model

• 00:48:52 so let's also set that in our model which is here and here

• 00:49:02 it's going to display okay i think something like this

• 00:49:28 your name i was remembering it correctly which is

• 00:49:32 correctly which is in our controllers

• 00:49:35 in our controllers yes it will be named

• 00:49:43 equal to understand description okay [Music]

• 00:49:45 [Music] and let's close this here

• 00:49:49 and let's close this here we have title label and we have sv4

• 00:49:53 we have title label and we have sv4 this will be an input

• 00:50:01 okay enter task title

• 00:50:05 task title and yeah we have sent back

• 00:50:09 and yeah we have sent back okay now it should work

• 00:50:18 we used hack helpers which is better than

• 00:50:19 than html4 in my opinion

• 00:50:41 okay so let's wait it to run by the way after our prospect

• 00:50:45 by the way after our prospect what do we return we return index

• 00:50:49 what do we return we return index my model here so with this way we can

• 00:50:52 my model here so with this way we can update

• 00:50:53 update as well so let's enter a task title

• 00:50:57 as well so let's enter a task title as test two and

• 00:51:00 as test two and okay some unexpected error occurs so it

• 00:51:02 okay some unexpected error occurs so it is not

• 00:51:03 is not valid i wonder why

• 00:51:15 so here our model i think it is because id

• 00:51:15 id is zero and title is null

• 00:51:37 we have need to do this title value is zero

• 00:52:07 okay so we have new tasks you to do task we have new lists

• 00:52:19 and we are binding it but it is not possible back

• 00:52:40 okay updating insert input type and then the id field is required but we didn't

• 00:52:43 the id field is required but we didn't we didn't bind it we bind it to 0 by

• 00:52:45 we didn't bind it we bind it to 0 by default and then we have task

• 00:52:48 default and then we have task description we have task title

• 00:52:52 description we have task title so the test title is

• 00:52:56 so the test title is let's see where is the name

• 00:53:06 id need to do task title when the name is new to the task title

• 00:53:10 when the name is new to the task title okay but it does not post break it here

• 00:53:13 okay but it does not post break it here that is weird

• 00:53:19 to do item my models i think i know because we will we need to expect

• 00:53:22 because we will we need to expect lecture 14 not my model it will be

• 00:53:25 lecture 14 not my model it will be lecture 14.

• 00:53:29 lecture 14. like this and now it should work here

• 00:53:32 like this and now it should work here so my model dot to the need to do task

• 00:53:37 so my model dot to the need to do task okay so you see minor address can cause

• 00:53:41 okay so you see minor address can cause a lot of problems and

• 00:53:45 a lot of problems and require a lot of time to figure out what

• 00:53:47 require a lot of time to figure out what is wrong

• 00:53:49 is wrong you have to be careful all right

• 00:53:56 you have to be careful all right so let's

• 00:53:59 so let's test it

• 00:54:08 okay now test two and okay so it says that

• 00:54:11 and okay so it says that id has a temporary value while

• 00:54:13 id has a temporary value while attempting change it's

• 00:54:14 attempting change it's the answer to the modified

• 00:54:26 okay so it appears that uh since it is

• 00:54:30 uh since it is auto increment how

• 00:54:33 auto increment how should we proceed

• 00:55:39 increment idea let's see

• 00:56:03 okay um like we need to find whether this exists

• 00:56:04 this exists if it did not exist then we need to add

• 00:56:08 if it did not exist then we need to add if it exists and we need to modify

• 00:56:17 and how can we do that we can do it with um reflection

• 00:56:20 um reflection copy it record it here

• 00:56:23 copy it record it here let me check it reflection method to

• 00:56:31 copy log errors refresh model

• 00:56:45 so we have update user method here this will be basically same

• 00:56:48 will be basically same methodology

• 00:56:58 i think i will edit here but i will use reflection to copy all values

• 00:57:15 let's say update at new task

• 00:57:18 at new task it will take what it is going to take is

• 00:57:22 it will take what it is going to take is let's close this what it is going to

• 00:57:25 let's close this what it is going to take is today list item

• 00:57:34 new task and it will select from tv a to-do list

• 00:57:39 it will select from tv a to-do list [Music]

• 00:57:48 id okay if it is not equal to null then we will copy all the

• 00:57:52 equal to null then we will copy all the values

• 00:57:54 values and how we gonna do that

• 00:58:01 easily copy all items of class with

• 00:58:37 okay so it is here we will use generics you see this is the

• 00:58:39 we will use generics you see this is the generic class

• 00:58:41 generic class generic clone it just serialize object

• 00:58:44 generic clone it just serialize object and then return the serialized object

• 00:58:48 and then return the serialized object and if it is not null what we are going

• 00:58:51 and if it is not null what we are going to do is basically

• 00:58:58 um vr user will be equal to new task

• 00:59:03 to new task clone okay come on is not

• 00:59:08 clone okay come on is not available

• 00:59:19 check it out yeah it will be like this extension

• 00:59:33 the serialized object yeah so

• 00:59:36 yeah so clone and the cloning type will be

• 00:59:46 material to do list like this otherwise it will just edit

• 00:59:50 otherwise it will just edit uh edit as a new task and we will call

• 00:59:53 uh edit as a new task and we will call save changes okay so basically we will

• 00:59:57 save changes okay so basically we will clone

• 00:59:58 clone this object into this

• 01:00:05 and therefore it should update the changes

• 01:00:06 changes i'm not sure what i'm expecting it to do

• 01:00:15 basically then we will call it here global methods dot update or donate

• 01:00:18 global methods dot update or donate new task it will be

• 01:00:21 new task it will be taken from here okay let's see what

• 01:00:25 taken from here okay let's see what happens now

• 01:00:40 so if that id exists we will update it if it doesn't exist uh we will

• 01:00:51 edit and we are using cloning method to not set them one by one

• 01:00:54 to not set them one by one you see in our previous lecture we did

• 01:00:57 you see in our previous lecture we did set each value like this however now i

• 01:01:01 set each value like this however now i am using clone

• 01:01:03 am using clone which should automatically set all of

• 01:01:05 which should automatically set all of the values

• 01:01:07 the values okay test two and

• 01:01:12 okay test two and yeah we have an address what is the

• 01:01:15 yeah we have an address what is the error cannot insert knowledge column

• 01:01:16 error cannot insert knowledge column title

• 01:01:30 sent as null and why

• 01:01:40 let's see why maybe our casting didn't work

• 01:02:11 okay test2 and let's see if the data is here okay the

• 01:02:13 let's see if the data is here okay the data is not

• 01:02:14 data is not here

• 01:02:23 yeah currently title is not set you see there are two titles one of them

• 01:02:26 you see there are two titles one of them is from the

• 01:02:27 is from the base class and the other one is from the

• 01:02:31 base class and the other one is from the other class but it is

• 01:02:34 other class but it is not binded

• 01:02:46 okay name is new to the task title and from our model

• 01:03:22 okay maybe it is because we are setting a value here maybe i need to change it

• 01:03:30 a value here maybe i need to change it but it doesn't make sense it should work

• 01:03:33 but it doesn't make sense it should work like this

• 01:03:35 like this let's see

• 01:03:43 lecture 13 car name and here's this from lecture nine model studio item

• 01:03:52 mode lecture 14 needs to do task yeah this is the class

• 01:03:53 this is the class and this is the object

• 01:03:59 and this is the object this is the method that are we using

• 01:04:03 this is the method that are we using everything is looking correct

• 01:04:07 everything is looking correct but when we post batch

• 01:04:12 but when we post batch we have a problem

• 01:04:25 we have a problem and we need to find what is the problem

• 01:04:43 maybe it is because the base class is uh base title is hidden

• 01:04:46 uh base title is hidden it shouldn't be that way but i am not

• 01:04:48 it shouldn't be that way but i am not sure

• 01:04:50 sure we have a to-do item here need to do

• 01:04:52 we have a to-do item here need to do tasks

• 01:04:54 tasks we have a title

• 01:05:05 it is looking like a correct name is new to the task title

• 01:05:09 to the task title id is this one

• 01:05:22 id is this one but the title information is not

• 01:06:05 okay this is the mod which is using

• 01:06:09 this is the mod which is using title is here

• 01:06:18 title is here let's try something else

• 01:06:27 okay let me check it oh maybe i know the reason yeah because

• 01:06:30 oh maybe i know the reason yeah because it is not

• 01:06:31 it is not set and yet

• 01:06:38 okay let me show you why it is not working so this one will probe

• 01:06:41 working so this one will probe uh to the item need to do task

• 01:06:44 uh to the item need to do task get and unset it will be

• 01:06:49 get and unset it will be something like this

• 01:07:19 but it will be not initialized there i have i also need to utilize it

• 01:07:21 have i also need to utilize it but it won't work either i need to have

• 01:07:24 but it won't work either i need to have a constructor for

• 01:07:26 a constructor for lecture 14 like this

• 01:07:30 lecture 14 like this and i need to initialize it like this

• 01:07:34 and i need to initialize it like this yeah now it will work this is

• 01:07:37 yeah now it will work this is now gettable and settable

• 01:07:47 you see get and set makes a lot of difference

• 01:07:49 difference when working with model binding

• 01:08:21 okay test two now i am pretty sure it will be here

• 01:08:23 will be here yeah you see now it is returned into a

• 01:08:26 yeah you see now it is returned into a property it was

• 01:08:28 property it was a field before now i can see title

• 01:08:32 a field before now i can see title and okay another requirement see in the

• 01:08:34 and okay another requirement see in the exception it says that cannot insert

• 01:08:36 exception it says that cannot insert null into column

• 01:08:38 null into column value and

• 01:08:41 value and why

• 01:08:54 therefore this is working okay it says that it cannot insert

• 01:08:57 okay it says that it cannot insert no title or

• 01:09:04 so this new task is still from

• 01:09:20 it is not from the base class you see there are two title and

• 01:09:41 yeah the original title is hidden so this is not

• 01:09:42 this is not also a type of

• 01:09:46 also a type of okay you see this is type of to-do item

• 01:09:48 okay you see this is type of to-do item it is not from

• 01:09:50 it is not from tbr to do list type so when we are

• 01:09:54 tbr to do list type so when we are calling this method

• 01:09:56 calling this method let's find it we need to explicitly

• 01:10:00 let's find it we need to explicitly convert it

• 01:11:09 yeah yeah i think we can use as operators so

• 01:11:13 operators so this will be us like this

• 01:11:55 but i i am hoping that it will work okay so this is still prone to the item

• 01:11:58 okay so this is still prone to the item type

• 01:12:05 it is not the type that we are looking for

• 01:12:05 for you see think a new variable is causing

• 01:12:09 you see think a new variable is causing a lot of problems so

• 01:12:12 a lot of problems so we need to add an extension

• 01:12:15 we need to add an extension to our custom class

• 01:12:19 to our custom class such as that

• 01:12:23 such as that how to do it

• 01:12:36 how to do it i think i have an idea

• 01:12:45 let's add a method here as public fix title

• 01:12:50 fix title public voice by the way

• 01:12:57 and it will set um base dot title equal to this that title here

• 01:13:03 dot title equal to this that title here and now

• 01:13:19 fixed title yes um new task by the way nick's ask is not

• 01:13:23 um new task by the way nick's ask is not from

• 01:13:24 from base class here therefore before we

• 01:13:46 like here what you need to do space title

• 01:13:50 what you need to do space title okay now let's see

• 01:14:20 okay now test two yeah it did work we have no error the url

• 01:14:23 it did work we have no error the url change it

• 01:14:25 change it and notice so now we can we should be

• 01:14:27 and notice so now we can we should be able to update test2 because

• 01:14:29 able to update test2 because currently its uh id

• 01:14:32 currently its uh id should be set as true to let's see

• 01:14:36 should be set as true to let's see no it is set as zero still

• 01:14:39 no it is set as zero still so i didn't know that so test three

• 01:14:43 so i didn't know that so test three let's check it out yeah it has three is

• 01:14:45 let's check it out yeah it has three is here as well

• 01:14:48 here as well okay currently we are able to

• 01:14:51 okay currently we are able to [Music]

• 01:14:52 [Music] add new values but we are currently not

• 01:14:55 add new values but we are currently not able to update them

• 01:14:56 able to update them and we will also code that

• 01:15:00 and we will also code that pause here

• 01:15:08 okay now that we can say we can continue okay so

• 01:15:15 since our web app only has one wave there's no need for reasonable layout

• 01:15:24 okay yeah and now there is a for each loop to print what is on the screen

• 01:15:28 to print what is on the screen what's on the database uh to the screen

• 01:15:32 what's on the database uh to the screen so it will be here it user for each and

• 01:15:36 so it will be here it user for each and our model has

• 01:15:39 our model has this one as items and here

• 01:15:44 this one as items and here we will have item that is done

• 01:15:54 okay and yeah it should work and then we have

• 01:15:57 and then we have item dot id

• 01:16:01 item dot id title yeah

• 01:16:04 title yeah and date okay so what does this do

• 01:16:08 and date okay so what does this do is you see it has a on click window

• 01:16:11 is you see it has a on click window location here

• 01:16:13 location here uh this is the javascript uh

• 01:16:17 uh this is the javascript uh method and when we click on this

• 01:16:19 method and when we click on this checkbox

• 01:16:21 checkbox it will redirect page to

• 01:16:27 it will redirect page to home toggle is done by the way

• 01:16:35 we have this as a root url right now but i will add another path

• 01:16:39 but i will add another path um to redirect so

• 01:16:43 um to redirect so let's make it as

• 01:16:48 let's make it as okay um is done yeah

• 01:17:14 we are also going to take a parameter um

• 01:17:22 so let's also put that optional parameter as

• 01:17:39 mandatory and yeah it will provide it like this

• 01:17:43 yeah it will provide it like this okay

• 01:17:49 and then there is a checkbox so for the checkbox we are going to have

• 01:17:52 checkbox we are going to have home edit uh location

• 01:17:56 home edit uh location and this will open a new weave

• 01:18:01 and this will open a new weave to update it

• 01:18:05 to update it okay so

• 01:18:12 for updates let's see what can we do we will use

• 01:18:14 let's see what can we do we will use this in the update

• 01:18:16 this in the update and basically home edit will

• 01:18:20 and basically home edit will uh load this

• 01:18:24 uh load this with their methods

• 01:18:32 what i mean that i will show in a moment or let's say change

• 01:18:36 or let's say change task status so this will

• 01:18:39 task status so this will take an integer id task id

• 01:18:44 take an integer id task id and we won't have a model here

• 01:18:49 and we won't have a model here so it will be integers therefore

• 01:18:52 so it will be integers therefore what we are going to do is

• 01:18:59 basically we will find uh the item as

• 01:19:07 okay task item is going will be equal to my context

• 01:19:09 my context uh tbr to-do list

• 01:19:13 uh tbr to-do list and then we will have find so the fine

• 01:19:16 and then we will have find so the fine take

• 01:19:17 take here is values

• 01:19:24 and it is taking area of object so maybe we can just provide like

• 01:19:28 object so maybe we can just provide like this

• 01:19:30 this then i will get

• 01:19:48 okay so if not found it for the return null if

• 01:19:49 null if we are task item not equal to

• 01:19:53 we are task item not equal to null okay we will change

• 01:19:56 null okay we will change is done as um

• 01:20:00 is done as um opposite of is done

• 01:20:04 opposite of is done like this and then we will save the

• 01:20:07 like this and then we will save the changes

• 01:20:09 changes i think this will become at rocket item

• 01:20:12 i think this will become at rocket item therefore

• 01:20:13 therefore i can just click save changes

• 01:20:16 i can just click save changes and it should be done okay and then

• 01:20:20 and it should be done okay and then we will return index field nothing else

• 01:20:25 we will return index field nothing else but if you want to list items on the

• 01:20:29 but if you want to list items on the screen

• 01:20:30 screen then i need to initialize model and

• 01:20:33 then i need to initialize model and return it

• 01:20:35 return it therefore

• 01:20:43 what i am going to do is i will have a private method here private

• 01:20:53 lecture 14 okay model to returning okay init model

• 01:21:01 you see lecture 14 is being a little with

• 01:21:01 with another good name for model

• 01:21:04 another good name for model uh so it would be better to change its

• 01:21:07 uh so it would be better to change its name but

• 01:21:09 name but it will take a lot of places to be

• 01:21:11 it will take a lot of places to be changed right now

• 01:21:17 so i will just keep it but you shouldn't give a model name like this

• 01:21:20 give a model name like this um so this will return

• 01:21:23 um so this will return a model and basically what it is going

• 01:21:26 a model and basically what it is going to do

• 01:21:27 to do is it will

• 01:21:30 is it will return my model like this

• 01:21:34 return my model like this and we will have lecture 14 model

• 01:21:39 and we will have lecture 14 model equal to in its model

• 01:21:56 guess model again like this

• 01:22:03 let's see here and we will return it okay i think it should work but

• 01:22:07 okay i think it should work but since this is a different url

• 01:22:10 since this is a different url i think the url of the page will change

• 01:22:20 if i want to not change the url i have to make a redirect

• 01:22:25 the url i have to make a redirect so perhaps a better approach would be

• 01:22:29 so perhaps a better approach would be making a redirect to the index page

• 01:22:36 okay we have done that in the previous lectures so

• 01:23:06 yeah we have redirected action so it will redirect to action index

• 01:23:10 so it will redirect to action index and let's see the behaviors

• 01:23:13 and let's see the behaviors behave of the application

• 01:23:17 behave of the application expo here's

• 01:23:21 expo here's i will do it like this

• 01:23:29 okay so this will be our paths lecture 14 is done task id

• 01:23:32 14 is done task id let's open our index here

• 01:23:35 let's open our index here so we will have a checkbox and yeah

• 01:23:39 so we will have a checkbox and yeah let's uh first test uh

• 01:23:42 let's uh first test uh the checkbox and whether it is working

• 01:23:44 the checkbox and whether it is working or not

• 01:23:50 so currently all of my items are is done is zero pulse which means

• 01:24:25 okay it says that we have two road name yeah we didn't change the road name

• 01:24:27 yeah we didn't change the road name therefore we have an error

• 01:24:30 therefore we have an error okay let's say change

• 01:24:33 okay let's say change is done

• 01:24:38 you see at runtime it is checking the road names

• 01:24:39 road names and draws an error

• 01:25:09 okay so here's our listed items when i check box it will

• 01:25:14 listed items when i check box it will become check it and let's see yes when i

• 01:25:17 become check it and let's see yes when i check it you see it is doing a redirect

• 01:25:20 check it you see it is doing a redirect and yeah it is working as

• 01:25:23 and yeah it is working as expected let's see what happens in the

• 01:25:26 expected let's see what happens in the network

• 01:25:34 so currently uh 101 i will change this one

• 01:25:36 one so it it went back which is done url

• 01:25:40 so it it went back which is done url like this

• 01:25:42 like this then what is the response

• 01:25:51 i think the response we got is directly like this so

• 01:25:52 like this so no visible redirection

• 01:26:06 why i can see the response here let's also check from the

• 01:26:12 [Music] internet explorer

• 01:26:19 actually this is now named as h okay so um

• 01:26:22 okay so um [Music]

• 01:26:24 [Music] also network okay when i check it

• 01:26:27 also network okay when i check it like this it requests this and responds

• 01:26:33 like this it requests this and responds yeah so the response headers have

• 01:26:35 yeah so the response headers have location like this

• 01:26:38 location like this and the status code is

• 01:26:42 and the status code is okay three zero two three zero two is

• 01:26:46 okay three zero two three zero two is i think redirection

• 01:26:51 i think redirection okay http codes

• 01:26:57 yeah it means that found redirects the tattoos

• 01:26:58 tattoos so basically it is returning a

• 01:27:02 so basically it is returning a redirection to the index page after

• 01:27:04 redirection to the index page after going to

• 01:27:05 going to this url okay

• 01:27:08 this url okay and it is getting updated like this so

• 01:27:10 and it is getting updated like this so the user doesn't notice anything

• 01:27:12 the user doesn't notice anything uh it does a full post page and full

• 01:27:16 uh it does a full post page and full reload currently it is not is

• 01:27:18 reload currently it is not is asynchronous

• 01:27:20 asynchronous however it is working and then

• 01:27:27 let's continue so we are riding items like this

• 01:27:29 like this i think

• 01:27:32 i think okay um it composes

• 01:27:36 okay um it composes a tr but we don't have a beginning of

• 01:27:39 a tr but we don't have a beginning of the table therefore we need to have

• 01:27:41 the table therefore we need to have table beginning

• 01:27:45 table beginning like this yeah

• 01:27:49 like this yeah and okay so the next thing is edit

• 01:27:53 and okay so the next thing is edit the edit will also load this page

• 01:28:01 however we also need to display some information

• 01:28:02 information uh when we are editing so

• 01:28:06 uh when we are editing so let's have an h1 like um this

• 01:28:10 let's have an h1 like um this okay so if

• 01:28:14 okay so if if need to do

• 01:28:17 if need to do task not need to do yeah i need to do

• 01:28:20 task not need to do yeah i need to do tasks

• 01:28:42 okay why it is not available okay that okay not working

• 01:28:47 okay that okay not working i think i need to use model parameters

• 01:28:52 i think i need to use model parameters more than that need to do test start

• 01:28:55 more than that need to do test start id is not equal 0

• 01:29:01 id is not equal 0 then i will type h1

• 01:29:04 then i will type h1 and in there i will type id okay task id

• 01:29:16 okay let's add a parenthesis like this so the task id

• 01:29:20 parenthesis like this so the task id will be

• 01:29:26 this like this and task description let's put it inside

• 01:29:30 and task description let's put it inside here task description

• 01:29:33 here task description [Music]

• 01:29:36 [Music] then be like

• 01:29:39 then be like this okay

• 01:29:44 this okay and then they can use

• 01:29:47 and then they can use this form to update

• 01:29:50 this form to update the task

• 01:29:57 so the value here will be changing according to our

• 01:30:01 according to our task value how can we make it change we

• 01:30:05 task value how can we make it change we can make it

• 01:30:06 can make it as let's see

• 01:30:21 okay model dot it has id equal to zero

• 01:30:25 it has id equal to zero then okay i think we can write something

• 01:30:29 then okay i think we can write something like this here

• 01:30:36 okay and like this i think it will work but i'm not sure so

• 01:30:38 i think it will work but i'm not sure so if it is zero

• 01:30:40 if it is zero add okay new task

• 01:30:43 add okay new task if it is not zero updates

• 01:30:46 if it is not zero updates selected task

• 01:30:51 selected task or update the update currently

• 01:30:55 or update the update currently displays task yeah okay and then we can

• 01:31:00 displays task yeah okay and then we can also

• 01:31:01 also type task status if we want with htac

• 01:31:09 you see the design is totally up to you but i am currently doing

• 01:31:12 but i am currently doing [Music]

• 01:31:19 something simple task is done status and here's

• 01:31:26 we'll get is done to string so it's going through or false

• 01:31:31 so it's going through or false okay so then will be this uh

• 01:31:35 okay so then will be this uh appear it will appear when we go to the

• 01:31:38 appear it will appear when we go to the lecture 14

• 01:31:39 lecture 14 edit

• 01:31:45 action so let's quote the edit action here

• 01:31:58 by the way when we redirect the action this time we need to keep an

• 01:32:01 this time we need to keep an existing model

• 01:32:11 let's see what can we do how can we do it

• 01:32:13 it i think we do it in

• 01:32:23 lecture 13 of extra 10 controllers yeah we have done it with temp data

• 01:32:40 okay but if stamp data was temp data for

• 01:32:44 but if stamp data was temp data for user specific or not

• 01:32:55 user specific or not okay you see

• 01:33:18 okay so it is user specific so we can definitely use it

• 01:33:21 definitely use it okay so basically in

• 01:33:24 okay so basically in this edit action

• 01:33:28 this edit action and a task

• 01:33:37 edit task like this edit task what we are going to do is

• 01:33:50 we will update the task and return back to that

• 01:33:50 to that page

• 01:33:55 so [Music]

• 01:33:58 [Music] let's see what to do

• 01:34:13 actually the task will return that item load and return that item so that it can

• 01:34:16 load and return that item so that it can be edited

• 01:34:23 so basically what it is going to do is we will define lecture 14

• 01:34:26 we will define lecture 14 model

• 01:34:38 and this will be not here we will find task item from task id like

• 01:34:42 we will find task item from task id like here

• 01:34:43 here if it is not null

• 01:34:51 we will assign my model that need to do task equal to

• 01:34:55 need to do task equal to task item by the way

• 01:34:58 task item by the way this is from to-do list and this is from

• 01:35:01 this is from to-do list and this is from to do task therefore

• 01:35:04 to do task therefore i need to use my

• 01:35:07 i need to use my [Music]

• 01:35:10 [Music] method overloading yes

• 01:35:14 method overloading yes yeah okay and then

• 01:35:17 yeah okay and then we will save that inside stamp data

• 01:35:35 i wonder if we can change the url when returning data range

• 01:35:42 returning data range actually it is fine to have changed url

• 01:35:45 actually it is fine to have changed url here why we why we are wasting our time

• 01:35:49 why we why we are wasting our time so we will return we with this new model

• 01:35:56 so we will return we with this new model yeah we can live and

• 01:36:00 yeah we can live and index and the model will be

• 01:36:04 index and the model will be this one okay let's

• 01:36:08 this one okay let's test it so the url will be to change it

• 01:36:11 test it so the url will be to change it but it is not a problem currently

• 01:36:20 okay this is edit oh we have a problem with naming

• 01:36:38 okay here it is now it should work

• 01:37:11 okay you see now they are better formatted so when i

• 01:37:13 formatted so when i click on them you see at the bottom of

• 01:37:16 click on them you see at the bottom of the browser there is lecture 14 edit

• 01:37:18 the browser there is lecture 14 edit task and when i click test 2 task id 5

• 01:37:22 and when i click test 2 task id 5 6 description status 2 task is down

• 01:37:24 6 description status 2 task is down status through

• 01:37:26 status through then i can enter a new task description

• 01:37:31 then i can enter a new task description and i can update currently display tasks

• 01:37:34 and i can update currently display tasks so

• 01:37:35 so this last test to a task

• 01:37:38 this last test to a task and when i click update and now

• 01:37:42 and when i click update and now it is updated you see

• 01:37:46 it is updated you see and it has returned in the updated task

• 01:37:49 and it has returned in the updated task and now i am able to see that and the

• 01:37:51 and now i am able to see that and the url is now

• 01:37:52 url is now update insert okay

• 01:38:03 so it is working as expected but normally you would have a navigation

• 01:38:05 but normally you would have a navigation therefore

• 01:38:07 therefore you would be able to return to the view

• 01:38:11 you would be able to return to the view and let's turn to the

• 01:38:14 and let's turn to the base

• 01:38:21 okay it was updated but oh the update looks like didn't work let's

• 01:38:23 the update looks like didn't work let's see why

• 01:38:43 so update in search it is taking models okay let's see why it didn't work

• 01:38:55 okay updated plus test2 and here the model has arrived

• 01:38:59 and here the model has arrived so we have new task id file

• 01:39:03 so we have new task id file iso updated test2

• 01:39:11 okay we did fix the title as new title yeah then we go to the

• 01:39:22 uh inside update task model so we here here we will check with

• 01:39:25 so we here here we will check with id

• 01:39:32 okay let's see we have id [Music]

• 01:39:33 [Music] and vr user is not known

• 01:39:40 and vr user is not known okay then we will overridden the

• 01:39:43 okay then we will overridden the values like this

• 01:39:47 values like this then we did save okay so why it is not

• 01:39:50 then we did save okay so why it is not save it

• 01:40:01 so our deep clone methodology didn't work for updates

• 01:40:20 maybe i need to add it to the news okay we will figure out figure it out

• 01:40:22 okay we will figure out figure it out but it is not working

• 01:40:25 but it is not working so we do a new clone and then

• 01:40:29 so we do a new clone and then we yeah it's something like this by the

• 01:40:32 we yeah it's something like this by the way this should be a name with and we

• 01:40:33 way this should be a name with and we are task not vr

• 01:40:36 are task not vr users

• 01:41:09 okay fight means python will give primary cables a connectivity between

• 01:41:11 primary cables a connectivity between probability but it should be integrated

• 01:41:12 probability but it should be integrated by context

• 01:41:17 okay now it is attached i'm being tracked

• 01:41:19 tracked and so it will just take the name task i

• 01:41:23 and so it will just take the name task i did

• 01:41:23 did find we don't need first or default

• 01:41:30 find we don't need first or default okay so i think now it will work but i'm

• 01:41:32 okay so i think now it will work but i'm not

• 01:41:33 not i'm still not sure

• 01:41:40 so let's let's try first let's add a new task and then

• 01:41:41 task and then try to update it

• 01:42:11 database handling classes frameworks libraries you are

• 01:42:13 classes frameworks libraries you are using

• 01:42:14 using uh it it changes how you handle the data

• 01:42:17 uh it it changes how you handle the data so let's add s4 as a new task

• 01:42:26 okay it is not found edit context save changes okay now

• 01:42:30 context save changes okay now task id seven description four yeah

• 01:42:33 task id seven description four yeah and return back

• 01:42:40 okay it is here when we click it it is here let's try

• 01:42:42 here let's try okay this was task 4

• 01:43:01 yeah and then we did save changes and let's check it out okay it didn't

• 01:43:03 and let's check it out okay it didn't say

• 01:43:05 say so when we do clone it is not getting

• 01:43:10 so when we do clone it is not getting updated back

• 01:43:18 so if we edit then it will tell us that it exists therefore we need to have

• 01:43:23 it exists therefore we need to have we need a way to copy all the values

• 01:43:26 we need a way to copy all the values attributes

• 01:43:35 [Music] so this is returning a new item

• 01:43:50 of a child class to a parent last matching attributes

• 01:44:18 so what is the proper way so we have parent child

• 01:44:35 option okay so it uses a public class property

• 01:44:37 okay so it uses a public class property copiers

• 01:44:48 it is a public class static class

• 01:44:51 public class static class [Music]

• 01:44:53 [Music] it it uses copy method

• 01:44:57 it it uses copy method which takes parent and child

• 01:45:01 which takes parent and child so this will be reference type because

• 01:45:03 so this will be reference type because they are restricted as

• 01:45:04 they are restricted as class here this is from

• 01:45:08 class here this is from uh generics it will take their

• 01:45:11 uh generics it will take their properties and if the property name and

• 01:45:13 properties and if the property name and type are matching

• 01:45:16 type are matching it will set value it will use set value

• 01:45:20 it will set value it will use set value so the set value is coming from

• 01:45:29 property info reflection okay so let's try that instead of the

• 01:45:32 okay so let's try that instead of the our method so

• 01:45:37 our method so in here instead of using clone

• 01:45:50 propriety copy that copy

• 01:45:58 so property copy is expecting our classes so the first one is

• 01:46:01 classes so the first one is parents so the parent class will be tbl

• 01:46:05 parents so the parent class will be tbl to-do list and the child class will be

• 01:46:08 to-do list and the child class will be to do

• 01:46:09 to do item and it will take

• 01:46:20 as we are tasked to parent

• 01:46:24 to parent and child will be new task

• 01:46:27 and child will be new task by the way i will make this to the lay

• 01:46:29 by the way i will make this to the lay item

• 01:46:31 item so let's also find where we have we are

• 01:46:34 so let's also find where we have we are calling it

• 01:46:36 calling it oh no no it can remain like that so new

• 01:46:40 oh no no it can remain like that so new task

• 01:46:47 and we have to do a casting like this

• 01:46:59 okay let's try this way and see if this is working or not

• 01:47:10 you see i can manually set uh each attribute myself as well but i'm

• 01:47:13 uh each attribute myself as well but i'm trying a more generic version

• 01:47:16 trying a more generic version so if i add more attributes to my class

• 01:47:18 so if i add more attributes to my class in future

• 01:47:20 in future i won't spend time uh

• 01:47:23 i won't spend time uh to add them as well to this method

• 01:47:26 to add them as well to this method this is the more generic approach more

• 01:47:29 this is the more generic approach more generalized approach which is much

• 01:47:31 generalized approach which is much better

• 01:47:33 better test 44 let's try

• 01:47:37 test 44 let's try so you see we are task has test 4 and

• 01:47:40 so you see we are task has test 4 and new task has 44

• 01:47:44 new task has 44 when we copy all properties uh now we

• 01:47:48 when we copy all properties uh now we are

• 01:47:48 are okay it didn't work

• 01:48:06 so parents or here's part properties id chat properties same

• 01:48:10 id chat properties same and then chart properties if they're

• 01:48:14 and then chart properties if they're equal id id

• 01:48:23 let's get here okay properties id pet date

• 01:48:27 okay properties id pet date title yeah so child property set by your

• 01:48:31 title yeah so child property set by your child

• 01:48:32 child is 44

• 01:48:55 and so the proper child property what is that

• 01:48:56 that it is title yeah so it should set

• 01:49:00 it is title yeah so it should set earlier

• 01:49:06 like this okay title is set to 44

• 01:49:10 is set to 44 in the child's

• 01:49:29 so it will set value of parent to the child in this method

• 01:49:40 so we will change it as copy child to parents current

• 01:49:43 child to parents current and we will change the order as

• 01:49:47 and we will change the order as like this okay copy child to parents

• 01:49:54 like this okay copy child to parents oh it should work yeah

• 01:50:00 so the order was opposite and i have modified it according to our application

• 01:50:35 okay after copying oh object does not match

• 01:50:52 because it is using child's property i have to use part

• 01:50:53 have to use part property for this to work

• 01:50:57 property for this to work let's restart and try again

• 01:51:35 okay and after we copy

• 01:51:38 and after we copy yeah now the title is set and after we

• 01:51:41 yeah now the title is set and after we saved okay an error could go up then

• 01:51:45 saved okay an error could go up then we're going to see

• 01:51:46 we're going to see the exception

• 01:51:59 why the date is set like this and

• 01:52:04 set like this and that is the problematic thing because

• 01:52:07 that is the problematic thing because the date is coming

• 01:52:09 the date is coming incorrect from here

• 01:52:28 okay why we are having a date problem

• 01:52:45 i think let's try to debug from here so in our model the date is set

• 01:52:51 so in our model the date is set correct so i need to

• 01:52:56 correct so i need to stand back other data as well

• 01:53:09 so in here when i do update i only send back

• 01:53:10 back uh the id as hidden i also need to send

• 01:53:14 uh the id as hidden i also need to send back

• 01:53:15 back date as well otherwise it will be

• 01:53:19 date as well otherwise it will be changed

• 01:53:37 and if i add a new value i also need to modify this method which i don't want

• 01:53:54 i think in update new task method

• 01:54:10 yeah so this will copy all parameters instead of that we can just copy title

• 01:54:15 instead of that we can just copy title we have returned back to our

• 01:54:23 beginning okay this uh blue method

• 01:54:26 okay this uh blue method copies all attributes

• 01:54:31 copies all attributes so if you use this

• 01:54:34 so if you use this approach you have to

• 01:54:45 post fake all attributes of item in a hidden

• 01:54:49 of item in a hidden so i will keep this method

• 01:54:53 so i will keep this method to make it work so to be able to make it

• 01:54:57 to make it work so to be able to make it work we need to post back

• 01:55:06 dates and you also need to pause with by the way

• 01:55:07 the way since this will be a hidden we don't

• 01:55:10 since this will be a hidden we don't need any of this

• 01:55:13 need any of this and this

• 01:55:19 and we also need to prospect ease boolean

• 01:55:26 like this and now it will work alternatively i could only set

• 01:55:34 um i could only set the title of the item

• 01:55:36 item and i wouldn't be in need to

• 01:55:39 and i wouldn't be in need to postpone attributes

• 01:55:42 postpone attributes so this approach is not good right now

• 01:55:45 so this approach is not good right now for our

• 01:55:53 application but in order to show you that it is working

• 01:55:56 that it is working i will make an example like this

• 01:56:05 okay okay now updated let's check database

• 01:56:13 so alternatively we could also do something like this let me show you

• 01:56:33 this below from post-face all of the attributes of model

• 01:56:37 attributes of model to update in database

• 01:56:48 and let's add another method to only update title

• 01:56:57 or space only title and id to update in database so this time we will

• 01:57:01 in database so this time we will call task version 2

• 01:57:04 call task version 2 we don't need this anymore

• 01:57:12 and let's go to task version 2 as well in our controller

• 01:57:24 which is here okay version two version two

• 01:57:28 okay version two version two version two and it will use

• 01:57:32 version two and it will use add update task version two

• 01:57:57 the title equal to a new task that title yeah that's it and nothing else

• 01:58:05 okay you can use both ways but they have their

• 01:58:17 when we run now we should both they should work

• 01:58:32 we should also able to see hidden attributes

• 01:58:49 okay so it displays add tasks right now and add tasks they are same but now it

• 01:58:53 and add tasks they are same but now it is like

• 01:58:54 is like uh update currently uh display task

• 01:58:59 uh update currently uh display task and in the second method we have only

• 01:59:01 and in the second method we have only one hidden value

• 01:59:02 one hidden value and in the first approach we will have

• 01:59:05 and in the first approach we will have all

• 01:59:06 all attributes as hidden here

• 01:59:10 attributes as hidden here you see the value of datetime here only

• 01:59:14 you see the value of datetime here only is done here so let's try this

• 01:59:17 is done here so let's try this [Music]

• 01:59:19 [Music] let's update it and yes it is updated

• 01:59:32 all right so now that we can abort save and now uh

• 01:59:36 abort save and now uh the delete uh item we will code that

• 01:59:41 the delete uh item we will code that and on delete we will ask

• 01:59:44 and on delete we will ask for validation

• 01:59:47 for validation to are you sure

• 01:59:50 to are you sure so here let's see

• 02:00:00 okay here the delete by the way for checkbox we are using this on click

• 02:00:02 for checkbox we are using this on click javascript function

• 02:00:04 javascript function and for delete we will use return

• 02:00:06 and for delete we will use return confirm

• 02:00:07 confirm javascript function

• 02:00:14 for deleting let's also compose a delete method it also takes item id

• 02:00:18 a delete method it also takes item id simply

• 02:00:27 okay in lecture 14 controllers we will simply use

• 02:00:30 we will simply use delete

• 02:00:46 okay delete and task id task

• 02:00:51 task id task okay let's say it has three tasks by the

• 02:00:53 okay let's say it has three tasks by the way these

• 02:00:54 way these two doesn't have to be same so don't get

• 02:00:56 two doesn't have to be same so don't get confused

• 02:00:58 confused so if it is not null um

• 02:01:01 so if it is not null um [Music]

• 02:01:02 [Music] how we gonna delete maybe this

• 02:01:06 how we gonna delete maybe this have delete okay there is remove

• 02:01:11 have delete okay there is remove so the remove takes entity yeah

• 02:01:24 it will be like this and we will say say changes

• 02:01:30 and then we can redirect to index page like this

• 02:01:36 redirect to index page like this okay let's see

• 02:01:43 by the way this is still fully uh synchronous

• 02:01:45 synchronous and i will also i am planning to also

• 02:01:48 and i will also i am planning to also show you how to

• 02:01:51 show you how to code them as asynchronous with jquery

• 02:02:18 show how to do a custom authentication system i will also show you that how can

• 02:02:21 system i will also show you that how can you make a custom

• 02:02:23 you make a custom login system authentication system so

• 02:02:25 login system authentication system so let's try delete so it says

• 02:02:27 let's try delete so it says are you sure by the way we can add more

• 02:02:29 are you sure by the way we can add more information regarding to that

• 02:02:32 information regarding to that how can we do it we can do it as are you

• 02:02:35 how can we do it we can do it as are you sure

• 02:02:36 sure to delete

• 02:02:44 item description let's edit so here we will add item dot

• 02:02:48 so here we will add item dot title

• 02:02:55 and we can also add a quotation mark like this with escape characters

• 02:03:07 okay our escape character didn't work well maybe

• 02:03:08 well maybe double characters oh

• 02:03:14 double characters oh anyway we don't need that

• 02:03:22 okay are you sure to delete okay title

• 02:03:34 yeah interesting autocomplete is not working

• 02:03:43 okay by the way this may also break your uh alert message if

• 02:03:46 also break your uh alert message if title has

• 02:03:48 title has some uh incorrect

• 02:03:51 some uh incorrect characters i mean some characters that

• 02:03:54 characters i mean some characters that need to be encoded

• 02:03:56 need to be encoded so it may break your this delete

• 02:04:01 so it may break your this delete confirm message you have to be careful

• 02:04:03 confirm message you have to be careful with that

• 02:04:26 return confirm are you sure the message is not printed as we want

• 02:04:31 the message is not printed as we want this was supposed to be a single message

• 02:04:34 this was supposed to be a single message but it is

• 02:04:35 but it is not so

• 02:04:38 not so let's compose this as a sitting at

• 02:04:42 let's compose this as a sitting at somewhere

• 02:04:43 somewhere for example

• 02:05:30 how can we encode it we need to escape we need to escape with

• 02:05:31 we need to escape with escape characters okay there is html and

• 02:05:35 escape characters okay there is html and code

• 02:05:42 there is javascript and code http utility

• 02:05:56 yeah this looks like the case so it's message will be equal to

• 02:06:02 so it's message will be equal to http utility and code

• 02:06:10 okay so this is not existing in our library

• 02:06:15 in our library maybe we need to add it to our

• 02:06:18 maybe we need to add it to our references

• 02:06:45 maybe we need to add it to our weave import file

• 02:06:47 import file let's find it

• 02:07:11 okay so what namespace [Music]

• 02:07:40 oh let's try this so this can also work

• 02:07:43 so this can also work some web not urlcon

• 02:07:46 some web not urlcon and codeparts

• 02:07:49 and codeparts html and code maybe this this can work

• 02:08:04 oh just group encode is now here so basically it is inside system http

• 02:08:08 so basically it is inside system http utility and then

• 02:08:12 utility and then we will use this

• 02:08:15 we will use this as a confirm message okay let's try

• 02:08:19 as a confirm message okay let's try as this way

• 02:09:00 call from let message interesting oh i know the reason i know the reason

• 02:09:03 know the reason i know the reason uh because this is

• 02:09:06 uh because this is not parsed as a string now it will be

• 02:09:26 i may also be needed to use html and raw but

• 02:09:27 but let's test first

• 02:09:43 okay on click confirm are you sure to delete tests

• 02:09:45 delete tests when i click ok i think i know the

• 02:09:47 when i click ok i think i know the reason now

• 02:09:53 i also need to append this to the beginning and to the end

• 02:09:56 this to the beginning and to the end now i'm pretty sure it will work by the

• 02:10:00 now i'm pretty sure it will work by the way delete is working

• 02:10:01 way delete is working we are only not getting the javascript

• 02:10:09 method getting executed you see or they are all deleted

• 02:10:33 yes now asking you see are you sure to delete this one

• 02:10:34 delete this one okay let's also try some invalid

• 02:10:37 okay let's also try some invalid uh character having title such as

• 02:10:42 uh character having title such as such as some invalid charts

• 02:10:52 i wonder if this will work as a new task it is added now let's return back to the

• 02:10:57 it is added now let's return back to the root okay it is something like this as

• 02:11:01 root okay it is something like this as you see

• 02:11:03 you see and yeah yeah it is escaped

• 02:11:07 and yeah yeah it is escaped yeah it is working great it is working

• 02:11:11 yeah it is working great it is working and now i can delete it yes

• 02:11:14 and now i can delete it yes okay so let's take a note of what we

• 02:11:17 okay so let's take a note of what we have

• 02:11:18 have seen so far in this lecture

• 02:11:38 in lecture 14. okay so

• 02:11:44 um [Music]

• 02:11:47 [Music] okay um

• 02:11:52 okay um also okay let's say how to fully

• 02:11:55 also okay let's say how to fully push back the model to update

• 02:12:00 push back the model to update entity changes in the database

• 02:12:05 entity changes in the database also partying when i see how to

• 02:12:09 also partying when i see how to push back necessity

• 02:12:12 push back necessity or an entity to update

• 02:12:16 or an entity to update changes in the database

• 02:12:25 how to do database operations such as insert update

• 02:12:28 such as insert update delete select in

• 02:12:35 mss for database with using entity framework

• 02:12:46 in s dot net for five permission

• 02:12:49 five permission application

• 02:12:55 okay uh how to clone object uh values

• 02:13:00 object uh values or let's say how to how to do a deep

• 02:13:04 or let's say how to how to do a deep colon of an object with

• 02:13:07 colon of an object with object instance with

• 02:13:16 let's also note that json converts serialize

• 02:13:21 json converts serialize and deselect

• 02:13:24 and deselect object how to copy values

• 02:13:27 object how to copy values of all how to copy all

• 02:13:31 of all how to copy all values of all properties of an

• 02:13:35 values of all properties of an object instance

• 02:13:38 object instance into another object with

• 02:13:44 into another object with uh property copier customer

• 02:13:49 uh property copier customer was okay

• 02:13:58 what were these fields yeah it should work

• 02:13:59 work no if you make fields uh this wouldn't

• 02:14:01 no if you make fields uh this wouldn't work actually

• 02:14:03 work actually because this is you based on properties

• 02:14:06 because this is you based on properties so if you make fields it may not work

• 02:14:08 so if you make fields it may not work i'm not sure

• 02:14:09 i'm not sure so i won't write it and

• 02:14:41 scene in lecture 14. okay now uh we can start

• 02:14:45 okay now uh we can start working on making these as

• 02:14:48 working on making these as asynchronous okay with jquery currently

• 02:14:51 asynchronous okay with jquery currently whatever we do

• 02:14:52 whatever we do is all full of synchronous for example

• 02:14:56 is all full of synchronous for example example when i add task you see it is

• 02:15:00 example when i add task you see it is doing a full

• 02:15:00 doing a full prospect and full

• 02:15:04 prospect and full refresh you see it like this what i want

• 02:15:07 refresh you see it like this what i want to do

• 02:15:08 to do is i want to add and remove with um

• 02:15:17 jquery so i see that that mvcg created ajax okay

• 02:15:21 ajax okay let's find some examples related to that

• 02:16:00 work with html as well

• 02:16:09 i think we can work with partial waves if we use

• 02:16:42 we are iterating the model and printing it like this right

• 02:16:43 it like this right however if we do an ajax post

• 02:16:47 however if we do an ajax post we wouldn't be able to

• 02:16:50 we wouldn't be able to get this here so first

• 02:17:01 put this into a partial view and return that i think i will start

• 02:17:04 and return that i think i will start with another

• 02:17:05 with another uh

• 02:17:12 weave and controller for this task so let's add another index

• 02:17:16 so let's add another index as ajax

• 02:17:25 at lecture 14 ajax ajax index or let's call it as

• 02:17:29 ajax index or let's call it as yeah ajax is fine

• 02:17:38 and i'm also going to have methods for this ajax index

• 02:17:49 so in our controller lecture 14 um this is the default route

• 02:17:53 um this is the default route and it returns index by default

• 02:18:04 so what we need to do is we need to have ajax index here

• 02:18:11 we need to have ajax index here and inside ajax index we will call ajax

• 02:18:14 and inside ajax index we will call ajax index

• 02:18:16 index and we need to also set a root for this

• 02:18:20 and we need to also set a root for this so root it will a lot

• 02:18:23 so root it will a lot like uh lecture 14 ajax here

• 02:18:32 and in ajax index let's open it

• 02:18:39 let's open it okay we will use partial view to

• 02:18:42 okay we will use partial view to parse it so

• 02:19:12 for the partial view we will require our model

• 02:19:14 model therefore we need to provide our model

• 02:19:18 therefore we need to provide our model inside partial view

• 02:19:35 okay so let's add a partial view actually instead of partial use we can

• 02:19:37 actually instead of partial use we can use

• 02:20:52 difference between introduction and [Music]

• 02:21:09 okay partially result employee partial leave

• 02:21:10 leave employee

• 02:22:56 this is a pretty old article i think i will use this

• 02:23:20 yeah i think i will give full path or not getting completed

• 02:23:22 not getting completed so ins here we are going to have a

• 02:23:24 so ins here we are going to have a default view

• 02:23:26 default view there is no defining as partial and i

• 02:23:28 there is no defining as partial and i will name it as

• 02:23:30 will name it as lists

• 02:23:33 lists items or let's say list

• 02:23:35 items or let's say list [Music]

• 02:23:37 [Music] task items

• 02:23:47 okay and okay in here we will call

• 02:23:51 okay in here we will call radiator parcel asynchronous it will be

• 02:23:53 radiator parcel asynchronous it will be under leaves

• 02:23:55 under leaves picture 14

• 02:23:58 picture 14 and let's also name it as it's

• 02:24:03 and let's also name it as it's regular conversion like this

• 02:24:14 okay and in here we will get model

• 02:24:29 picture nine model start lecture 14 and

• 02:24:40 okay that is our regular page which is here i will move this

• 02:24:44 which is here i will move this to this item

• 02:24:48 to this item and i will call it

• 02:24:53 and i will call it in our regular page as well as a partial

• 02:24:56 in our regular page as well as a partial view

• 02:25:02 okay so i will be able to use it both in ajax

• 02:25:05 i will be able to use it both in ajax and here

• 02:25:06 and here and i also need to provide the model as

• 02:25:21 okay and yeah so let's first try whether it is

• 02:25:24 yeah so let's first try whether it is being

• 02:25:25 being printed on our regular root page or not

• 02:25:29 printed on our regular root page or not then we can move to the

• 02:25:30 then we can move to the asynchronous operations

• 02:25:50 you see that partial wave is not dependent on the controller

• 02:25:53 dependent on the controller it just takes model and then we can

• 02:25:58 it just takes model and then we can use it as we want

• 02:26:04 okay we have an error let's check our errors

• 02:26:14 tbl low error locks and in here's

• 02:26:17 and in here's what is our error oh it is not

• 02:26:21 what is our error oh it is not located here

• 02:26:29 oh it is logos here yeah this is the partial leave and message

• 02:26:33 partial leave and message so it says that it is not found

• 02:26:37 so it says that it is not found we use lecture ah i see

• 02:26:45 uh we have given incorrect folder name yeah lecture 14.

• 02:26:48 yeah lecture 14. that's restart you see logging errors is

• 02:26:51 that's restart you see logging errors is extremely

• 02:26:53 extremely convenient and efficient uh with

• 02:26:56 convenient and efficient uh with from the errors i just look at which

• 02:26:58 from the errors i just look at which error is new and

• 02:27:00 error is new and i have found a reason without

• 02:27:04 i have found a reason without debugging we have

• 02:27:07 debugging we have coded this error logging system in our

• 02:27:09 coded this error logging system in our previous lectures

• 02:27:11 previous lectures if you wonder that

• 02:27:17 if you wonder that okay we still have an error let's see

• 02:27:29 okay so where is that partial asynchronous

• 02:27:30 asynchronous object model

• 02:27:43 it says that it wasn't found interesting oh we also call this we have fix it

• 02:27:46 oh we also call this we have fix it in correct ways we need to fix actually

• 02:27:50 in correct ways we need to fix actually lecture 14 english html first

• 02:27:53 lecture 14 english html first yeah sorry about that

• 02:27:59 yeah sorry about that let's also delete existing logs

• 02:28:10 okay and let's see if any new error cost or not

• 02:28:31 okay so it is uh very well working let's add some test one

• 02:28:36 working let's add some test one and new task okay it is added

• 02:28:39 and new task okay it is added let's return back yeah working okay so

• 02:28:43 let's return back yeah working okay so let's also test

• 02:28:44 let's also test our new ajax page

• 02:28:48 our new ajax page which is lecture 14

• 02:28:51 which is lecture 14 ajax let's add to the bookmark so we can

• 02:28:54 ajax let's add to the bookmark so we can quickly access it

• 02:28:56 quickly access it and yeah it is also as you see it is

• 02:28:59 and yeah it is also as you see it is also

• 02:29:00 also printed and what am i going to do

• 02:29:04 printed and what am i going to do is i am going to add

• 02:29:07 is i am going to add a form method that will add a new task

• 02:29:11 a form method that will add a new task but with ajax script

• 02:29:14 but with ajax script okay uh so i started mvc4

• 02:29:18 okay uh so i started mvc4 into ajax

• 02:29:24 okay so let's see if there is an easier game

• 02:29:34 so we have using ajax begin for new ajax options

• 02:29:48 okay so it is using ajax speaking for

• 02:29:51 ajax speaking for new address options update target id

• 02:30:20 this example is further incomplete but i think i have an idea what is it

• 02:30:24 but i think i have an idea what is it about

• 02:30:33 okay let's see so there is ajax begin form

• 02:30:37 so there is ajax begin form and then we write our regular formula

• 02:30:39 and then we write our regular formula very nice

• 02:30:41 very nice it turns that into ajax i think

• 02:31:31 and that's this from the top to get more idea

• 02:31:32 idea this is a pretty recent article

• 02:31:41 razer view engine offers many ui controls which eases the processing of

• 02:31:43 controls which eases the processing of many ui components when using an

• 02:31:45 many ui components when using an integration with the server side

• 02:31:48 integration with the server side ajax form control is one of many ui

• 02:31:50 ajax form control is one of many ui controls

• 02:31:51 controls which is being offered by razer view

• 02:31:53 which is being offered by razer view engine

• 02:31:55 engine today i shall be demonstrating the usage

• 02:31:57 today i shall be demonstrating the usage of razer view engine control ie ajax

• 02:31:59 of razer view engine control ie ajax form control with asp.net mvc5 platform

• 02:32:04 form control with asp.net mvc5 platform following are some prerequisites before

• 02:32:06 following are some prerequisites before you proceed further in this tutorial we

• 02:32:09 you proceed further in this tutorial we already have them

• 02:32:16 you can download okay we don't need that so there's layout file which we don't

• 02:32:19 so there's layout file which we don't need

• 02:32:21 need we have our scripts before

• 02:32:24 we have our scripts before we need jquery and obtrusive attacks

• 02:32:28 we need jquery and obtrusive attacks library

• 02:32:35 into our project and we need to edit references

• 02:32:43 like here registers bundle okay there are a lot of

• 02:32:49 bundle okay there are a lot of things here

• 02:33:06 i'm ready to participate so this is our controllers yeah there is nothing

• 02:33:09 controllers yeah there is nothing fancy here so let's install this

• 02:33:13 fancy here so let's install this and edit to the bundle thing inside our

• 02:33:20 bundle how we're going to do that is

• 02:33:29 so bundle means it will turn that into a bundle then we can

• 02:33:30 bundle then we can link it in our vegan portal beer

• 02:33:34 link it in our vegan portal beer i think let's see

• 02:33:35 i think let's see [Music]

• 02:33:38 [Music] where did they do it

• 02:33:49 okay so what is the name it is jquery odd

• 02:33:50 odd obtrusive on altruism yeah

• 02:33:54 obtrusive on altruism yeah let's add that to our project

• 02:34:01 we can also write [Music]

• 02:34:13 api and use that as a

• 02:34:17 use that as a prospect and read values

• 02:34:20 prospect and read values but you can also use ajax as well

• 02:34:30 but you can also use ajax as well i mean web service maybe we should

• 02:34:34 i mean web service maybe we should use the web service for or

• 02:34:41 use the classical form i think i will use the easy one

• 02:34:50 so let's add a jquery on altruism

• 02:34:55 okay it is here in close object with automatic ajax

• 02:34:58 automatic ajax let's edit and which dependencies it

• 02:35:00 let's edit and which dependencies it will add

• 02:35:07 so it has added an after the jquery 1 8 0

• 02:35:27 okay and we need to bundle them

• 02:35:58 let's open the folders we have

• 02:36:08 we have for parties control no

• 02:36:22 inside of double roots perhaps this is what we use

• 02:36:59 basically this is just a ajax begin form i wonder if this is directly past valid

• 02:37:04 i wonder if this is directly past valid in our application

• 02:37:33 okay it says it is not existing so i will find this

• 02:37:35 will find this as a static and and then edit

• 02:37:38 as a static and and then edit instead of installing a nuget package

• 02:37:52 you see here it is adding the edge bundles

• 02:37:54 bundles but instead of bundling i will just

• 02:38:02 and it's as a cdn let's find it it's syrian

• 02:38:06 let's find it it's syrian what is it is

• 02:38:16 okay so you see jquery ajax and opt on optrusive and there is the cdn

• 02:38:21 on optrusive and there is the cdn link let's link it and add it to the rv

• 02:38:26 link let's link it and add it to the rv start file here

• 02:38:31 start file here okay so i will edit out the jquery

• 02:38:42 src okay and then

• 02:38:55 okay ajax begin form is still not available

• 02:39:15 we need to add reference i did add that reference but i am still not seeing that

• 02:39:38 okay we did edit [Music]

• 02:39:53 interesting we have the same and notepad

• 02:40:39 oh it says it is not supported in darkness but instead as the networking

• 02:40:49 information so we need to use data ajax method

• 02:40:53 so we need to use data ajax method i see

• 02:41:03 i see okay so this is the correct article that

• 02:41:05 okay so this is the correct article that we need to

• 02:41:06 we need to look for data ajax i see

• 02:41:17 for method post data ajax true oh it is this much easier than oh nice

• 02:41:22 oh it is this much easier than oh nice so let's copy and paste our

• 02:41:25 so let's copy and paste our form into here

• 02:41:36 and this time we will set data ajax true

• 02:41:41 ajax true okay why not working

• 02:42:02 um oh i know the reason because we didn't set the

• 02:42:04 didn't set the model although that's

• 02:42:07 model although that's lecture nine dots

• 02:42:13 lecture nine dots okay and

• 02:42:25 okay then there are other things you see data ajax confirm

• 02:42:28 data ajax confirm yes or sets the message to display in a

• 02:42:29 yes or sets the message to display in a confirmation window before the request

• 02:42:31 confirmation window before the request is submitted

• 02:42:33 is submitted data redux method so the data ajax

• 02:42:36 data redux method so the data ajax method will be

• 02:42:38 method will be paused

• 02:42:45 like this let's also add that and then we have data ajax mode

• 02:43:06 i think we can also set this as data ajax loading and

• 02:43:09 as data ajax loading and it tells the guest or sets id attribute

• 02:43:11 it tells the guest or sets id attribute of an html element that is displayed

• 02:43:14 of an html element that is displayed while ajax is

• 02:43:17 while ajax is loading so let's set an html element as

• 02:43:22 loading so let's set an html element as id

• 02:43:29 loading okay morning now

• 02:43:37 and maybe style visibility

• 02:43:57 okay gets or sets the name of javascript function to call

• 02:43:58 function to call immediately before the page is updated

• 02:44:01 immediately before the page is updated yes so this will be

• 02:44:03 yes so this will be executed before running complete

• 02:44:19 and then there is a function to pull after page is successfully updated

• 02:44:24 [Music] and then there is guess or sets the id

• 02:44:27 and then there is guess or sets the id of dom element

• 02:44:29 of dom element to update by using the response

• 02:44:51 what we need to do is we need to refresh this part so

• 02:44:56 this part so how can we do it

• 02:46:38 so url action takes action string controllers

• 02:46:39 controllers what other options there are

• 02:46:43 what other options there are okay url action is a method of mvc

• 02:46:46 okay url action is a method of mvc routing

• 02:46:46 routing action content string action

• 02:46:50 action content string action string

• 02:46:51 string [Music]

• 02:46:54 [Music] protocol as a support routing

• 02:47:20 okay so for returning this i need to have

• 02:47:42 list task items okay and this is the pad

• 02:47:47 okay and this is the pad so i need to provide it

• 02:47:56 okay url action for the first parameter is

• 02:48:04 string action action controllers action controller and t model values we

• 02:48:07 action controller and t model values we don't have any t

• 02:48:08 don't have any t model values therefore we will just

• 02:48:11 model values therefore we will just provide

• 02:48:13 provide action name the action name will be

• 02:48:17 action name the action name will be ajax index the controller will be

• 02:48:22 ajax index the controller will be lecture 14

• 02:48:32 and rtlv result function so this will be the

• 02:48:36 result function so this will be the result uh

• 02:48:39 result uh that will be that we will get foreign

• 02:48:59 and we also need to return partial wave action result here let's also fix that

• 02:49:04 action result here let's also fix that okay and return partially

• 02:49:13 okay and here's we need to have an id of something

• 02:49:17 we need to have an id of something whatever it is

• 02:49:21 whatever it is or let's say list of tasks

• 02:49:25 or let's say list of tasks of course visibility once we hit them

• 02:49:28 of course visibility once we hit them and we will get them inside here

• 02:49:39 ajax index so the id will be this yeah so this will run as soon as the

• 02:49:43 yeah so this will run as soon as the page is

• 02:49:45 page is loaded

• 02:49:54 and once it is completed it should be here

• 02:50:00 why i am doing it this way so that i can replace it

• 02:50:01 replace it after doing ajax postback

• 02:50:05 after doing ajax postback without doing any full page prospects

• 02:50:15 after this is completed i will rerun this method actually

• 02:50:32 okay it is working so let's give this a thought name as function

• 02:50:36 a thought name as function lords list of

• 02:50:39 lords list of items

• 02:50:46 my javascript is also not very good actually

• 02:50:48 actually and we will call this method after

• 02:50:53 and we will call this method after use

• 02:51:13 it was a self executing function so this is a self executing function

• 02:51:15 so this is a self executing function here

• 02:51:17 here and now i have encapsulated it inside

• 02:51:19 and now i have encapsulated it inside the

• 02:51:20 the name it function and calling that

• 02:51:23 name it function and calling that function here

• 02:51:25 function here and

• 02:51:32 let's open it okay it is working when we refresh the page

• 02:51:36 it is working when we refresh the page we are seeing the ajax query here as you

• 02:51:39 we are seeing the ajax query here as you can see

• 02:51:41 can see actually this is not the agent's query

• 02:51:44 actually this is not the agent's query oh it is data square yeah

• 02:51:52 this is going ajax index okay and

• 02:52:00 then ajax index we need to open ajax in excel

• 02:52:04 ajax index we need to open ajax in excel this is not a page

• 02:52:21 yeah we don't have that yet let's open ajax index

• 02:52:30 index and this will be ajax listing so let's fix

• 02:52:34 listing so let's fix it so here's nothing

• 02:52:41 it so here's nothing okay ajax listing and

• 02:52:46 okay ajax listing and here let's put ajax index

• 02:52:51 here let's put ajax index it for the return ajax index page

• 02:52:56 it for the return ajax index page another partially but a full wheel

• 02:53:11 return i will return off so the ajax index is taking

• 02:53:14 index is taking a model yeah

• 02:53:17 a model yeah okay it is fine when we are taking

• 02:53:21 okay it is fine when we are taking [Music]

• 02:53:22 [Music] modulo

• 02:53:24 modulo actually i need to send a

• 02:53:28 actually i need to send a empty model for ajax in this not a

• 02:53:31 empty model for ajax in this not a loaded model

• 02:53:33 loaded model yeah and

• 02:53:36 yeah and okay looking correct so let's run the

• 02:53:38 okay looking correct so let's run the application

• 02:53:39 application test you know why i didn't

• 02:53:44 test you know why i didn't send ajax in the uh

• 02:53:47 send ajax in the uh loaded model because we are not going to

• 02:53:50 loaded model because we are not going to do any

• 02:53:51 do any editing directly on that form

• 02:53:55 editing directly on that form we will just do a post pack

• 02:53:59 we will just do a post pack therefore an empty model is fine for us

• 02:54:08 okay i also need to send an i empty model because we are doing a binding

• 02:54:10 model because we are doing a binding here

• 02:54:11 here uh so that we can

• 02:54:19 do adding new things and it is also listed here

• 02:54:20 listed here we also need to

• 02:54:27 remove this because we won't we okay we can keep that actually just fine

• 02:54:35 so let's run again i'm not sure if our form data juxt method is complete right

• 02:54:38 form data juxt method is complete right now

• 02:54:39 now um because we are using a speed

• 02:54:43 um because we are using a speed float i wonder if it is turned

• 02:54:47 float i wonder if it is turned into beta ajax url

• 02:54:55 okay this page is still working with ajax and let's open ajax index

• 02:54:58 ajax and let's open ajax index yeah it's also working but

• 02:55:02 yeah it's also working but our listing is not working right now

• 02:55:06 our listing is not working right now so let's see the console

• 02:55:16 okay we have an error so we have error of

• 02:55:16 of ajax listing what is the error here

• 02:55:29 okay no such page is found at ajax listing

• 02:55:30 listing or because it's in the lecture 14 year

• 02:55:38 you see when you don't type the strings fully correct it won't work

• 02:55:41 fully correct it won't work oh its root is different

• 02:55:53 let's see if it works or not if it doesn't work i will just provide

• 02:55:55 if it doesn't work i will just provide the rows parameters

• 02:56:13 okay now working so when i set uh the controller name and the action

• 02:56:16 uh the controller name and the action name it is working

• 02:56:19 name it is working okay and let's check our form to see if

• 02:56:22 okay and let's check our form to see if it is

• 02:56:23 it is asynchronous or not ajax or not so we

• 02:56:26 asynchronous or not ajax or not so we have

• 02:56:27 have form data ajax for methods that ajax

• 02:56:30 form data ajax for methods that ajax true data is

• 02:56:31 true data is loading action loading action is lecture

• 02:56:34 loading action loading action is lecture 14 update insert

• 02:56:38 14 update insert okay once this is completed we need to

• 02:56:44 okay once this is completed we need to uh let's see when we

• 02:56:47 uh let's see when we call it we have an error perhaps

• 02:56:50 call it we have an error perhaps oh they are added nice nice it is

• 02:56:53 oh they are added nice nice it is working but it is not getting refreshed

• 02:56:55 working but it is not getting refreshed because we didn't set the refresh method

• 02:56:59 because we didn't set the refresh method so basically when on completed

• 02:57:03 so basically when on completed which is written here we will call our

• 02:57:05 which is written here we will call our javascript method

• 02:57:09 javascript method so let's add this as a command to here

• 02:57:23 yeah like this and then on complete which is here data

• 02:57:26 and then on complete which is here data success

• 02:57:33 actually this is data ajax gets or sets the id of dom

• 02:57:36 the id of dom where is the javascript function

• 02:57:52 later ajax begin okay here when it is completed so what i need to

• 02:57:56 when it is completed so what i need to do is data ajax complete equal to

• 02:58:00 is data ajax complete equal to let's see it doesn't show

• 02:58:03 let's see it doesn't show loads list of items i think it will work

• 02:58:06 loads list of items i think it will work now

• 02:58:18 write a console whiteline

• 02:58:34 let's call it yeah let's run application so after prospect

• 02:58:38 let's run application so after prospect it should be called

• 02:58:40 it should be called and it should update our list

• 02:58:44 and it should update our list we can also display a confirmation i

• 02:58:47 we can also display a confirmation i also want to

• 02:58:50 also want to display loading now message and

• 02:58:53 display loading now message and so in order to check that we need to add

• 02:58:56 so in order to check that we need to add a delay

• 02:58:56 a delay to our controller

• 02:59:00 to our controller which is here yeah if i put a breakpoint

• 02:59:03 which is here yeah if i put a breakpoint here

• 02:59:04 here it will add a delay

• 02:59:08 it will add a delay so this is

• 02:59:11 so this is ajax test

• 02:59:15 ajax test okay and do you see loading anywhere no

• 02:59:25 okay loading is not visible anywhere we will work on that no problem and yes

• 02:59:29 work on that no problem and yes it is arrived so let me show you you

• 02:59:32 it is arrived so let me show you you will see that there is no page refresh

• 02:59:35 will see that there is no page refresh or full postback okay

• 02:59:38 full postback okay and nice working let's

• 02:59:41 and nice working let's edit okay the page didn't

• 02:59:45 edit okay the page didn't refresh or post break um

• 02:59:49 refresh or post break um let's see that is the query

• 02:59:54 let's see that is the query requests

• 03:00:02 okay you see this is uh called as a post uh the update insert it was an

• 03:00:06 uh the update insert it was an asynchronous post link

• 03:00:08 asynchronous post link and then we have ajax squared request

• 03:00:12 and then we have ajax squared request get

• 03:00:12 get this was also an ajax get so there

• 03:00:15 this was also an ajax get so there weren't any page

• 03:00:17 weren't any page changes or anything

• 03:00:21 changes or anything i wonder if the red is also working okay

• 03:00:24 i wonder if the red is also working okay after delete

• 03:00:26 after delete it did a full post page so delete didn't

• 03:00:29 it did a full post page so delete didn't work because on delete

• 03:00:32 work because on delete let's see

• 03:00:45 doing a full uh redirection here delete is a

• 03:00:48 uh redirection here delete is a redirection another

• 03:00:50 redirection another ajax right now but

• 03:00:53 ajax right now but this is working

• 03:01:00 okay so let's also turn uh delete

• 03:01:05 also turn uh delete into an ajax as well

• 03:01:20 to be able to do that we need to modify this

• 03:01:45 there are also callback functions here we are already doing stages complete

• 03:01:47 we are already doing stages complete covet function

• 03:01:50 covet function and yeah let's see

• 03:01:53 and yeah let's see let's see if this is working i have

• 03:01:55 let's see if this is working i have turned this into a data ajax true

• 03:01:58 turned this into a data ajax true so that should be a full prospect but

• 03:02:02 so that should be a full prospect but only and ajax query i didn't set

• 03:02:06 only and ajax query i didn't set any on complete method right now

• 03:02:10 any on complete method right now by the way this will break our root

• 03:02:13 by the way this will break our root method

• 03:02:14 method task list items because it is ajax

• 03:02:26 and after this is done it won't refresh our list but it should prevent

• 03:02:31 our list but it should prevent paul okay and memory refresh yes it is

• 03:02:34 paul okay and memory refresh yes it is working

• 03:02:35 working okay so we can also add our

• 03:02:38 okay so we can also add our uh this is super super awesome

• 03:02:42 uh this is super super awesome uh super easy as well uh we can just

• 03:02:46 uh super easy as well uh we can just add this to our graph here

• 03:02:54 on our list so it will be fully uh post it will be fully

• 03:02:57 uh post it will be fully asynchronous but let's just keep this

• 03:03:01 asynchronous but let's just keep this so list task items

• 03:03:12 okay let's name this as this below table is not fully

• 03:03:32 okay and i will copy and paste it

• 03:03:40 okay this law table is fully asynchronous with ajax

• 03:03:43 asynchronous with ajax and so

• 03:03:46 and so on delete data ajax

• 03:03:49 on delete data ajax equal to true and stata ajax

• 03:04:09 what was it let's see okay they just complete load

• 03:04:12 okay they just complete load list of items so delete is now

• 03:04:15 list of items so delete is now asynchronous and

• 03:04:18 asynchronous and then there is also edit item however

• 03:04:22 then there is also edit item however edit item requires

• 03:04:24 edit item requires a new page to be opened therefore

• 03:04:28 a new page to be opened therefore it will remain as it is right now we can

• 03:04:31 it will remain as it is right now we can also

• 03:04:32 also pop up a new window to edit that

• 03:04:36 pop up a new window to edit that the logic is same and

• 03:04:40 the logic is same and about loading item

• 03:04:51 yeah i will show you how to add a loading icon to your

• 03:04:53 loading icon to your page as well and then as a next thing

• 03:04:58 page as well and then as a next thing i will show you how to code a custom

• 03:05:02 i will show you how to code a custom authentication system like a login

• 03:05:12 but i may uh keep it to the next picture as well okay so here when i

• 03:05:15 picture as well okay so here when i delete this it will

• 03:05:16 delete this it will get deleted and updated you see now

• 03:05:18 get deleted and updated you see now working

• 03:05:19 working yeah fully asynchronous and let's also

• 03:05:22 yeah fully asynchronous and let's also add a

• 03:05:23 add a loading icon so loading i

• 03:05:27 loading icon so loading i can give

• 03:05:31 can give from somewhere let's see from flood

• 03:05:33 from somewhere let's see from flood items

• 03:06:01 okay such as this one and okay it doesn't

• 03:06:05 and okay it doesn't provide a link

• 03:06:28 okay i think oh maybe okay one seconds

• 03:06:54 anyway let's add it to our application instead of looking for a cdn

• 03:06:57 application instead of looking for a cdn so let's add it to our

• 03:07:08 www root here images let's add an existing item

• 03:07:18 okay downloads which is spinach and basically what we are going to do is

• 03:07:21 and basically what we are going to do is we will set this uh inside

• 03:07:26 we will set this uh inside our loading div

• 03:07:29 our loading div here we have

• 03:07:32 here we have the id loading system

• 03:07:35 the id loading system i guess image will be equal

• 03:07:39 i guess image will be equal to images start which is finished

• 03:07:43 to images start which is finished fully automatic and i also need to set

• 03:07:46 fully automatic and i also need to set the position

• 03:07:48 the position in position center of the screen

• 03:08:06 um positions like this

• 03:08:13 so this looks better so let's add this as a

• 03:08:15 as a styling

• 03:08:22 pop-up class okay so the class will be equal to this

• 03:08:25 so the class will be equal to this you see it is visible hidden and

• 03:08:35 okay data is actually learning how to use this as hidden

• 03:08:49 example no

• 03:09:04 okay so yes we got that and we see i need to look for using some i have

• 03:09:05 need to look for using some i have something in my mind but

• 03:09:07 something in my mind but maybe there is an easier way so why not

• 03:09:11 maybe there is an easier way so why not look for easier way

• 03:09:16 look for easier way so deep loading

• 03:09:37 okay here so div height will be set as default and will be changed dynamically

• 03:09:45 how oh it says that write a css and scripts

• 03:09:48 oh it says that write a css and scripts hide and show loading image

• 03:09:50 hide and show loading image okay i was going to do that but

• 03:09:58 um is not um the way i was hoping for i was

• 03:10:02 is not um the way i was hoping for i was hoping automatically

• 03:10:04 hoping automatically showing it and hiding it so

• 03:10:08 showing it and hiding it so data ajax loading actually i can

• 03:10:12 data ajax loading actually i can do this as with two methods

• 03:10:15 do this as with two methods and show loading

• 03:10:19 and show loading and then hide loading

• 03:10:23 and then hide loading so inside show loading

• 03:10:27 so inside show loading function so

• 03:10:31 function so loading what we are going to do is

• 03:10:34 loading what we are going to do is we will use jquery to get

• 03:10:38 we will use jquery to get loading class

• 03:10:41 loading class loading a div and we will

• 03:10:44 loading a div and we will say show basically

• 03:10:48 say show basically and inside height loading

• 03:10:55 and inside height loading we will tell height

• 03:10:59 we will tell height so the height will hide

• 03:11:06 okay i think it changes the visibility there is visibility and

• 03:11:07 there is visibility and other thing so before

• 03:11:10 other thing so before starting data ajax

• 03:11:37 then okay i think let's check this

• 03:11:40 okay i think let's check this link again

• 03:11:47 that is before and after okay mode

• 03:11:59 yeah here begin so we will use in begin

• 03:12:05 okay it is i think a javascript function here

• 03:12:06 here downloading then

• 03:12:19 we have complete yeah i think inside to complete we will

• 03:12:21 yeah i think inside to complete we will just

• 03:12:22 just call right loading

• 03:12:31 so it will be here yeah now let's run we also need to add a some delay to

• 03:12:34 we also need to add a some delay to be able to see

• 03:12:35 be able to see [Music]

• 03:12:37 [Music] loading because it will be immediately

• 03:12:39 loading because it will be immediately completed right now

• 03:12:49 you see what can you do is limitless and we have only so much time in this course

• 03:12:53 we have only so much time in this course to teach you the rest will be up to you

• 03:12:56 to teach you the rest will be up to you what you can do is limitless

• 03:12:59 what you can do is limitless basically actually this lecture will be

• 03:13:02 basically actually this lecture will be this course should be in true semester

• 03:13:05 this course should be in true semester not in a single semester

• 03:13:08 not in a single semester but we don't have that much time

• 03:13:14 but we don't have that much time okay

• 03:13:23 okay let's see delete let's add test test and now let's

• 03:13:27 test test and now let's make some delay so to make a delay

• 03:13:30 make some delay so to make a delay [Music]

• 03:13:32 [Music] i will put a breakpoint here

• 03:13:40 and when i click oh i think i have seen it

• 03:14:10 let's edit the data here like this and

• 03:14:14 like this and hide and shove

• 03:14:25 hide and shove okay hide and show so

• 03:14:28 okay hide and show so what uh property it changes

• 03:14:33 what uh property it changes so let me set hide and show let me show

• 03:14:36 so let me set hide and show let me show you

• 03:14:37 you let me check it and we set height

• 03:14:40 let me check it and we set height okay display not visibility but display

• 03:14:43 okay display not visibility but display that was something that

• 03:14:45 that was something that was uh

• 03:14:48 was uh getting into my mind so it will be

• 03:14:51 getting into my mind so it will be display hidden not visibility

• 03:14:53 display hidden not visibility display none otherwise it won't work

• 03:14:56 display none otherwise it won't work this is important

• 03:14:57 this is important you need to set this plane none for

• 03:15:00 you need to set this plane none for gquery to make it visible or

• 03:15:03 gquery to make it visible or hide it

• 03:15:35 okay so when i click delete oh this is not the correct page

• 03:15:36 not the correct page here okay test test test

• 03:15:40 here okay test test test now loading is loading and after three

• 03:15:43 now loading is loading and after three seconds

• 03:15:44 seconds it's okay it is gone okay everything is

• 03:15:47 it's okay it is gone okay everything is working great

• 03:15:49 working great so let's also note this

• 03:15:53 so let's also note this how to convert a regular

• 03:15:57 how to convert a regular html into fully ajax

• 03:16:00 html into fully ajax supporting

• 03:16:03 supporting html elements such as form

• 03:16:08 html elements such as form okay um

• 03:16:15 okay um say see with using

• 03:16:24 what we use we just use gquery ajax unobtrusive

• 03:16:30 gquery ajax unobtrusive file okay

• 03:16:33 file okay how to

• 03:16:40 update part of the page with ajax

• 03:16:45 with ajax with ajax asynchronously

• 03:16:54 okay and i think google will fix its phone and okay it didn't fix

• 03:16:59 fix its phone and okay it didn't fix okay

• 03:17:08 okay so here's sorry about that insoci

• 03:17:12 sorry about that insoci auto update part of a page

• 03:17:16 auto update part of a page agency by using

• 03:17:26 what we use we use yes

• 03:17:27 yes [Music]

• 03:17:29 [Music] data ajax begin not became actually

• 03:17:33 data ajax begin not became actually complete method of call

• 03:17:39 complete method of call okay uh how to

• 03:17:43 okay uh how to okay so display loading

• 03:17:46 okay so display loading give it using

• 03:17:54 uh data ajax begin and data is just complete

• 03:17:59 and data is just complete that's of course okay i think

• 03:18:02 that's of course okay i think this is all um i i

• 03:18:05 this is all um i i i will show how to make a custom

• 03:18:09 i will show how to make a custom authentication login system but it is

• 03:18:12 authentication login system but it is already over

• 03:18:13 already over three hours so i will leave it to the

• 03:18:16 three hours so i will leave it to the next week hopefully

• 03:18:17 next week hopefully and next week we are also starting to

• 03:18:20 and next week we are also starting to see

• 03:18:21 see bootstrap

• 03:18:29 so end of lecture 14 normally we should have been finished

• 03:18:32 normally we should have been finished all of our lectures but i will record as

• 03:18:36 all of our lectures but i will record as necessary as number of

• 03:18:37 necessary as number of lecture videos so that you can learn

• 03:18:41 lecture videos so that you can learn uh best from this course

• 03:18:49 let's add this to the uh uh

• 03:18:56 github before doing that i'm going to take a

• 03:18:58 take a backup

• 03:19:06 okay then i will copy and paste it into the [Music]

• 03:19:07 [Music] my uh

• 03:19:21 it back okay um lectures lecture 14 version 2

• 03:19:25 lectures lecture 14 version 2 let's replace existing database backup

• 03:19:30 let's replace existing database backup okay and

• 03:19:38 okay [Music]

• 03:19:45 oh by the way i was supposed to delete lecture 14

• 03:19:48 lecture 14 um anyway it is another problem

• 03:19:52 um anyway it is another problem so it's before it will get you confused

• 03:20:01 okay let's revert back to the previous comments so you will

• 03:20:03 to the previous comments so you will also see that

• 03:20:05 also see that let me see rewards

• 03:20:08 let me see rewards latest comments

• 03:20:32 okay needs reset software i need to use this

• 03:20:40 it's status okay it says that they are never

• 03:20:42 never so what we need to do is we will delete

• 03:20:46 so what we need to do is we will delete this

• 03:21:01 okay deleted files are still displayed but anyway

• 03:21:02 but anyway not a problem

• 03:21:10 okay lecture source codes

• 03:21:20 okay it's push origin master and yeah everything is here

• 03:21:24 and yeah everything is here i also see

• 03:21:33 okay it says that failure to push some left

• 03:21:34 left so we need to push origin master x6

• 03:21:37 so we need to push origin master x6 minus minus

• 03:21:38 minus minus force so it will force it

• 03:21:58 okay and let's check our guitar repository

• 03:22:01 repository to see it is working or not

• 03:22:06 to see it is working or not okay updated now and

• 03:22:09 okay updated now and let's see the comments okay

• 03:22:12 let's see the comments okay lecture 14 source section uh

• 03:22:16 lecture 14 source section uh lecture 13 we didn't push it

• 03:22:20 lecture 13 we didn't push it perhaps

• 03:22:28 yeah yeah lecture 4 13 will not push it but now it is

• 03:22:30 but now it is push it to the repository or it did push

• 03:22:33 push it to the repository or it did push i'm not sure

• 03:22:35 i'm not sure but it is here yeah this is lecture 13

• 03:22:40 but it is here yeah this is lecture 13 and this is lecture 14 okay

• 03:22:44 and this is lecture 14 okay okay uh end of lecture 14 hope we'll see

• 03:22:47 okay uh end of lecture 14 hope we'll see you next week