Blazor curd operation using scaffolding in .net 8 | QuickGrid

let's get start Demo First so this is a Blazer net 8 web application and I'm I just created a scaffolding template in blazer with the uh SQL server and Entity framework and uh it is see simply uh there's a a grid quick grid using the quick Grid it's showing the a grid and also there's a functionality I just achieve uh there's a filter options over here they can filter and also so there's option to paging Nations so those are things will be Implement in In Here Also as well as there is an uh edit operations over here for example edit something and also there's a details back to list delete if you want to delete so delete also over there and if you want to create a new blog so that operation will be also provide this scaffolding templates so let's get start uh implementation so before implement ation I especially recommend if you're new so please go to my uh net real word example Channel and there is a many stuff actually I already uh created for this Blazer application with that uh simple web uh web assembly and Blazer server and many many stuff we have done so you can check out as well uh old session as well so now let's open a visual studio first so first off all you have to install your visual stud 2022 along with net 8 so this is a net 8 series so let me create a new project and here you will get you need you you can search over here Blazer once you search over here Blazer you will get that many template out that Blazer so this is a new template actually introduced with net8 and those are actually just existing one but yeah this is a new one and here I will just create a next and just name it as a scap folding and next now I'll just keep it uh you know whatever default setting we'll keep it also authentication type will be none and I will take a server version because that scaffolding available only server not B assembly right so that's why I'm using also I will choose here there is two options interactivity of the Blazer component so I will use purpose component and just created let me close that demo and bring that what new application has created over here go to the solution Explorer and here you can able to see there's a few structure of file structure over here folder structure solution structure over there so those are uh commonly we use on Blazer application this is a common there's no new things over here only one things uh that route. res. page so this is actually the separate and previously it was not separate but yeah in net it is just given the separate so I'm not going to details of this application because this is a very simple uh structure they have you know program. CS file and this is a main uh uh main program. CS file which is actually run your build applications and then it is calling your uh app know root component so this is your root component app. rer file and this root component actually uh you know just set at the body and uh whatever you know the root component we have to set like this is actually taking care all that reference as well as your uh client side and script JavaScript as well and then it is going to call actually that main layout and this main layout actually call that uh you know our body and whatever component need to load so it will load over here so like this way actually the flow is working okay and uh let me run and show you what is the default template provide by net so once you run you will able to see this three uh component okay so home component counter component and also weather component this is a simple uh but this grid actually they are creting this simple but when I create a you know when we'll create for that scolding we'll use a uh quick grid so there is a many many flexibility give us that quick GD and upcoming session we explain many many things about that quick G so let's go back to our solution and how we can create a scaffolding uh card operations right using the scaffolding so first of all what you need to do let me stop the application and what I will do I just create a one model let me create a one model uh let's call it to blog or whatever model you want just create it as per your preference so add and now just let me add a few property over there for example ID and name and description and author and that's fine for the demonstration perspective and then what I will do uh inside page right click add but once you go to the right click and add options you are able to see this option new scaffolding template so this new scaffolding once you click it will prompt you this uh this one and then you have to go to that razor component and this razor component it will provide you know two uh template so once is normal razor component and second one is a razor component uh with the Entity framework card operation right so what I will do I will choose this one and go to add click and once you click so you will get this you know dialog box and here there's a few options we have to choose that first of all uh there is a many options like you want to create a list detail delete edit create but I will use a curent operation so that all the functionality we can achieve over here second I have to choose that whatever model we have created right so just choose this and then see if it is existing uh DB context over there so that will populate but yeah it is not there then you what you can do simply you can just add okay and just add that automatically will be created and then datab base provider you can choose whatever you want so as of now I will use the SQL Server and add it once completed see once completed all the dependency and uh that process so let me build first let me build solution so that whatever dependency and uh packages are getting over here proper you know ReStore in our solution and if you go to that application uh project file you will see there are getting an entity adapter grid this will actually this one they are import and also this one also they have added SQL server and tools and then finally design okay these four packages actually they they introduce and also if you go to the pages so this folder actually they created right let me zoom in for you so this folder actually has created blog pages and if you go inside these block Pages there's a many operations they have created many uh component they create it create component delete component details component and edit components and index components so let me go through one by one first I will go to index component so what are they trying to do over here simply first they import uh that grid uh packages uh because we are using grid component so that's why they import that grid uh name space and then what they trying to do they just simply inject our DB context directly over here so that we can use whatever data we can use it right and finally we using the name space so this is our name space file and then what they're trying to do simply they're using title and this is a simple titles over here and that uh uh simple tag that whatever component we are defining over here and this is uh addit one uh one anchor tag which is actually go to that navigation we can navigate for this next component right that create component so that's why they adding this and then come finally comes to this quick grid right so this is a oneup component which is provided by net so that is also many many flex f over there like see simply you can just Define uh your class and as well as your items so whatever items you can just SP Define over here for example see this is I'm injecting from the DB context and pass it to here and whatever data we can pass it to my uh items here and then uh whatever column you want so you can use this you know property column and inside the property column whatever the property you can specify and along with using the Lambda Lambda expression whatever the turn of column property you can Define over here like that okay so this is a way uh we can use the quick grid but don't worry as of now we just little bit understand but yeah upcoming session we'll create a you know one of the session where actually I just uh give create that quick grid uh in existing application and we'll do many many things like filter searching page ignition custom filter custom paging Nation everything will do custom right and many things we will do with this quick R and that finally uh this is a template column which is know refer to our whatever our actions right we want to edit delete and uh details right so whatever actions we can provide like this and finally close this right so this is a index let me go to edit one so edit one also it's simple again injecting and navigation navigate that navigate manager and using edit form and this edit form also be trying to some validator uh validator mechanism over here and we put some labels like name description and this right and this is simple and again uh this is some on initialize what we trying to do simply we navigate to if it is not found then block is not found we'll navigate not found if it is not there that means uh block is there and we will bind that block and block we can just set it over here right similar uh if you go to details so detail component also similar such kind of things like input uh in je and then finally bind the data as like this way this is a simple component and also again initialize on initial as they trying to get the data and they're trying to do that right so this is also done then delete delete also very simple again call this delete component and few uh design over here and also this is a edit form we using edit form because we we using SSR uh server uh side stating render mode be using over here and on validation once delete so that uh blocks will call you know the delete uh this delete delete method with fire and what we're trying to do we trying to delete and as well as delete we are trying to navigate to our main page so such kind of things we are trying to do over here and finally create so this is also again edit form we trying to add our data using that fields and Fin fin we can save to data and navigate to main page so these are actually the card operation they are prepare and generated by the scaffolding template so let me run first and see in actions so okay uh actually whatever the route actually I need to do one thing over here if you go to navigation property first of all you have to go to index and and see what actually the page routee is generating so route is generating with Slash blogs right so what I can do instead of directly I can call uh here like this way like slash blogs so you can get that blogs uh page or component now see one thing um yes that is also need to highlight it so see directly if you run definitely it will not get uh uh data and it will give some error right so let me fix that error what you need to do first once you uh scaffolding completed you have to fire two command actually so go to that package. console here what you have to do add migration because see the uh DB context everything is generating but we have not actually forcefully know uh generating our know our table and structure right so that's why we have to try to do first add migration so first migration hit enter so that is done then secondly what you need to do update update database and hit enter so once you created two things then this this will be created uh in our database so let me make sure it is created properly created and not open a SQL server and connect uh your SQL Server engine and go to here and go to the database uh let me check what the database name is generated right so first of all you can go to your uh app. connection string here you can check what is that name is actually generating so this generating name is 76 BD right so go to that 76 BD 76 76b is not generating that's why because I have some issue actually my SQL Server it is not directly connected so what I can do in this case uh I have to change actually my uh connection string over here because it is not supporting uh directly so what I will do I will change uh my uh server name so this is my server name and also you can change your the DB name yeah let me change it to my DB name as well because it is very long DB name so I will change it to short Blazer app scaffolding bye t is also I need to add you know few settings which is actually uh preent to connect my SQL Server so that setting I have to add it over here so what is that setting uh that setting is simply let me remove this and add this so actually uh my SQL Server required some you know trusted uh server certificate uh allow allow required right so that's why I'm adding this tested certificate and also T tested connections and connection time out I just set it 30 second 30 minute or 30 second I guess yeah 30 minute uh integration security I set it true so this setting is fine uh this is actually not required for I think everyone but yeah in for my machine is required so let me okay once you complete what I need to do again I need to perform these two operation let me clear and let me add the ad migration second ad migration and once I add then simply try to fire this database connection now see this time I hopefully should be created go back to your SQL Server Let me refresh now this time see here this is my database name which by I I added over here and go to the tables you will get this data means that column and structure everything is ready okay now what I will do simply I will try to run and go to that blog now see page is trying to to uh uh component is rendering completed but there is no data right because we don't have a data in our DV so what I will do I'll just create a data for example this for example this and let me create once you create you are able to see the data similar we need to create another one so another one also created let me create men two more so that I can show as a paging Nation because I will Implement paging Nation as well how we can easily paging controlling over here also shorting as well as filtering so these three things we will show you in this session and let me show you let me add one more for example angular author and this see now we have five records okay so first of all what I will do I'll just create a paging Nation so that uh we can uh handle that paging so go back to your uh component go to the components go to that index space here so also the paging Nation also allowed this you know uh this uh quick grid component right so let me Implement that paging n so first of all I need to add one component that is called is here pign pator and this pator actually we have a input field which is required that paging Nation uh model right so let me add this paging Nation model as well so this is that pation model first of all I need to add one code block here so that I can add that pation model so see this is a pation state which is coming also you know which is also provided by that you know sp. net component. grid right so you can just add and whatever page size you want like you want to three three you want to 5 10 20 so as per here you can just set it that ping Nation type uh uh count over here so I set it this and one more things you have to do that like this first setting is you have to just add this component and then create your model pator pation State model and then you have to specify here so what you need to specify here also you will get that paging nation and then at the rate whatever paging Nation I just created as a model variable so you can just add it over here and once is done let me go back here see once done automatically it's reflecting and here you can able to see okay it is not working might be some issue but yeah uh let me save it and run again sometime actually it's not working directly so okay uh I think I have to add uh here navigation property as well so go back to your layout go to your layout nav navigation component and here I will add one more navigation so that I don't need to I know change the url again or again what is My URL my URL is blogs and the label should be as a blogs and if you go back back so see blog is there let me click over here once you click you will get over here and see this is also not working why it's not working there's a one reason actually uh this is actually static server side rendering uh it's now because static Center side rendering whatever component is just simply load it over here but if you're trying to interact in the server so for this paging Nation so you have to you know change to render mode to uh interactive to server so how we can do that it's very simple there's a many way actually we can do that go to your index page and here what I can do I can you add render mode and then interact tap see there is a many type right so I will use interactive server so once you put that interactive server uh I hope hopefully without stopping it should work or not so yeah it will not work so what I will do let me close and run this again go back to this and now click see now this time is working so there's a five records so that's why this is a three pages right because I just add it to item per page so that's why it divide is by three page so this is paging Nation see this is a very nice paging Nation also this is a client side paging Nation so don't worry about that upcoming session I will create a uh session where I will just Implement custom pation as well as this should be render from that server it should not R uh should not filter or you know in this client set because there is a not this is not a good practice so this is done one more thing I show you in the demo that shorting right how we can short this grid so go back to your uh here there's a one more option uh here this columnwise you can just specify short short table through so if you set that short table true this short table should also working see once I short table true this highlighted and design oping over here see shorting also working fine now one more thing I'll show you in the demo from the starting the filter I want to filter for this column so how we can achieve that that is also you know few tricks we can do that uh go back to your index page and here what I will do I'll just create a one IQ varable and iable blog whatever our model and then I just filter block L and then what I will do just whatever our DB let me create a lamb expression and DB dot blogs blog. where and here what you need to do we have to just filter whatever data we are uh passing into that filter text so what is the name of that n uh column name where I want to filter which is name and do contain and contain and here I need to pass one property so which property we how how we'll get that property that property should come uh in this column itself right so let me add first as a variable so that this variable you know in this column field we store that whatever input text variable inside this variable and this variable I will to pass as a filter over here so that the data Sho can filter and give us to us and then finally terminate this uh query and then call it to this filter blog in our here directly replace to that whatever previously we have done replace this and one more thing actually we have to done this is filtration done and variable setting also done but this variable how we can bind you know in this column so that part is done so how we we can do that it is very simple again simply what I can do uh I need to create this proper columns and a closing uh component I will put it over here and then inside I'll just create uh one options over here column column options and then also just close close that here and inside here I'll just create a simple TI and inside di I'll just ask to as a input box so see what I'm trying to do I just create a Di and I just put that input box so that whatever input box I can just bind as a use that you know bind event okay and just bind whatever property uh field we have just created so that will will bind automatically and that's it right and let me okay let me rebuild and apply so go to blog now see once I apply this here it is just showing s triple triple line and once I click you are able to see one input box and you want to filter see if I filter a so whatever data a which is getting from the DB they're trying to get and it will show over here right and then you want to remove so you can remove it so simply you can just achieve this you know card operation with this you know nice quick grid uh with paging n shorting short table and also filtering so we can achieve is very quickly so that's why I show you but yeah upcoming session we'll show in that quick Grid in our existing application with the whole all the whole features so keep watching keep tuning and don't forget to like subscribe and share

Channel: DotNet Real world example

Views: 2,804

Keywords: blazor crud operation, .net 8 scaffolding, quickgrid blazor, sortable pagination filter, blazor tutorial, .net 8 coding example, web development, blazor components, Blazor curd operation, Blazor curd operation using scaffolding, QuickGrid, pagination, sort, sortable, filter, Blazor curd operation using scaffolding in .net 8, curd operation in blazor, CRUD Operations Using Blazor, How to Perform CRUD Operations, How to Implement Blazor CRUD, Implementing CRUD Operations in Blazor

Id: DXFa4zJ9tK0

Length: 27min 55sec (1675 seconds)

Published: Tue Jan 30 2024