Full-Stack App with Blazor WebAssembly & Syncfusion in .NET 7 🔥

for this small example application we're going to use the free Blazer components of sync Fusion who sponsored this video so thank you very much syncfusion but let me get this straight I will tell you what I like and what I also don't like about their components and again you can use all of them free off charge even for commercial purposes for more details check out the links Below in the video description and now let me show you how this works alright so first how do you get a free license well this is pretty simple you see heresyncfusion.com is the place to be and then you go to pricing and then please go to the right tab here Community license and as you can see you can claim your free license when I open this now and in my case in an incognito window because I am already signed in then here you can see that you can sign in with your LinkedIn account for instance and then you just go to your dashboard and here you see on the license and downloads you could actually download the essential Studio Enterprise Edition so this is a tool in essence where you can then use templates of syncfusion but we won't do it that way in this big big tutorial I just want to use the nuget packages so you don't have to install anything apart from of course the.net SDK and visual studio and then we are able to also use all the sync Fusion components for Blazer and now you already see it here get license key and with that you select your platform for instance Blazer and then the version and then get license key and then you will get your key and then you can copy and paste this thing and in a minute you will see what to do with that long license key and then this works you can use everything here even for commercial purposes so now let's create our project so in Visual Studio 2022 also the Community Edition we create a new project and what I want to do here is use the new empty template here that came with a.net 7 actually before we've got the Blazer webassembly app template with already a navigation and Pages HTTP calls and so on but here now I really want to start from scratch with the new blazer empty template and if you don't see it here in your recent project templates of course you can always enter Blazer and then Blazer webassembly app empty that's the one we want to use we give this thing a name like Blazer sync Fusion CRM for instance you will find the source code Down Below in the video description it's available on GitHub so then click next and here we wanna use.net 7 configure for https and asp.core hosted because I really want to create a controller or several more controllers and that will then connect to a SQL Server database so the complete stack full stack here for this example application let's hit create and then the big question is how do we now use the swing Fusion components and our new license key first you see it here this is a rather small solution now we don't have for instance the weather forecast controller which is typical for the default templates here only the index page that is saying hello world and for the server we only got our program CS no controllers here not really a shared class this is really just an example so let's start from scratch really but first again if we now wanna make use of a sync Fusion there it is again from the the main page here syncfusion.com we can go to learning and support and then we've got demos and documentation for instance let's just go to documentation and in here and then blazer for the web and here you already see some interesting stuff the API reference nuget packages but let's just go to getting started and we are one we want to use a web assembly application in visual studio and what do we get here well they do it with the Blazer calendar example application and we actually did all that but now as you can see here the first thing is installing the nuget package or several packages this is totally up to you so let's have a look again let me just close the tabs and back to visual studio for our client project now we right click manage nugget packages then to browse I always do this mistake make sure to be on the browse Tab and then we can enter sync Fusion blazer for instance and there you see it already we've got sync Fusion Blazer core data themes buttons and so on all the components we're able to use but it's a bit tricky here scroll to the top it is actually scrolled at I don't know why in my case it is scrolled to this position here so infusion Blazer core and you can totally use all of these single new get packages if you just want to use the buttons for instance but for this example we can also just use sync Fusion Blazer so this is as you can read it here this package provides 70 plus in future Blazer native components so everything is in here and I think this is totally fine in our case so we've got everything installed in essence and with that then we can use the references in the import eraser and really use every single Blazer component all right and now to be able to use all this we have to add something here for instance we start with the program CS let me just close the other files here and just to make sure that you can also see it the next steps are all right they start with the inputs razor so let's just do it that way as they recommend it here so we go to the Imports razor and in here now we add first the syncfusion Blazer reference but when we now or later want to use single components different components like the buttons the themes and so on then we also have to add these references here as well so it is not done with this line here alone after that the program CS as you can see here and we have to add this line Builder services and then add sync Fusion Blazer so again program Cs and this thing here we've got the reference automatically Visual Studio thank you very much for that for that and then comes the style sheets and here we have to pay attention because if for instance you just import it or use the nuget package so Fusion Blazer themes then you need this line but as you can see here when you're using syncfusion Blazer as we did we actually need this complete line so let's just copy this and now in our index HTML in the head section we add this style sheet here all right and then we also need the script reference and here it's actually the same we've got the complete package so let me just copy this thing here and now down here we also add this one all right what else components of course but let's just see how this looks for now we save everything and run this and this is our results not that exciting I know let's just stop this again and now let's try to use a component the very first thing I would like to add is a navigation bar and for that we've got the so-called app bar here and as you can see already in this documentation you can go to every single component and then to getting started and this is first pretty similar a pretty similar example or a pretty similar code documentation stuff we already have seen on the page before but after that we see add Blazer app component for instance and here now you can see that we need the reference for navigations so let's just add this thing down here that's great and after that we see an example all right so let's just use similar code here and then let's have a look at how this already works we go to the solution Explorer and in here now I really want to add a new component of course I could add the application bar or the navigation bar here to the main layout already just create a new components so let's just do that we create a new folder this thing is called shared because this is a shared component we can see on different pages and in here now add a new razor component call this thing like navpuff or navigation bar and now here let's remove this and in here now we just say SF APPA there it is already all right so this is our application bar maybe we can also change the color already with color mode and then app bar color and then primary all right and now I have to add this to the main layout of course so this is rather simple let me just add the navbar here on top and of course we can add this little reference here as well to the Imports razor maybe up here at using and that should be it now we've got everything and now let's run this one more time there we are and what is this this application was built using a trial version of sync Fusion essential Studio to remove the license validation message permanently a valid license key must be yeah of course we well of course I didn't forget this I just wanted to show you what is actually happening if you're using syncfusion here without a license key you can try everything but well you would see this message and this is not that nice right so let's now add our license key and for that we can again use the documentation here and I think it's this one yeah this is the one this is the line we need sync Fusion licensing and so on so register license key and Blazer application and you have to put this in here in the Blazer in the progress yes that was the word I was looking for so let's go back to visual studio maybe stop the app again and now here in our program CS file and then down here we just enter this thing and now let me also copy my license key this is the one from the beginning of this tutorial and there it is and now let's run this one more time there we are and this is our beautiful app that great well of course we have to put some content in there and maybe also change the style a little bit so we do not have the margin and the padding here so let's just do that next in our navigation bar now the idea is to add buttons and for that we have to go to the Imports first and also add the buttons or reference here and now buttons well of course that take us to another page so for that we need the navigation manager first so with that inject we inject the navigation manager and also call this thing navigation manager and in our code block now I want to create a new method and maybe not navigation Navi a gate to a page and then in here the string with the actual page and then we can use this method for our buttons to navigate the user to the certain page so navigation manager it shall be and then navigate to and in here now our page now regarding the buttons the first one for instance is typically an SF you see there's a pattern here sync Fusion button all right and here now we can set a CSS class first for instance so CSS class and then a typical class here is e inherit so with this thing you would inherit this style or the theme you're currently using so this just looks a bit better maybe I can just show you in a second how this would look if you would not use the E inherit class here then we can choose an icon of course so I can see it as it is and in here now let me use e icons this is a library we get with syncfusion and then the home icon and then the content here is also called home so this is actually the text of our button we do not add the text here we add it in our content parameter here after that we can also choose what should happen on click and here comes our beautiful navigate to page method we need a parameter here so this is done with the Lambda expression and here we call navigation navigation again navigate to page and here this is simply the forward slash and we're missing a parenthesis here and now here also the at sign or another option would be to use single quotation marks this just as a side note this would actually if result lets me lots of work all right but if you want to use double quotes then make sure to use the add symbol here all right so this is our first button and actually we can already close this thing like that maybe this looks a bit better then let's just save this and maybe stop the application because this is one little thing I don't know if this happens because of Visual Studio or sync Fusion or whatever it is but when I created this bigger application then sometimes it could not really reload the page so had some issues with that and then I had to stop the application and then restart it manually but no it worked so this is our home button now doesn't this look nice all right now I would say we just copy and paste this button here because now what I want to do here a little CRM system a Content a Content a customer relationship management system tool whatever the perfect name for this thing is where we will have a look at contacts so this then might be the user I can again the text here is a contacts and the page then will also be contacts after that I also want to display a map with some markers where we can have a look where are these contacts placed maybe this is fun and this is really a great feature a great component of sync Fusion and it's done really really fast so I really like that not notes this is the next one uh map is the one and then also call this thing here map and the last one now I already told you what I wanted to do here is notes so for every contact I want to be able to create notes maybe something like I don't know uh this user wanted to buy a specific thing from me but then he or she didn't so maybe I should send another newsletter email or follow-up email whatever it is maybe you already know how CRM works and of course this is really a tiny tiny tiny glimpse of CRM features there are so many more features that you need actually and can build into a CRM anyways these are our buttons and what I like after that is use the app bar spacer so the spacer here it is and what this thing does is it will will add a spacer and separate the buttons up here so these will then be on the left side of the uh of the application bar and after that I will see something on the right side and this shall simply be a button to create a new contact because I think maybe this is an action you wanna use most of the time probably maybe I don't know maybe you know more than me and uh if so please write it down in the comments so I am open for new suggestions so we've got no method for that for now so let me just close the button here save everything again and then let's have a look this looks great all right so we've got our home page we've got the contacts of course there is nothing there yet and you contact as well so our application bar already done and just as a side note again I I wrote this code here now but if whenever you wanna have a look how does this actually work you can either go to the documentation here and uh there are some how-to's getting started native events and so on and what I also really really like is the demo page here so for Blazers confusion you can already see it the first one here is the data grid and you see regarding the data grid we will also use the data grid data binding columns and so on whatever you want to change there are lots and lots of demos here but what we wanted to do is actually pretty simple uh buttons right so maybe here for our buttons we can see okay this is how they can look see that with an icon and so on appearance is a bit different so what about this thing you can click on this and then let me just show the uh or display see the c c the source code and this is how it actually looks right so lots and lots of stuff and references really where you can learn how to use all these components but enough now with the documentation and the demos and all that stuff you can look it up of course and I guess I will look up some things uh throughout this tutorial here but now let's go back to our application really another next thing I would actually like to do is change the CSS here because I really really can't stand the the padding and margin here and also the font maybe we can change that as well so let's go back to visual studio really quick and now here in our app CSS this is our default app CSS from the empty Blazer project so you see a little bit is here but now up here I would like to first regarding the body I would like to set the margin to zero padding zero and regarding the font family I would like to well maybe you can set this to Roboto Ariel helvetica yeah this where is it well there it is yeah something like that maybe I think this looks better and also one more thing you know the margin 12 pixels for the main elements because as you can see where is it here we've got the main element here with the body of our page and now let's go back yeah much better right okay so I think we can work with that and I forgot one more thing I wanted to show you in our nav but now when I do not enter this class here for instance then this looks like that see that not that nice right so with that class the component knows all right we've got an app bar with the certain color or style and when we choose this CSS class here now then we see that the button changes and I gotta say how reload works really really great now don't know why but I like it but let's not celebrate too much because uh because we've still got a lot to do so let's see how it works out so we've got our app bar maybe we can also change the uh in next page here index razor is not hello world anymore now we want to welcome our user to Blazing CRM isn't that a great name and after that we have to change some something else I already told you I want to use contacts and notes in our application also Maps but we will build the maps with the help of our contact information so what we really want to store in our little CRM application here are contacts and nodes so the typical way now for the default example applications is to create new models here in our shared project so right click the shared project here and now we add a new class and the first one is the contact let's make this public all right and now the other one is the notes so note CS it is and also make this a public class all right so first let's add properties to our contact class like that now since we also want to store this in the database it is crucial to add an ID here we will start just for a short period of time with mock data here but then we will build everything you need to use Entity framework in SQL Server to build this complete stack so first we've got an ID great now let's really make this simple string with the first name by default this is an empty string let me copy this two times because I want to also add a last name and then also a nickname after that another string give this thing this name it's the place and then I want to see a date time another build date time for the date of birth maybe you guessed it I want to use the date picker here for this thing then we've got date time date creates it and by default we can set this to date time now and then I want to add a list of notes so prop and then list note and this is already a new list of node and I want to add one more thing one little attribute here called Json ignore now what does that mean well when we and we need this package here as you've seen json's utilization when we get the contacts right we see now I get the errors with hot reloads let me just stop the app alright so now what I want to do in this application is I want to receive these contacts I actually don't want to include the notes now why is that because when we add the or implement the node model in a minute we will also have the contact there and when we then again include the contacts and this is what I definitely wanted definitely want to do in this application then we get a cycle right and this cycle leads to an error so when we receive only the data of the contact then I really want to ignore the note now the better way the better practice for that would be to Simply use dto's data transfer objects and in this case then we can really Define what we want to see and what not for instance that they created is not really interesting for us on the client but this is something for a more comprehensive course maybe and now while I'm already at it we're not done actually with this model because what you can see here date created right so maybe you know it already we want to implement all the crud operations meaning create a contact read contacts so receiving them from the database update them and also delete them so what we could do now is not only add date creates it but also date updated date deleted and also an is deleted flag because actually I do already want to delete the contact from the database the complete entry I just want to use a soft delete here and actually just update this thing so now here date modified is also a great name but I called it data updated this thing is nullable of course because maybe there is a situation where this thing hasn't been updated yet so this would be for the update and again date time notable for date delete it and the last thing is actually a balloon flag called is delete it all right and we will add something else later for the map I can already tell you that we need the latitude and the longitude data but let's do this later really all right now the note so in here this is not that big we've got an ID again and then we've got a string and I want to set this to required string so we really need a text here and then we also need a relationship to our contact so for that we first add another little integer because could be the case that this is a node without a contact actually so for that case nullable contact ID and here now the actual contact also notable like almost like that and In Here Also I would like to add update created and this would be rather simple because I really wanna don't wanna add the rest of the operations here so we can create notes read them and delete them really delete them not just the soft delete and do not update them all right I hope you're fine with that so this is now our note ID text contact ID contact for the relationship and then date created so we've got a one-to-many relationship one contact can have many many notes and now the next step is actually create a data grid because now let's do some syncfusion component stuff again and after that we will move everything to the database so first real quick the net web academy starts soon it's an online program where we cover all things.net web development with laser git Azure and more pretty much everything you need to know if you want to land a job in the.net web development world and also the exclusive.net Web Academy Community for all your questions and if you want to be the first to know when it opens and if you want to get a discount then make sure to subscribe to my newsletter or check out the link below to get a spot on the waiting list thank you very much and now back to the tutorial again the Imports razor because I want to use the data grids and for the data grids we need the grids reference here and then we need a new page actually and this would be then the contacts page so in here Pages we right click and add a razor components call this contacts add our page directive and this is now called contacts and we see it here this is the right URL on the right route say okay now let's have a quick look at the demo here again we've already seen the data grid and this is how it can look got the columns here we could check mark check boxes icons or images so lots and lots of stuff we got filters here great stuff really we can do and the source code as you can see is here but let's not copy and paste this thing let's do this step by step because this is in my opinion the best way to learn so let's just close this and in here now we really say create the SF grid so now what is actually happening when we just just do it like that all right nothing as you can see we need something here and this is a value we need the data source so let's say a data source is now grid data and we do not have a good data so let's add grid data down here in the code block and this is one of the rare times where I really copy and paste stuff so as you can see and maybe we can um add this using in our Imports again real quick and there we are all right and now in here we see the grid data let me close this now the arrow is gone and this is our list of contacts and I did this because really I want to save you a bit of time at least and here we see Peter Parker the nickname the place they created is not necessary here because we get this as a default value and now this is the most or the simplest data grid right so let's just see how this actually looks there's our app and now we go to contacts there's our page and this is I want data print it already is here but as you can see it just grabs all the properties so maybe if you would use a data transfer object then this would look a bit better but then again the property names are not that nice right we've got first name without the blank in between so we we should really decide by ourselves manually what columns we actually want to use and for that we will we use another component called grits columns all right and in here now for every column we wanna we want to use we want to display we create or add the grid column component here all right the first one in this specific case what I want to do is I want to add a button to be able to edit the contact all right so this gets a fixed width of 60 and in here now I can already use a template like that and here a new scope where I can then say I actually wanna get the current contact of this row and do it like that of our contact is the current context as contact and now I just create a button where I can use this contact so again the CSS class we set this to E inherit and then the icann CSS is again e icons icons almost and then e edit and then on click we want to call a certain function but let's cover this in a minute this is our template and now the next column I wanna use is actually the first name to do that wait I have to close this this was the wrong place put this here yep now it's correct so here now we Define the actual field we want to use this is the first name and we can also add a header tag so this is the the caption if you like for the column and here now we can just add the blank and that's it all right so this is how you just Define the most simple column Also let's add the last name the link in the place and date of birth now this is then a bit different so here first last name then the nickname and the place and again we call this simply place this is the nickname this is the last name regarding the date we say date of birth and we also call this date of birth and what we could also do is actually change the format but let's let's have a look first how does it look now oh it is rebelling there we are looks better I guess with the first name last name nickname place and then the date yeah format is not the best so maybe we can change that I leave that up to you don't know where you are and where you are watching but let's just use this format here maybe someone is happy then it is not revealing so let's just restart the application and now yeah now we see another format great and as you can see here we have a button so maybe let's also add real quick a little method uh called edit contact for that we need the navigation manager again so let's just inject this thing inject and navigation manager navigation manager all right and now maybe down here we add a method called edit contact with an ID and this simply leads then to another page where where we then will Implement an edit form where we really can edit this contact all right so navigation manager navigate to and then contacts almost ID not ID edit and then comes the i d all right save this and we stop the app okay and in here now we need our on click so on click it is here again a Lambda expression where we say edit contacts and in here now contacts ID and I'm pretty sure this is not null so this would then be our button and when we know open our application let me click here we're moving to this page and of course it's not there yet but it will be all right in a couple of minutes all right so this is already nice really how how many minutes did it take it's not lots of time and we've got a data grid that looks really nice all right and we already made some changes I also wanna make some more changes because in the demo we've seen something about filtering and searching and so on and this is also pretty amazing in just a few not really lines but just a few characters we can add something else so first what I would like to do is add grid filter settings and we do this like that grid filter settings and in here now we say the type is syncfusion Blazer grits filter type checkbox and that's the one so let's see what is now happening maybe we have to rebuild it but again I think you won't see much right nothing changed and the question is why is that well we also have to add one more thing and you can do this here on top allow filtering set this to true come on true and as you can see we also got a bit more stuff a little excellent export grouping multi-sorting paging and so on PDF export so lots and lots of great stuff now of course we have to stop this thing it started again there we are and now you see these are the check boxes right and now let's just say I only want to see Bruce and there's Bruce same for the last name the place date of birth and so on and now we can clear this and what I really really like is here the search option for that we add a toolbar and in here now we add a new list of strings and this is then I want search like and that's parenthesis missing now this should be it all right let's save this all right so now is the time where we have to reset the application by ourselves so maybe we do this for future changes rebuilding and there's our search bar now I can answer Peter for instance hit return and there's Peter and this is for every property so now I can also enter New York for instance of course I got Peta again but what about Gotham there's Bruce Wayne as Batman he got him in Gotham City isn't that nice I really really like this search bar in particular all right got some experience with other components component libraries and this I really like okay but what I don't like really is that I have to reset the application not sure if it's Visual Studio or syncfusion maybe you know more but this is a great feature all right so far we've got already great components from syncfusion but now what I want to do is move this data here to the server to a database actually well it's locally on my machine but I think you get the idea so what we need for that are new nuget packages we have to install some packages to be able to use Entity framework with SQL server and we have to install the.net entry framework towards and I would say we do this next so first in our you know what first let's stop the application and then we can go to our server project here and then manage New Again packages and in here again the browse tab we need something and that would be Microsoft there it is already this one we can use this one but maybe we first install this thing here Microsoft Entity framework core still the core term is used internally although with.7 it is called Entity framework seven we accept everything and there we are next thing again and not again yeah again now we already got it the design package so install this thing for our code first migrations and the last one seek will server not design this one Microsoft anti-firmacore SQL Server it is install this thing and yes we accept this and only in the case you don't know what to do with SQL server or how to get it you can simply Google four SQL Server downloads and what Google for SQL Server Express and then you get two secret server downloads and then you get the free edition of SQL Server so just click on this link and then when your internet connection wants to you get to there Express you can download this and after that you get the recommendation for secret server management Studio or if not you can also just Google for this thing and there it is download SQL Server management Studio There's the link and this is a great tool to well manage your SQL Server database alright so this is what you have to do and then we can work with SQL server and energy framework last thing here is we need the net EF tools for that just click my version of.net is 7.0.2 the preview Edition should still work with a 7.0.102 it is I think by the time of recording this and regarding the entry fabric tools what we then need is a.net tool install and then dash dash Global and then.net dash EF and it's telling me that this thing is already installed so what I can do is simply on install this and then install it back again and there it is was successfully installed and with.net EF we can double check there it is entity framework.net command line tools 7.0.2 awesome so this is what we need and now next step already is implementing the data contacts because the data context or the database context will be the thing we will use to make a connection to on what database all right so let's do that next in the solution Explorer we create a new folder in the server projects call this data all right and in here now we add a new class and this thing shall be called Data context this is simply a way I do this it works I think it's great so please just continue with me here thank you very much now this thing first inherits from DB context and this thing comes from Microsoft Entity framework core we could do this first and when you type control and period Then maybe you would get the suggestion to install the nuget package engine from a core totally up to you you can do it this way or the other way all right with the data context we first need our Constructor so ctor it is hit tab twice and then in here we need options and these shall be of type DB context options with our data context class here we call this options and we also call the base Constructor with our options and now down here we need actually DB sets now what are DB sets well let's have a quick look here prop and then DB set of type contact and we call this now also contacts and this thing now is a representation of the table in our database right so there will be a table representing the contact type and we call this thing then contacts usually you just pluralize the The Entity name here so contacts is I think a great name and we actually need exactly the same thing for our notes and please bear with me if I am not diving that deep here I've got lots of other tutorials on my channel and of course got my honor courses Dot and rep Academy and so on there we really dive deep so maybe you want to have a look there but for now please again bear with me I want to make this somehow as quick as possible but I know that this tutorial is still very very long anyways we've got our DB sets and now we also have to configure one more thing we have to add a connection string and what we could do is put the connection string and I want app settings Json file here and access this thing it is pretty handy in particular when you want to use more connection strings than just one but for this tutorial now let's just use our on configuring method so overrides ah almost over right on configuring it is great there it is already and in here now we can call the options Builder use it use SQL Server this is the perfect method here maybe put this in a new line because this thing will be a bit longer and now we say server is in my case period backslash backslash and then SQL Express the database let's call this thing blazing CRM maybe then we set trusted connection to true and now the new thing in entry frame X7 trust server certificate also true all right so trust server certificate is true trusted connection is true databases blazing CRM but this is totally up to you and again the server if you have secrets of expressed like Express Express installed on your local machine then this should be the same for you or in your case all right and now let's save this and then let's also add one more thing we already got mock data in our contacts page I can't find any more there it is right and now let's just use this data to seed our database so we've already got some contacts in our database all right now to do that we need our on model creating method so down here again overwrites and then on model creating that's the one and here we say now model builder all right and then for the entity contact we want to say this has some data and let's data now let's give this also some data so again back to our context page and in here now new contacts copy everything back to our data context paste this format everything and now we've got some contacts all right so Peter Parker is ready one Tony Stark and Bruce Wayne and another thing we can add are actually some notes so again to save you a bit time I think this is the last time I'm pasting something in here again model builder entity note this time has data and here the node IDs I want to three and also the contact IDs one two three so every contact has at least one note with great power comes great responsibility I am Iron Man and I'm Batman these are great notes in my opinion so let's format everything save it again and now the next step is to register this data context in our program CS so let's do that real quick this is the correct place so here Builder services and then add DB context data context it is what was that okay and here now we also add the reference we've got our data context and now finally we can run our migrations so we simply open up the terminal and in here now we write dot net EF let's have a look at the commands here we've got database DB context and migrations and we need the commands to manage migrations and then commands to manage the database so again dotnet EF my creations and then add initial for this very first migration and if you do not pay attention like me you get this message here no project was found now what do we have to do is we go to our actual uh solution folder and then or the project folder we move one step further to the server project folder right so here is now our server project and now let's try this one more time dot eduf migrations add initial and hopefully it that the build will succeed and then we will get a migrations file nice so now let's have a quick look and here we see this migrations folder now and you see what will happen when we run this so we will create a table in the app method you see this table contacts with the primary key another table notes with the primary key node ID and also the foreign key contact ID right this is nice and then we will insert some data and this is actually amazing the bulk insert here because this is also new with NG framework 7. was not possible before so this is great and in the down method so if you decide to roll back this migration then we just drop the tables contacts and nodes so now let's run this with net EF database update yes update is the correct command here it will also create the table and these are all the commands it uses for that so if you have time and you want to see just have a look and now here we now not really sorry refresh this thing and we've got tables isn't that nice notes and contacts don't worry about the EF migrations history this is an internal one for Entity Framework and here now we see our contacts columns the notes and let's see edit top to 100 rows and we see our beautiful contacts here we also see our beautiful notes isn't that nice now the next step is to get the data from the server so let's add a contact controller next and then we will continue with the Blazer client and receive the contacts from the database but this is now also a great point I think where we can add this to a GitHub so let's continue here so in our server projects project let's add a new folder and call this con at rollers and in here we add a new controller right click add controller not a new item we add a controller and in here it is not an MVC controller it's an API controller and I would like to use empty ones no generated code whatsoever best way to learn and sometimes also to develop right and we call this contacts controller all right so this is now our controller beautiful thing and this can be done real quick actually the first thing we need is a Constructor all right and in here now with the help of dependency injection we inject the data context and please please please bear with me here I am using a Fed controller here usually and again in the courses and tutorials we will use the repository pattern with services so I would create a contacts service or a contact service that we will inject here into the controller and then use the actual or imp lement the actual logic then in this repository or service got a video about uh repository patterns in general and explained it what is this thing actually and how does dependency injection work there so this is something we could do but again for the sake of time let's just use fake fake let's just use fat controllers here not fake these are real but they are fat alright so now uh what we can do here is we want to actually create and assign this field add an underscore here because this is a private read only all right and I know I can configure this but uh I didn't so now the method we need a method to get all the contacts and for that we will use HTTP get and tell the code you are great this is totally right now this is a public async task we return an action result with a list of contacts like that need the reference here get all contacts it is and now in here we just return a weights and then context and then we just access our contacts table and turn this into a list and since we actually got an S deleted flag we can also add something here so with the where statement or with a where function we can say we only want to get the contacts come on c for a contact that are not deleted all right so give me the contacts that are not deleted and turn them into a list so this is our controller and now let's use this endpoint with the route API then the controller name this is the convention controller and brackets contacts so API contacts and we use the get HTTP request method and with that we should get all our new contacts from the database okay and to do that again we go to the client now finally and to our contacts page and for that we actually wanna make the call to the web API when we load this page and this page is initialized and for that what we can do is we call a lifecycle method called on initialized or on initialized async got a couple of lifecycle methods here in Blazer so for the components we've got on off the render on initialized on parameter set they make sense in different different cases or scenarios for us on an on initialized async it shall be and in here now one more thing we need is since we are making a call an HTTP call to the web service it is inject HTTP client we need to we have to inject the HTTP client we call this HTTP all right and now in here we say bar results is a weight and then HTTP get from Json async all right because we will get Json here and we cast this to a list of contacts and again the route is API contacts and let's just leave it at that and simply remove our contacts here so that we really see the difference so now the grid data is empty nothing happening here right let's run this rebuilding and no records to display great this is absolutely correct let me remove the check mark here that is not reloading on file save and now we say if our results is not null then we say our grid data is now the results save this and now we have to restart manually and yes it does and there's our data isn't that nice and now in the developer tools Network tab it is you just reloads and here's our call isn't that nice okay so this really works we're already full stack now we got the Blazer client got a web API and also a database where we stored our data and now we're receiving the data here isn't that great so this works just fine love that and now the next step is finally that this address here is available actually so that it will find something so we will add now the page for a single contact the edit contact page where we will be able to create a new contact and update an existing one alright for that we go to our Pages folder and add another Razer component and we call this now simply edit contact because this is actually what we want to do there and we need some stuff well first this is a page so let's add two page directives actually because we want to use this again to edit the contact and create a new one so this shall be called contacts and then edit and then for that we need an ID as a parameter so uh like that and it's in it adjusts so and next one is when we want to create a new contact we open this route all right what we also need is the HTTP client and the navigation manager because we want to do some stuff with that well of course we want to store the changes save the changes so for that we need the HTTP client and navigation manager to get back to the list of all contacts when we made a change for instance so inject HTTP client HTTP and inject navigation manager navigation manager all right so now we need the ID parameter so parameter it is and in here public and it could be now because you know you contact and yeah this is a property so I could have used the building snippet but sometimes you forget it right oh okay and now regarding the title here depending on the given ID you change this title or had a uh of this page so if no the ID is not null then we could actually do the following we say that we wanna edit you could actually add the name of the contact right so we need another property here which is the contact so let's add this thing first this is again a property contacts contact and let's say this is a new contact first and now we can say edit contact name all right or nickname Maybe and in the other case we just say create a new contact right something like that now again the idea behind that is that with a given ID we want to edit a contact and if the ID is null we know that the user wants to create a new contacts all right so now to be able to do all that we need an added form in this edit contact page and now finally we get to use more sync Fusion components like the text box for instance the date picker they look really great so let's continue now with the edit form for that the first thing I want to do is a diff I know this is a really exciting and then we need an edit form and let me just add this a reference here to the Imports razor maybe you're a bit confused why do we have to do this usually you you don't write well there's an empty Blazer solution we've used the empty template here and not every reference is then here in our Imports Razer file but now it's here all right so now we've got our edit form already and we need a model here and this shall be our contact and what we can also do is add a method for our submit and I want to use on valid submits so not only submit I really want to check if this form is valid because we can of course do that as well with syncfusion and on whether submit we call handle submit and let me just add an empty method here real quick asynctask handle submit all right so now we've got our method here and now let's continue first with the actual input or text box components here for that we need another reference in the Imports we add sync Fusion Blazer and then inputs and here now the first one let's sync Fusion text box again we can use a CSS class in my case I would like to use e outline looks a bit different than we can use a placeholder this is really great but you will see why in a second and then for this placeholder we can also Define a float label type what I like is the floats label type Auto and now the next thing is the typical binding of a value oh my gosh it's late again and here we say contact first name for instance all right so this is now our SF text box and I would say we just we just have a look real quick oh this looks let's see so it is building and there it is edits yeah we do not get the contact right this is really sad but what we can also do is we can go to contact new for instance and create a new contact right and here's the first name and what I can do now I go here see that first name this is this is a great solution really to a problem I had a couple of times where you would well in a specific cases maybe you wanted to add a label and for that you would have to write an extra component or use a another element another HTML element just for the label and here in this case you don't really have to do this and this is also the auto float label mode was it type all right the type so this means that come on where's it there that when we have entered something here it just stays above the text box and when it's empty then it moves down as the default Place holder for instance when we add or put this to set this to always then we will see that this is always on top right and the other option was come on never yeah and in this case we would have to again add a label manually as you can see no type something in here now I don't know what field this is right so that's why Auto is a really really great option here so let's just save this again and let's just add the other text boxes I would say so let's just copy this and here I almost forget one forgot one thing so we want to use the last name the nickname then also the place and maybe date of birth but this is a date picker so this will look a bit differently so now first name the last name for the last name we've got the a nickname for the nickname and also the place for the place and let me have a look now let's see create a new contact yep there are our Fields this is nice and now the date picker so for that SF date picker we need the calendars reference seen that calendars so let's add this here real quick and this is by the way also a great way to find the actual reference you need so calendars and the date picker not date time if you don't want to use the time but you have the option here right so see that you can also add a data time picker to also see it time and what I want to use here is just the date picker all right and now of course some more parameters here first we want to set is the T value which is a nullable date time for the date of birth again we've got a placeholder which is a date of birth and then again actually the float label type I'm lazy so let me just copy paste this here and bind value [Music] for our date of birth and one more thing formats so let me add the format here as a string for instance this format this time save that and then the last thing actually is a button so so the submit button right SF button it is and here again CSS class this time E Primary for the I can reset e icons and E save the text will be safe and then very important the type is submit all right save that build this thing and there we are this is now our form and we also see the date picker here isn't that nice and I think when I make this a bit smaller I think you're still able to see everything right then you see how this would actually look right set this to any date we want of course today perfect and we can zoom out uh here to the months and years and whatever you need and the save button isn't that great let me enter something here also the labels also work great one thing I don't really like is how big this text box is but we can change that real quick with CSS so maybe also make use of CSS isolation real quick in here now in here in the pages folder we add a new item and this is a style sheet and we have to call this now edit contact Razer CSS so this is the CSS file only for our edit contact Razer and let me just add one tiny thing here for the diff we set the width to 500 pixels for instance and to make this work actually we have to add one more change since this is the empty template in here in the index HTML just a site not really we have to add another link here with the href actually Blazer sync Fusion CRM so your project name and then client and then Styles CSS all right and with that then the CSS isolation should hopefully work rebuilding yeah now it's in my opinion looks better Okay so we've got our edit form can do much yet uh there it is we of course have to implement the handle submit but let's first test one more thing I already told you I want to check if this form is actually valid so what we can do is we can actually test the validation right to do that let's say we wanna make the nickname required so what we can do is simply up here we add another attribute and make this required and as you can see now we need the reference for system component model data annotations save that and now back to the edit contact Razer we have to add this is standard Blazer stuff we have to add the data annotations of validator and that would be one thing and now we could display a summary of all the validation messages or we just display the one single message here for the nickname so we add validation message 4 and then in the Lambda expression again the the contacts contacts nickname like that okay close this this should be it let's restart the app and now let's see enter something here here not here save this the nickname field is required it's a bit big actually so maybe we can change that as well so real quick in our fcss this time we change the type for no not here let me have a quick look yeah validation message is the class we have to change so maybe we can do that real quick close this and in here now let me just say validation message font size is 12 pixels important and font family system UI maybe all right save this again rebuilt okay nothing changed here yeah now it works all right so this looks better now we can enter our stuff here here here and here save this thing of course nothing is happening here so now the next steps actually are for one implementing handle submits but maybe one thing we should do before is actually loading the contact we want to edit right so if it's not contacts new if it's actually even go to contacts then we say we change Tonio we want to change Tony then we here actually get this contact from the database and then we're able to change it change the information here and then with that button we call our handle submits method and I would say let's do exactly that next all right so first to get a single contact we have to go back to our contacts controller because here we only have the method get all contacts but now well you guessed it we need a method to get one single specific contact so let me just copy this method here and regarding the route now we need a parameter and this is simply the ID just in case you don't know it here we can add the route attribute similar to this thing here on top of the class and then here in parenthesis we can enter a route like in curly braces then the ID but what you can also do is we can combine these two attributes put this here and it's when we add the bracket here the closing bracket then it's exactly the same in essence and now regarding the method here let's call this get contact by ID and now here we need of course also the parameter so this thing and this thing these two have to match return type is now only one single contact and now in here what we want to do is first let's just check if this contact is really available so context contacts and then find async ID and that's the one and now here let's check first if result is null and then in this case we simply return not found and not found status code with a little message like contact not found and otherwise we simply return our contact again with the dtos we can do this a bit better maybe a a customized service response that can deliver some more information about what is actually going on but for this tutorial I think this is totally sufficient so we've got our controller method but now uh we want to call this thing so let's go back to our edit contact and in here now again we use the on initialized async a lifecycle method to get the contact so overrides and then on initialized async and now the first thing we have to check is if the ID is not null because this means that well if we get it we get an ID and this means that we want to get the information off the contact with that given ID so if ID is not now then we say the result is a weight http and then first get async now this this time not get from a Jason async cause could be the case that we get it not found right just did that in the controller in this case you want to do something else so first we check here get async with the proper URL or the proper route so API contacts for the controller and now only the ID like that now here we can check if the result status codes is the success status code so this would be then the status code 200 or as you can see here true if the HTTP response message status code was in the range of 200 to 299 otherwise it is false and when we return a 40 not found it is a 404. I think everyone knows this one even people who don't write code by now all right so if this is the case then we say our Json result is weight and then result and then content so this is our HTTP content we get and now we use Json again so read from a Json async we want to get a contact here so that's the one and now again we check if it's too too many ifs here if Json result is not null and only then we say contact J is the Json result and I am a bad coder here because an evil coder because I'm not using the curly braces here but for now for this little thing I don't really care sorry about that and if otherwise the success code is the status code is not 200 success for instance then what we can do is well let's make this simple we just navigate the user to the to the to the page that the user would use to create a new contact so in here now this would simply be a navigation a manager do we have it injected yeah we have the navigation manager and then we say navigate to and then simply contacts and then new and this shall be it's I hope Let's test that there we are we go to contacts and for instance edit Peter Parker and there we are this is Spider-Man again let's have a look in the developer console as well for instance now Bruce Wayne we see ID3 this is the result and and you can see here the status code is 200 what about id4 I don't know why you would do that but maybe you want to do that see it here we get a 404 not found and then we just jump to the create a new contact form great all right and now let's Implement creating and updating a contact in the edit contact page and first now again the contacts controller so back to visual studio and in here we go to our context controller again we need new methods this time it is a post and a put method so maybe we can just copy this thing here first and now this is an HTTP post and in here we again let's just return one contact here the one we created so create contact is now the name and as a parameter we choose the contact model again I know I'm repeating myself we can't do this better with DDOS request and response videos but this works here for this little tutorial and the first thing here now is rather simple again we access our context and then the contacts table and in here we just say add contacts but since we made a change to this table now we have to save these changes with a weight and then context save changes async and then again we just return this contact this is already our post method to create a contact but let's also add our update method since we're already added here and now HTTP put it is we say this is updates contact now and here let's yeah add the ID and also the contact we could do this a bit differently for instance we could just say without the ID we just wanna use the contact here as a parameter and grab the ID from there again this is totally up to you and if you want to use a GTO for instance maybe you would not put the ID here in a update contact request video or something like that so I think this is totally fine now what you want to do here is again we wanna first find a contact maybe let's call this a DB contact for database context contact contact and context not that easy and in here now again we return a 404 not found is that if the contact is now but if it isn't we actually found a contact then we just manually overwrite our properties here so DB contacts first name is and now the contact first name and let me just copy or maybe intellicode is yeah intellicode is pretty pretty awesome so the last name then also the nickname this contact's nickname right then we've got the date of birth Maybe date of birth is contact contact date of birth and the place let's also update the place this uh thing is no contact place and they'd updated this is something we have to also set now so date updated is now actually daytime now all right and after that again we have to save these changes so wait and then context save changes async that's it and after that we return okay and our contacts this should be it first name last name nicknamed their birthplace and Date Update I can already tell you in the delete method then we will do also an update and update the deleted flag but this again should be it for now and again I would say we just test this thing so let's restart the app and there we are and now let's go to contacts and then Peter Parker now let's say this is amazing Spider-Man save this already saved here and if you don't really see a result right why is that well we forgot the handle submit method of course so let's do that now I know if you reload of course it is still Spider-Man all right so we got the server and now here handle submit for now pretty empty but let's just do the following we want to use the put or the post depending on the the current State here so again we check if the ID is null or not and then we want to get the actual result where we again check if the status code is uh is a 200 so the status code is a success status code so let's define our HTTP response message first and this is our result and now if again ID is not null then in this case we choose an update so result now is a weight HTTP and then put as Json async and in here now we say API contacts and here for the route it is contact ID so the ID of the current contact and our one object we want to send now our request object is the actual contact and if the ID is null this means we want to create a new contact then we say await HTTP post because this is our HTTP method now post as Json async and the route is simply API contacts without any other parameter and we use our contact here all right with that we get the result and again we check if result is success status codes then we do the following let me get some space here we try to parse this thing so Json result is awaits results content and then here almost read from Json async you want to get a contact here and if Json result is not null and then we say our contact is the new Json result and that's it all right and now let's save this again restart and now let's see let me also open the console here Network tab again so we see our our data grid here with all the contacts this is nice we go to Peter Parker we get Peter Parker with the nickname Spider-Man and now again it's amazing Spider-Man we save we make a call and you see it here it is a put call with 200 and now the preview what do we get back Amazing Spider-Man we can reload this and we should get Amazing Spider-Man and also here we see Amazing Spider-Man isn't that great and now let's also test the creation of a new contact but before we do that let's just add a new button here because currently we would have to actually well enter the URL manually in the address bar so we can fix this with this button maybe also add a button down here so let's go first to our contacts page so they'll be here and let's first create a new method create contacts create contact without a parameter and here we just navigate to contacts and then new all right and the button then maybe we can add in here and a paragraph So we get some space between the grid and the button and this shall be again a sync Fusion button this is primary button the content here is create new contact and on click we open our create content we call our create contact methods I think this works and now also the navigation bar so real quick in the nav bar we already have our sync Fusion button here and now let me just put this in a new line and here now we also add the on click parameter and we say we just copy this stuff and then move to contacts and then new all right now let's test this restart the app there we are we see our create new contact button this works we go back and click here now this works as well and now this contact well let's add another bruise last name is Banner nickname is Hulk and according to Google I found that Dayton Ohio is his place and the date of birth is let's use the date picker here let's choose another year and this should actually be 1973 it is May and then eighth all right save this and this now should actually work as well there it is and now let's go to our contacts here and we get Bruce Banner from the database now you see we didn't really get feedback right the user doesn't has to or usually the user doesn't open the developer tools to see a result here so maybe we can add something like a success message or an error message let's do that real quick in our contacts form here we go back to visual studio for that and the thing is that what syncfusion offers here is so called messages and also toasts but let me open this up real quick so for instance here in the demos let's just scroll further down it is your notifications we've got a message right so these are the messages that I want to use here in this concrete example when we have a look at the source code how do they work well you just add the components and then choose to display them or not simply with a Boolean flag right so should they be visible or not we will see this in a minute what I also actually like from the look and feel are these toast messages they look really nice of course you can change the look as well but the problem here is that you also have to put them as components on your page and what they did here is with this button for instance we call or they call a math a method show on click and hide on click so here we have to get the toast object called the show async method but again this thing has to be placed on this page I before used the Blazer to tote and toast notifications from Chris santis or kudos to him and what I love about these things is that you can actually register a service and then you only have to call a method or you inject the service first and then call this method for for the toast or to display the toast so I think much better implementation for the default behavior of such toast notifications but and this is a big but there is a tutorial out there that's the one show or height tools from any page using service in Blazers so this is actually from syncfusion and there you can build pretty much exactly the same thing right so you well they use some toast options here you can of course customize that here it's the title and the content but you can also add the position look at field whatever you like and then this toast serves this I'm going to use this toast service you can inject this thing then and when you then call from whatever place you like in your application then you can call this show toast use the show toast method with the options and then do exactly the same thing here you can see you have to register this thing and this is again pretty similar to the Blazer toast from chrysanthe so great great stuff and this is actually the fix already here for for the little issue I had with toast notifications anyways what I want to use here in this example are the messages because I think they look they look nice and we can simply use them for our little example here to create or update a contact so how would you do that well we go to our edit contact Razer page and then after the edit form let's just add another paragraph like that and here now we use the SF message sync Fusion message as you can see we need another import so this shall be done here in the Imports using sync Fusion Blazer notifications and now here we've got our SF message component now let's say severity here is message severity success this thing will be visible controlled by a variable called show success message we will add this thing in a second and actually we need a message here and close this close this object here and here we say contact saved successfully and then just for the arrow case we say this would be then error and show error message and here we just say oops something went wrong for instance okay now the variables let's just put them down here so bull show error message is first false and the same thing down here well let's start with the success message all right and now in our handle submits here we can say show success message is true and here if we do not get a success status code we say show error message is true all right so again put the components here and just control it divisibility by uh what we display them by changing the value of these Boolean Flags in essence so let's restart the app again there we are contacts and now let's just say we saved this guy contact saved successfully isn't that great now of course we have to reload this page to well remove this message I'm pretty sure there are different ways to do this and now just to test the arrow case real quick let's just uh you're on the update for instance return a bad request save that and restart and here now let me save this oops something went wrong awesome let's undo this restart and there we are save this contact saved successfully beautiful alright so we're almost done with all the crad operations the last thing that is missing is delete a contact again I told you I just want to do a soft delete in essence here so first let's implement the controller method again and that would be yeah we are already here so this is now HTTP delete let me just copy this thing because again we need the ID here as parameter HTTP request method is now delete we let's return a list of contacts Maybe of the rest of the contacts and here we call this delete contact only with the ID now again we try to find this a contact if it isn't there then we return a contact not found message with a 44 not found status code and the only or there are two things actually we want to update here is deleted is now true and date deleted will be set to almost to a date time now we save this thing and we return now weight gets all contacts actually and here then we get all the contacts and that are not deleted all right this should be it and now to the contacts page because there I want to add a new button to delete our contacts so again there are of course different ways to do this we could add a button here in the edit contact page maybe this makes more sense for you but for this example uh I again want to use the grids because I really like the data grid so let's go to the contacts razor and in here now let's just add another button again to enable us to delete a contact and maybe one more thing I can already tell you maybe we should add a confirmation dialog right but let's let's do this step by step so first we just copy and paste this thing here to get the delete button so now we can actually use a delete icon and of course we also need a delete contact method another thing is it of course would already work with only the ID but since I want to add a dialog here I want to have the information of the complete contact in the dialog and for that since I don't want to make another call let's just put the the complete contact here and you will see why we need this in a minute and now we need the delete contact method of course so down here first void delete contacts with the contact objects and now the errors here are gone and now let's continue with a dialog so the first thing we need here is another reference in our Imports Razer and this thing now is for our pop-ups so there are a couple of pop-ups and I want to show you the dialogue so back to the markup of the contacts page there we are now let's add this dialog below the button thing is it well to display this dialog it works similar to the sync Fusion message we saw a couple of minutes ago right so we add the component here it is not visible at the beginning but when we want to display it then we change the visibility by the help of or with the help of a Boolean flag so let's first start with the syncfusion dialogue that's the thing here we can set a width for instance this width here and we can set this thing to model so this would then be a modal a dialog and here now to to change the visibility or to show it and hide it again we need a variable and here let's just call this show delete dialogue all right let me add this real quick so for instance down here you say boo show delete dialogue of course it is false first and now with the dialogue we have a couple of options to design them first we use the the dialog templates components and in here we have a header and here it's a title so we can say something like are you sure not your are you sure all right and then we also need a Content so down here again in a paragraph maybe we can say do you really want to delete and now comes the catch I wanna get the nickname of that contact so how would I do that I don't know just by using a button I don't know the current um the current contact that or the button that was clicked so this is why I wanted to set this contact here or give this contact here to the delete contact method because now what we can do is we can add a contact to delete right so maybe here we can say contact and this thing can be now contact to delete and now when this is set we will do that in the delete contact method in a sec then we say now here contact to delete and how to get rid of the warning we just want to display the nickname alright so I hope you get the idea here we click this button and the button knows who the contact is but then the dialog doesn't so what we can do is we can set let's say a temporary variable here and then the delete contact method sets this variable and also shows the dialog and then the dialog knows okay this is the contact that should be deleted and to uh to do that really we can say here in the delete method contact to delete is now the contact and also we want to show the delete dialog but complicated maybe at the beginning but in other component libraries it works similarly all right so we've we've got this but now we uh well we have to give the user some options to decide if he or she wants to delete the user or not so what we can do now is we add dialog buttons and the first dialog button looks like that content almost not the context the content is for instance yep I want to delete this superhero in essence this thing is not set to primary because you know maybe you automatically press the primary button and I don't want you to do that really when you wanna when you hit delete on click we call a function and this function we will call this confirm delete contact for instance and then another one to cancel this here we just say nope this thing is no primary and here we say the function is called cancel delete contact then we close the dialog buttons and one more thing I would like to add well for your information we can also work with events so here there are dialogue events we can use but I want to use animations and here we can add a little effect this is nice not really important of course but we can say dialogue effects Zoom effect for instance close this and then we get a little animation Isn't it nice so now the rest of the functions confirm a delete contact and cancel delete contact well cancel is pretty straightforward what we want to do here is we just say void cancel delete contacts with that we say show delete dialog is now false but now when you want to confirm we make our with API call so this should be an async method task confirm delete contacts and now here first we check if we actually got a contact to delete right so if contact to delete is now in this case we simply return but if not we close the dialog so show delete dialog is false and then you already know this by now I guess wait HTTP delete async the URL is again API contacts and then our contact to delete ID [Music] and now here if result is success status codes then we say bar adjacent results is awaits result content and then read from Json async shall be a list of contacts and in here now we say if our Json result is not now then set our grid data to the Json results all right that was the right shortcut to save everything okay let's test that real quick we restart our application and there we are so we've got four contacts let's just say we we want to delete Bruce although it's so nice that the filter now works for both of them isn't that great clear this Bruce I love this okay so we delete this guy not edit delete this guy here's our did you see the effect Zoom Bam are you sure do you really want to delete Hulk nope or yep and he's gone isn't that nice so this works let's just double check in the database I close the table so let me just open it again and here we see some values Bruce Banner Hawk is deleted is true and we also get a date deleted and the date updated only for Peter Parker all right great so we are actually done with our contacts and now the next thing I want to implement are some notes already told you about told you about this idea here okay there's no page so these shall be then all the notes and in here now for instance if we added Spider-Man then I want to display the notes down here and I want to also add a text box multi-line text box to uh to be able to add some notes so yeah let's do that next so the first thing we need is another controller for the server side so let's just add one not here in the controllers folder right click then controller and again an empty API controller we call this now notes controller and there it is and again I know we're using a Fed controller here and usually I would create a service with an interface using the repository pattern and dependency injection but this would again make the tutorial even longer and I already have a bunch of tutorials covering that on my channel so I hope you still keep watching now let's just implement the complete controller and since I'm lazy let's forget the update we just create read and delete notes so again the first thing we need is a Constructor that's what I was looking for and again our data context context assign this create and assign this field here and now down here we need a get method for all nodes get method for all the nodes of a certain contact then create notes and delete them and again let's just Implement all of them so we got this covered already so HTTP get for getting all notes public async task action result list of notes yes this is the reference we need and we call this get all nodes this is pretty small this function here we return weight and then context notes and in here now what I want to do actually is include the contacts so we have the contact ID and with that we can add a button then on the client to navigate the user to the actual contact so and for note and here I want to get the contacts this is what I want to include and then let's order this descending by the date created so we get the latest notes on top order by descending and then and date creates it and here we turn this into a list is this the right format I'm not sure about that don't think so yep okay this looks better now all right so this is get all notes and now let me just copy this paste this now for the notes of a certain contact so here we add a parameter contact ID we return again list of nodes but this time get notes from contact Maybe and we add the contact ID here and there's only one thing we can change we just use the where function and here we say where the contact ID equals the contact ID all right could be an empty list but this is totally fine now the post methods let me just copy this again and now it is posed to create a node so create note with the node here and then we say what do we say [Music] um we say first context notes add note all right then of course we save this and we return the notes maybe again from the the contacts so let's say like that all right and here we have to add the node of course like that okay and yeah maybe also order by descending I mean why not we can leave this as that like that I guess because the idea behind that is that we for now or for the idea I've got for this application here in this tutorial that we only create notes actually in uh and edit contact page yeah I think for now this makes sense so now the last thing delete copy this again here we say delete but this is not just the ID of a node call this now delete notes with the ID and here now similar to the contacts contacts to the context method we first get a node so awaits context notes find async ID if the DB node is null and then we return not found node not found all right and then we say this time nodes remove the DB notes and wait context save changes async and again we return let's say only the ones of this character here character contact and this should be then the DB note contacts ID all right and with that off to the edit contact page first so in here now we need the notes let's start with the code block this time we need new properties and methods to create the nodes and load all nodes of the current contact so first maybe here we say we've got a list of nodes like that and here this is now by default a new list of notes and to create a node we say new note and but before this is a new note with the text just set to string empty okay all right and now the methods let's just say async task create a note and now if you say ID is null then again we return because we uh haven't stored this contact yet and otherwise we say the contact ID of the new node is the current ID and then we say weight HTTP post as Jason async and then API notes new note for instance and again if result is success status code then let's just load all nodes and this is the next method here so async task most async task load nodes and in here we say our result is weight http get from a Json async a list of notes and the URL here is now API notes and then the current contacts i d and again if the result is not now then we set our notes to the results and now deleting is async task delete notes with the ID or let's call this node ID and here now we say let's copy this we say delete almost delete from Json async we get a list of notes back and here we add the ID the node ID and if result is not now we say that our notes I know the results all right I hope we've got everything covered and now off to the markup actually and I would like to use syncfusion cards this time for the nodes so let's add this reference real quick in our Imports again we know add the cards like that so back to the edit contact razor page and here now the first thing I want to add is a text box and a button to add a note and after that a button and the cards to display all notes of this contact so here first if ID is not null then we say almost I just wanted to add a little header here so nodes and then first the text box text box that's the one and this thing now again gets a class e outline placeholder is a new note and this is new now we set this to multi-line so with that we get a text area actually set to True again we can set the float label type to float the label type Auto and the value here now is our new note text all right and now regarding the button we say SF button and here CSS Class E inherit and the content is at node and on click we create a note all right and after that for the list of notes let's get a little divider here and a paragraph we add a new button or maybe we could just copy and paste this now it's time for copy paste errors as a button maybe we can change this and say this is a primary button set to true content this time is load all nodes load notes and when we have all the nodes then enter for each let's use the cards to display them so for each note in notes we can add a sync Fusion card like that and these are pretty simple we've got a card header an image you can also use images but I actually wanted to use the header here and this thing gets a title add note date created to string rather simple and now here for the content we have card content and here this is the end context content is note text like that and then also a new line for the next nodes so let's save everything and have a look and there we are we see our notes Here the new node we can add a note and we can load all the nodes and this is actually true here with great power comes great responsibility and now for a second note maybe something like I believe There's a Hero in all of us of course I looked that up so at this note and there we are this is now our next note isn't that great and now there's only one thing missing actually on this page we wanna load all uh not load we want to delete a node so let's go back to the client and we already have a card header and the content so now what we can also add is a footer for the delete button for instance so card footer it is and here now card footer content and again this is simply a button so SF button and you know let's say we set the content to delete is primary [Music] well why not let's set this to true and on click we and now call our delete method down here delete node with the node ID so this would be then in a Lambda expression delete note and then our note ID all right let's test that real quick research application there's a one edit form we load all our nodes we've got a delete button and it is gone and now in the database again and we'll have a look here again no note let's just add another test node here there it is maybe have a look now we see this is now id5 so this is really the ID for the node after the node we just delete it let me delete this thing again execute SQL it is also gone great so now this works and now let's Implement our notes page real quick so for that we add a new page here in the client call this now notes there we are awesome and since this is the page we add our directive here forward slash notes we need the HTTP client again HTTP client HTTP and also the navigation manager because I want to navigate the user to the contact of a node again let's start with the code block so here now we have a list of nodes we call this now a note list and this is a new list of notes and first let's get all the notes so on initialized async here we wanna call the get all notes method so of our results is awaits HTTP get from Json async lists notes URL is API notes and if the result is not now then we say the note list is our result and now I only want to navigate to the contact so let's add this method real quick with the contacts ID and here now let's say navigation manager navigate to and then contacts edit and in here now this shall be the edit not the edit the contact ID like that and now real quick the markup it's another for each actually pretty similar to the edit contact page our node in our note list and here again we add the SF card and then the card header with the title this time it is also note date created tostring all right we've got the content which is again and again it is the context interesting and note text and again a card footer with the card filter content and now we check if we have a contact so the product is not null and only in this case we add a button where we say our content this time is well we want to show the nickname so we have to add this and then in here we say dollar show and then note contact nickname this is primary and on click we navigate to this user contact so again Lambda expression here and we navigate to contact with the notes contact ID and the parenthesis was missing all right format everything save this and now I'm really really curious if this works so we're here it is building let's go to the notes they are loading great and here we see this is a contact a note of Batman or four Batman ironman's and Amazing Spider-Man so here we get to Batman can load all the nodes of Batman again Iron Man and Spider-Man all right and these are all the notes features the note feature on the Note Crut operations you know what I mean and now the last big feature I want to show you is the map so let's do that next all right now to get started with the map feature we have to prepare some stuff so first we change our contact model actually we need a latitude and a longitude value to make this map feature happen and then we also need a Google location services API key a geocoding API key actually but let's do this one step after another of course you can use other services here I use the Google one because this thing is free so you can also use this but again let's do this step by step so first the model we have for instance here the date of birth and now let's add a double value nullable for the latitude and then another one double notable double for the longitude that's correct I hope yep that's the one and with that we can now run my aggression let me just stop the app first and now make sure you're in the right directory I restarted Visual Studio when you weren't watching so let me just go to the server directory and now.naf migrations let's call this that long this migration build succeeded yep maybe loss of data this is okay for this state of the application and as you can see here we add these columns here latitude and longitude and then again we update the data or not again we update data we do not insert data we update data here so let's just run this with a.net ef database updates all right let's have a look in the database we close the tables refresh and now we should see new columns latitude and longitudes and here now we also see there are the columns the values are null this is okay now the next step is to use the Google location services in nuget package we add this package here on the server for the server project so right click manage to get packages and this is actually not officially by Google I think when we have a look Google maps location and there it is Seth Webster almost a million downloads so kudos to this guy this is a really really great simple library but everything you need for your.net web API for instance so please install this thing and then you well we you can use this but you still need an API key and to get the API key well there are different ways to do that for instance we can Google for Google Maps API key and here is a interesting page already use API keys so maybe you have a look have to look this up first in my case I already got an API key of course so I can go already to the credentials page and in here now you can already see this uh this new project for Blazers infusion CRM tutorial you can go to create credentials maybe you have to choose geocoding API first not sure about that I think you don't but again create credentials API key and then this thing is creating an API key it takes a while interestingly but here it is and uh I can trust you guys right so you you won't use this right because then I maybe I'm not able to use it for my project but anyways this is what you have to do this is the key we need or we can also just delete this thing and use the one I have already created so so we can go to show key and there is this thing all right so this is what you have to do make sure you have your API key and then you can come back to the implementations all right so now what I want to do is we change the contacts controller and the idea is now that we get the longitude and latitude values from Google whenever we create or update a contacts then we store the values in the database and doing it that way we have a way fewer requests than using the Google API every time we open up the map for instance right so again only when we store data in the database in essence we make a call to the Google services and not every time we open up the map all right so context controller it is first we need a method to get the the the values for the latitude and longitude so let's just add a method here this the return value will be or the type will be a map point from exactly this thing a Google maps location services we call this method gets that long maybe and here we provide a contact and now what we want to do first we need an instance of the Google location service so new Google location service now we need our API key so let me just grab it again copy this close paste it here and then our values are get let long from address and here we just use our place all right so you can add everything here in essence or anything the uh the streets the the postal codes country whatever it is in our case let's just use the place here and when we did this we just returned the latitude and longitude value maybe we can rename it like that all right so this is how to get our latitude and longitude values and now I wanna I wanna write another method to set these values then all right so for the contact so set let long with a contact and here now I say that long is get that long again with our contacts and then in here yep if this is not null we say contact latitude is exactly that and exactly that all right this works just fine intellicoat I love you more and more all right and now we have to use these methods in our update and create methods so the first thing first thing we do here is set that long and also in the updates set that long for our DB contact and this should be it let's save this and now let's just test this real quick so we just update the contacts we already have and then let's see what will happen here with the values in our database so where's our application there it is go to contacts let's go to Peter maybe and save this guy conduct safe successfully and here we refresh and we get the values isn't that great so this then would be New York City what about Malibu save this all right refresh that's nice now Gotham City I don't think this will work so let's save this okay the contact was saved but yeah no no values here so Google did not find anything and now let's have a look here for I look again and there he is and let's just save this guy and execute we see values isn't that great and I think this is totally enough for our map so now what we need is actually to add another method to only get contacts with values for the latitude and longitude otherwise the map will not be happy it will crash so we really have to pay attention here so now let's just add another endpoint here it is a get again HTTP or let me just copy this wait here's our gets and let's put this here but now we add the route or change the route a little bit let's just call this map and in here we call this get map contacts all right and here now we want to get all the contacts that are not deleted and where the latitude is not now and also longitudes this is not now and that's already it all right so we're going to use this function in our client so now it's time for the client implementations in our Imports we now add maps all right and now we add a map page so here we add the razor components call this map again this is a page so we call this map and we inject our HTTP client call this HTTP that's nice and now we can start with the sync Fusion map or let's well let's let's cover the code block first so that we're done with that actually so here now first the list of contacts this is a new list of contacts already and the only thing we need really is the the call to get all our contacts so again we choose on Edition on English list async and in here now we say our results is await http [Music] oh wait again there it is okay now we're talking HTTP get from Jason async lists contact API API contacts and then map okay what's Happening Here oh forgot the angular bracket and now this works and here again if the result is not null then we say contacts is our results awesome that's it and now the map now first maybe let's have a quick look here you see how this works we've got the SF Maps component could use it but it won't show anything here we need Json data and the great thing is that syncfusion provides data for you so let me just copy this here and paste it save this restart the app and now here we see hopefully yeah there it is so with that you already get this beautiful map well there's not much we can do here we can zoom in we don't see any markers or anything uh of course you'll change to that here next now but what I want to do first is actually change the look here because maybe you've seen it already there are a couple of providers you could also use for instance Bing Maps right looks like that then Azure Maps looks like that this is great but for that I think you need keys API Keys yeah there it is subscription key I'm not sure if you can use it for free so bear with me here maybe you know more then please write it down in the comments but what we can definitely use is the open street map here so let's just copy this because I'm really lazy or too lazy to type this in here so now let's save this again and wait we have to resort it restart the application and now in a second we see yeah I think this this looks better of course now we have well it is repeating but that's not really an issue because we are going to zoom in to the maps on initialization in a minute so let's just Implement that all right again we can look up documentation for even more features and you see it here there's lots and lots of stuff like Marcus bubble Legend customization lots and lots of possibilities here so let me just close this and just Implement a few simple features we've got our layout already and the next thing I want to do is actually add map markers and for that we need the maps marker settings so Maps marker settings it is and in here now we put our markers so Maps marker I set the visibility to true all right and now here almost what I want to do is we can change the shape of this thing for instance does it suggest anything no not really so then it'll be syncfusion Blazer and then Maps marker type and then see it here Circle horizontal line inverted triangle whatever you want let's just use the circle here then the data source is just the contacts and this is great right this is our complete list and it will do everything you want to see here all the markers will be placed automatically on the map we can set the height to 25 for instance also the width and then the value here the type actually is contact and this is our Marca all right and now one more thing I would like to add is when I remove the angle bracket here Maps marker tooltip settings so we can also add two tips for instance love that so let's do that Maps marker tooltip settings we say we want to see tooltip so let's set this to true let me just fix that real quick contacts and value path should be the place so we want to see the place as a tooltip here and that's that so maybe save that first and have a look get an error okay what's going on here all right let me let me have a quick look here maybe it or something is wrong with e no actually Malibu dates in New York City and values are set because I got this era before oh I see the problem Maps layer this actually has to go down here and now this should work let me just refresh this looks way better right so now we've got Malibu Dayton and New York City but again I want to zoom in here because with that doesn't look that nice so let's go back real quick and in here now we say Maps zoom not tune Zoom settings we enable this I'll just say yeah please I want to enable the user to map to zoom in to the map Jesus it's it's late again and one more thing I want to do is I want to zoom in initially so it is zoomed into all the markers and for that we can do is we set the horizontal alignment to sync Fusion Blazer and then Maps alignment and then near and then also should Zoom initially true all right so this should be it save that reset the application and there we are we've got a Malibu here dates in Ohio and New York City and with the mouse wheel I can zoom in zoom out I can move the map and also I can use these controls here isn't that great so in a couple of minutes you'll get a fully functional map in your application isn't that great now make sure to check out the links in the video description to get access to the beautiful sync Fusion Blazer components the complete source code is available on GitHub and for more videos like this one make sure to subscribe like and tell me what you want to see in the comments take care

Channel: Patrick God

Views: 15,590

Keywords:

Id: M54UdG45dwM

Length: 161min 22sec (9682 seconds)

Published: Tue Mar 07 2023