.NET 8 Blazor Fluent UI: A Comprehensive Guide to CRUD, Data Grids, Dialogs, Toasts 🔥

hello guys welcome back in this video we are going to build coud operation in Blazer and fluent UI so let's let's create one folder laser on command type.net new list this gives us list of template installed in our computer so in this tutorial we are going to use plint UI pleasure so if you don't have this installed so you can watch my other video so for creating this fluent bler we need net new PL Blazer so our application created open it code do so this is our folder so let's run what inside net was run this is our default template provided by FL UI so in this tutorial we don't need these things so remove it from our folder so first of all remove counter component weather component and also from man layout CL header NAB menu and FAL type A for refresh restart application this is our application it's clean now so for cl operation we use new get package EF Cod and SQL light to install these things we should install net Gallery net package manager this one new package manager so I have already installed you can install from here and for installed EF code you can typ control CP and no get Gallery so open new get Gallery here search EF code we have this package install it another one is s light this one and other is tools this one so everything installed so close all tab first of all we create data folder data inside data folder you can create you can create one class name it f DB context this FDB context extend from DB context comes from Entity framework code so create one Constructor plus DB context options which type is app DB context so options Mage to Bas construct of ss okay so register in program file so here Builder do service H DB Factory type app DB Contex so we can pass we can Lambda option goes to option do use SQ light okay here data source app name it customer. DB okay now create model folder let's include our model models so name it create new class called customer property we have ID ID from string so name can be knowable string email email can be avable so this is our setup thing is okay now restart application. net watch run everything is okay so now we are going to display data in our homage so close think pages and homepage should remove these things WR here customers this is this one this title so before doing anything let's create first migration command is net EFS H initial so this is our migration we have nothing here why because we we don't include trible name inside our FDB context so go to data and have DB context you we should include here DB set of customer name of our table customers so now let's create initial migration so it's already we can remove our previous mation by by using command net here we have mations remove this removes latest migration that is initial so now clear everything net yeah migrations at [Music] inial so this is our inal migration table name customers ID name and email are column so now update database. netf database update so this is our customer DB or open it we should install SQL live this extension so install it and for open this customer DB contr P open database and name is customer DB so at the bottom you can see SQL Explorer so here is our table integer ID name text email text so this is empty now so we can fit data from here so we need right on model creating so protected overwrite on model creating so here we need model builder. entity we have customer entity do has data and can create some data from here new customer ID unit ID one [Music] ID to so let R mtion okay our migration is off and this is our new migration so data object is this this this so list update database database update now we can see let's refresh customer we have two customer okay close everything and list goon contrl P homepage homepage so we are going to render this list in homepage so first of all we should import something in our import pleaser so here we should using microsoft. ef4 and another is FL pleasure do data we need this things these two things so here we are going to render list of customers first of all inject here I DB Factory I context DB Factory so type is at DB context DB Factory let's overwrite on iniz isnc so protected sorry we need code protected overr right what we have on in slice as sync we need these things okay private appd context context can be these things it should be properly get and set this context is DB Factory do create context and base do p slice overwrite as sync T okay now this can be knowable private list of customer and customers can be no the T name custom in import folder from here import. models okay let's close it customer initialize customers context context customers do to list list a sync to get list of customer for is and customers this can be notable customer. name net was ear and B customer for rendering this list we use fluent data GP go to fluent blazer. net and here have different type of data grd available so we use simple one let's copy these things and past in our we don't need this now so let's remove these things and rename it customers so now we have fix our type iable of customers so we need result in result and soorry we have customers here customers customers [Music] to result is quable we have ID name and email so we don't need these things start control C Net was [Music] done for sorting our data grid we need to enable render [Music] mode interactive server so let's say is [Music] build was done okay it's work is our PL data GD we need loading indicator if there is no data or customers is [Music] null we set Flint progress TR and with style withd can be 30 pixel height 30 pixel okay otherwise so data great for making this small container we can use PL grid so WRA this component with fluent grd [Music] and let's justify justify content space between so this don't work because we should wrap this with Flint great item okay so we need to give some value for XS to it okay now we we have eight column value this's stop server and restart so this is our gr column colum we have space between so we want to make it Center okay we have it Center so let's give some margin from bottom to bottom bottom from bottom and top so margin top turn 20 pixel and margin bottom 20 pixel okay as we have Center we can seting this by email need one extra column property colum titles acction acction and go we need here template column [Music] in int two button one for delete and print button variant appearance appearance do outline and delete Let's see we have delete button and other button should be plint button reference uh we need one asent okay our button also so for adding icon in front of this button you need to install new new get back package called icons so go to Icon and FL icon package so for net CLI copy from here and stop for past it so it installed so let's include here icon start so icon should be delete icon with color error and delete so restart server net was run look we have delete icon in front of delete text so for edit we use another icon so here icon start go to edit icon so where this comes from this comes from here icon again sour edit so we have this icons here so here save now we have edit with [Music] icon now now include our heading for our table so plint step plint label typle P do pin pin headers so let write customers and and is plint button so button with text add new customer and browser we have eight customer so for separating this two part customer and add new customer so we need one plent spacer it automatically separate we have now separated One customer and one eight customer so we need one icon in front of add new customers so search here person let's use one of them this person add so let's copy icon start from here and use it here with we have person eight okay person eight let save and look add new custom with color uh success okay we have successful now let's W this table with border B order one pixel [Music] solid this is the border so let's do this inside our front [Music] grid okay here so it look like little beautiful so let's WR border a d plus 2 pixel this is not enough we to five is okay this is our hom page and beautiful table with FL FL grid [Music] now so let's add one aat column so property template column title will be aod and Aline Aline [Music] St [Music] store so inside here we can use Persona CL Persona and image size will be 30 pixel initials text. name cost dot two string do two for so it could be no let close it build application what strong so we have aat let's Implement update and add operation so first of all create one phase one file called P do razor space should be [Music] slash edit edit [Music] customer and another phas edit CER SL ID integer [Music] title P title [Music] so face ITT [Music] ID it's not n this means 8 customer otherwise add customer so we name it ID private in ID get set canable parameter should be public okay it can be null this build edit form s we have mod here we need a one model private customer [Music] so it can be know Supply from P this should be public we need render mode interactive server stud seter and geter here course more [Music] rep FL gr item so here XS small create item let's make forood justify content Justus defy content Center okay let's save and lo now let's go to customer phone let's make it customer form customer form slf okay this is eight customer so we do not have ID so so if I have pass one so we have Ed customer so it's okay impl eight customer first so include one PL text in text field variance input. field will be C name and B h b CER name okay this could be now another field is print text field friend PL field so find F [Music] let's look we have to F this pass label here to email now we can see two P let's make with 100% And this one also 100% with 100% so it's okay so let's just make XS in FL GDs and wrap this into PL [Music] card okay let's save and run okay we have home input print button variant [Music] name it Ence should be. isent so we have eight customer button another one is cancel print but cancel this can be fluent anchor okay so is R will be customers sorry we want to add to homeage so let's test this store application and so let's run again cancel button and if you click here we go to there so in customer form have cancel instead of showing eight customer this could be dynamic like pH title so let's save it eight customer so pass one here we have Ed customer we remove from here we have ADD customer now Implement how to add customers in [Music] IDP Factory context Factory Ty app D context so DB Factory create one AB D context context set and this could be not protected overwrite async TXS of uniz ASN so here context with DV Factory from here this DV Factory create D context okay so we have a tax now if we have ID is n as customer with new customer otherwise customer will be a [Music] custers with ID now let's link our edit in this Buton go to homepage here we need rename this with flint and need this and ref will be at customer form and context and ID pass through this let's save and let's edit we have form with initial value B by flu text field we should includ very evence evence prints okay cancel it we have button this is our edit form and Link this add new customer to form so let's rename it plint anchor and S should be SL customer form okay let's click here we have customer form we have done with our form let's make one save customer method let's make private syn have save customer so if id id is not n we need to update our customer so customer model pass customer model here this can beable this could be otherwise Contex [Music] customer. [Music] customer context s store it into result if we have result greater than zero this means we have success results then we redirect it to customer homeage so we need to inject navigation manager sorry navigation manager navigation [Music] manager navigation managers now let's navigate to navigation [Music] manager manager navigate to home so let's zip and test our application we have our form go back reload it let edit with [Music] okay update with name we have forget to add save button let's add on click save customer so say customer let's refresh our form restart our application uh let's edit one or email L J okay we have updated customer here so we have Implement Ed it now let's show some tost need to inject dialog [Music] service dialog service so let's so dialog here dialog service. sour success [Music] customer customer name updated so and let's copy it and customer edit successfully upd it successfully so for dialog service we need to include main layout we need here FL dialog provider with render mode render mode interactive interactive server server key so let's save that's it and needit new customer so we don't see anything because we don't it immediately redirect to homeage so to so to we want we can Del tax. delay one we need wait here so yes edit our application edit our form with updated dat so okay you don't see anything restart our application and was upd okay customer update so it's now test for add customer so let's add new test customer test customer add customer test add Su okay we have successfully implemented eight customer and edit customer so now we are going to build delete customer with confirmation so let's start so let's close everything go to homepage and let's break down these things into private is sync wa load costom M sorry we have task can be null okay so let's wait and include customer here can use this [Music] function dialog service and tost [Music] service okay let's add one method private Sy tax so [Music] from fa dialog we have dialog service. confirm so conf from missing are you sure want to delete and primary action text is no or our model title delete [Music] customer so we have result dialog do result we need to avoid this result dialogue and this result also if we have result cancel not cancel we have when user click s then we have to if user click s then log is Click let test our application at this point let's type this's edit nothing happen because we don't include on click event so [Music] find on click event in this button click goes to confirm so confirm missing let's save now let's just confirm yes here is our dialogue so R want to delete so if us click no there nothing happened if user click yes then we have S C so in this case we can delete our [Music] customer so let's make one method public a delete we need one ID context can be knowable and customer do single or default S ID go to customer id id if result or we can say if we have customer we don't have customer then tost [Music] service that so er customer with ID let's say one ID ID not found okay so we have customer is null then we can see this to return on this otherwise context remove and [Music] customer uh result from Contex sh s is sync sh SES if we have result if we have result greater than this since we have success so we can s we can display tost service tost service. so success load customer sorry load customers we don't have result then so to service so eror customer delete so uh we have delete method if we have cancelled then we have called delete method sorry delete delete ID where is I we have this ID comes from here this means we have edit I from context. ID so let's up server and run once [Music] again Let's test look we have beautiful dialogue then if I click s remove it okay so uh we haven't seen TST message here why because we don't include in main layout so we need to include here so print toster provider and render mode should be interactive server server so let's test once again refresh it click yes okay customer successfully deleted okay so we have covered for operation in this video so let's one let's create test customer test gmail.com and it so okay [Music] and delete s edit edit it and it okay everything working now so at last we need to dispose our contracts plus we need to dispose our context if we navigate away from this component so probably qu dispose okay context dispose okay test now things working and delete is thanks for watching so if you like this content so please subscribe my [Music] channel oh

Channel: Code with Pushpa

Views: 4,203

Keywords: blazor, .net, c#, fluent ui, .NET 8 Blazor Fluent UI CRUD, .NET 8, c# 12, Server-Side Blazor, Entity Framework, blazor webassembly, blazor tutorial, Razor Components, fluent ui dialog, fluent grid, fluent data gird, fluent dialog grid, fluent toast, blazor crud, code with pushpa blazor, Microsoft UI Blazor, enhance navigation, crud with blazor in .net 8, Blazor Example, blazor ui, fluent ui server, fluent ui sorting, blazor toast notifications, blazor confirm dialog

Id: wuyHRnpXpgM

Length: 61min 56sec (3716 seconds)

Published: Sat Dec 09 2023