CRUD Operation In .NET MAUI Blazor App (SQLite)

[Music] [Music] [Music] hello guys welcome to my channel in this video i am going to show you demo regarding the road operation using sequel light in dot net mavi blazer app so here i just created a new project so let me explain you first the project structure of net power blazer app so in app.jaml.cs here the main page is set to new main page and in a main page dot jammer here is the way blazer review is defined and that wave view host page is pointing to index.html and this file exists in www root folder so here index.html file it's going to load all the css like a bootstrap css and the javascript like uh blazerview.js js and also here uh di we take id f defined so whatever the content that going to inject so that are going to display here and after that component type so this root component type is main component so here in a main.raiser component uh routing is defined like if what you the page you are going to navigate or page you are going to open if that page is found then this routing view going to open that page if the page is not found then it's going to display like sorry there is nothing at this address so if the navigation page found then it's going to display from this routing view so now the default layout is the main layout so if you see here in a main layout first is the sidebar defined so sidebar is like this if you see this so this is a sidebar and here in div tag navigation menu component is defined so here is the navigation menu dot razer component and here all the navigation pages like a link and that navigation url is assigned so here href like here href is empty so it's pointing to index space and this counter this page is pointing to counter page and this is pointing to patch data so this page is defined here like in pages folder so index dot register has only slash means this is the root page so when the application open that time this first this page is going to display first so this is the index dot register and after i select counter then it's displaying counterfeit so that is here so here in a page directive it's defined as a slash counter so whatever the routing you define here so that going to open from the navigation menu because here that hr pointing to counter so if i change this to something else and let me rerun the app then if the page is not found then it's going to display here from main dot register this going this message is going to display if if the page that you are going to navigate that page is not found then okay now let me try to navigate to counter page okay so now it's showing me as a disliker that routing page is not found because of that it's displaying this message so now let me change again this space to counter and let's rerun the app okay so now it's navigating okay so let's install now require plugin to implement current operation so here is the plugins that require to perform crud operation i already installed this all plugin so you can i will add this in the comment section so you can install this all plugin so to install that plugin just right click on project and click on manage new get packages and here just search for the plugin and install that plugin in your project so here i already installed this all plugin okay so now let's create the services to perform uh crud operation like getting data then adding record deleting record and so on so here i am just going to add new folder called services and here i will add new class first i will add interface i student service and the class that going to implement that interface [Applause] okay now let me create a model for it like a student model that we use for like adding record in sqlite okay so here in this student model table i'm just going to use property like student id and that will be a primary key go to increment then first name last name then gender okay so this much property i am just going to use to perform add update and delete operation so let me add method related to this in services student service so add student and that student record is going to type up this student model same way for update student then delete student okay now another property i am just going to define here is a matter that going to return list of students [Applause] okay now let's implement this all method in student service class okay let's add now uh code related to database configuration like a creating table in database so here i'm just going to use equal light async connection so here i will check like if the database connection is null then i am just going to add database the name of like a student db3 in this special folder local application data and then i will add here table create table async student table student model table so that table name will be student model if you want to use some other table name then you can just specify here table and whatever the name you want so you can specify like that way so right now i'm just going to use this student model and call this saturday here okay now let's write code related to adding student so here db connection dot insert sync and in that i am just going to pass the student model and this insert dating insert async matter going to return the number of rows added to this table so here in uh this condition it will go into like if the record is inserted then it's going to return one so same way here delete a sync and this student model okay now here for student list here i am just going to fetch all the record from this student model table and this will return data in form of student model okay so now the uh setup is ready like us to adding updating and deleting record stuff is ready so now let's add this service in mavi program.cs so here i'm just going to register service [Applause] okay so now the service registration is ready now let's add a new page called like for displaying student list and adding a student list okay so here i'm just going to add a laser component for adding and updating student okay and this page name i'm just going to set add update student okay now let me add this page reference in navigation so here in the shared folder navigation menu component is available so here i am just going to add hidf reference build with this and then link name i will set as a add edit student okay now let me run the app and let's see it's navigating to add update student page or not okay so here it displaying at edit student menu and on the click of this it's navigating to this page at add update studently uh student page now let me add some ui code here for adding student details so i already designed that ui so let me just copy and paste it here okay i need to read and have everything okay so uh this ui i just copied from bootstrap so you can learn uh regarding this from bookshop okay now it's uh showing this ui like first name last name email and the general selection okay so now let me bind this or property like first name last name email and on the click of submit i will display some message like it's working or not so let's check that so here i'm just going to create property [Applause] okay so this first name last name email and gender i'm just going to bind here so in a first name i will use this i direct bind property and here just specify the property name that i declare here so whatever the user type in this text box it's automatically going to bind to this first name property so similar way i'm just going to set for last name then email okay now for this gender selection i have like i'm using the radio button here so for that you can use added on change property and in that i'm just going to call one matter so let me declare here method call set gender and here i will pass whatever the gender selected from text box and that i will set here in this variable [Applause] okay so when i select this radio button for a mail then it's going to call this side gender matter and that parameter will be passed like a male and same way i will do for this another radio button and i will pass here female so that going to set here now another matter i am just going to create it's at student record matter and that i will call on click of submit button so here i will use on click property and i will call this add student record matter so right now i'm just going to display alert on the click of button like a button click invoke to verify this matter is working or not and also i will check this all property like it's a binding first name last name and gender detail or not okay so let me run the application okay now when i click on submit button so here at student record matter is calling and it will displaying on this dotnet mavi display alert okay now let me add some value here like [Applause] okay and on the click of submit let's see like here first name then last name and the email this all property is binding because we here we have used this entered binding property and in that i am just passing this first name last name and email okay now here enter it on change event here yeah this one at the rate on change event i'm just calling this sad gender matter so let's see if this matter is calling or not so when i select here male then this sad gender method invoking and it's passing here gender as a male and if i select this female then it's passing gender as a female okay now let's add this record into this student model table okay so for that i need to use here student service that i created for that you can use here at the red inject directive and here just pass that interface i student service student service okay now i can use this service for adding record so here add student and i'm just going to pause here student model and first name will be this then last name email and the gender okay now i will check here if response greater than 0 that means record is added okay and here now first name okay and i will set first name last name gender and email to empty so it will clear all the text box if the record is added and if some error occur then i will so here some error message [Applause] okay here i am using display alert method but you can use bootstrap model pop-up page or bootstrap some alert there are lots of ui that you can use here to make your app looks beautiful ok now let me run the app okay now let me try to add record here okay so it's displaying now that record added to student table and it's not clearing this all the values here i have added this so let me add here i need to notify ui that some property is changed so for that state has changed i'm just going to invoke this when the record is added so it's going to notify to you why that that this all property is changed then it's going to clear now all the value so let's see that okay now it's clearing all the values on the click of submit now let me display record like whatever the student record i did that i am just going to display here in this page waiter forecast page so for that let me open this patch data component so first i'm just going to change this service to i student service [Applause] [Applause] okay now here uh on initializer sync method i'm just going to call student service dot get all student and this method going to written list of student model [Applause] okay and these students i'm just going to bind here like if the student equal to null then it will display this loading message and if it is not null then on the head section table head i will like first let me change the ui [Applause] [Applause] okay now student in students object and here student dot first name okay so the from this object students object i'm just using this for each loop and inside that uh this tr tag will dynamically generated so like if this 10 student record coming from this object then tan row will be created and in that it will display first name last name gender enable okay so let's run the app and let's see like it's displaying student lists or not i'm sorry okay so it's displaying the student record here on student list space uh let's add now two button here for one is like edit editing student detail and deleting student detail so i'm just going to add here button let me just copy okay so here two button is added edit and delete but it's not responsive so let me add here the iv tag okay now here on the click of edit button i'm just going to redirect to uh this add edit student page and on the click of this delete button i'm just going to delete record from this table so let me create a matter for this here and here i will pass student model students and from this student service i will just call delete student method and i will pass your student object let me stop debugging okay and if response is greater than 0 then i will just call this on initialize met her again [Applause] like once the record is deleted from this table then i will just bind again that ui okay now here on click i am just going to call this method delete student sorry here on edit button i will call here delete student matter and this student object i will pass in this method and this is going to delete a record from the table okay now let me run the app and let's see like it's a deleting record or not okay i think i written a wrong syntax for delete button let me see here [Applause] yeah i need to vlan the application to see the changes okay let me verify it is the syntax okay yeah i think now it will work fine yeah now let me delete a record from here okay yeah it's deleting record but like it's not reflecting in ui so here me use this that state has changed property to reflect okay i need to add a record [Applause] [Applause] okay now let me try to delete okay so now the record is deleted okay now on the click of edit button i will navigate to uh this page add edit student page and there i will write a update related code okay so now here i will create same on click event and here i will call edit student method so let me create that it's called edit student here i will only pass to the id okay okay so on the click of edit button it's going to call edit student method and in that i am just passing a student id and here i need to inject another [Applause] service like navigation manager so this now i will use for navigating to other page okay and here the page name so i need to use add update here whatever the page name i have added so let's add another page called like add update student and here i will pass student id in an integer format so this here i will use add update student and student id i will pass ok here you can use any page like uh here we are calling for update student and let's uh just use this name here and for adding i will use like add student okay and here this student id i need to define parameter here so let's define parameter private as a republic integer student id [Applause] okay so this student id parameter is the type of integer that going to set from this page like when it's called update student then it will also has a student id as a parameter and that parameter going to set here so let's see on initialization that student id retaining or not so here on initialize i will just check student id and let's see like it's uh while navigating it's displaying or not so before that i need to use this add student name in navigation menu also because i changed it now let's run the app and let's see it's a patching student id from edit button or not on the click of edit button okay so it's a throwing error like an handle error occur let me see a parameter that i have defined okay so here i forgot to add this lash here and let me rerun there okay now it's working and on the click of at edit student it's navigating to this page and on from the patch data when i click on edit it's navigating to again this page so now uh for binding like let's see that student id here coming or not so again let me see here on patch data and when i click on edit okay so here student id is coming okay so now i need to bind first name last name and email this all detail here so for that now i need to fetch data from student from table based on student id so let me create a matter in student service to get that data so that student will be the single response like a student model so that student by id and here i will pass student id so let me implement this method get student by id here i will add student equal to here i will use query async on this table and i will write here query select start from okay so here this will be like a select start from this table name where student id equal to whatever the id that i am passing and this student first or default response i am just going to return okay now let me call this cat student by id method on here add update student component so here on on any slides i will check like if student id greater than 0 that means its call came from student list page and here i will call student service dot get student by id and this student iot i will pass so okay if the response is not null then i will set here our first name will be from the response then last name then email and gender okay now let me run the app and see like this value is binding or not okay now on the click of add it it's binding first name last name and the email address but it's not a binding gender so let's find this gender selection so for that i'm just going to use here like check the property and here i will check it gender equal to equal to male then it will be check to true and here i will check like female okay now other thing also let's implement save logic here at student record so here i will check like if student id greater than zero and then here update record and here will be add record [Applause] okay so here i just adding globally so i no need to repeat this code and student id will be student id okay [Applause] okay so here if the student id greater than 0 then i am just going to call the subject student method and in that i will pass this student model object and here student id will be set as like if that navigation call came from this patch data page then it has a student id otherwise that student id will be 0 so if it is 0 then just add record to student table and here i will just display now message record sale to student table okay now let's run the application and let's see it's working or not okay now here on patch data page when i click on edit okay it's not displaying gender let me see fetch okay so here that gender is not available because of that it's not displaying let me add one record with general selection okay now let me see catch data okay when i click on edit so now the default gender is selected now let me try to update record okay now it's showing me that i could save to student table now let me see in patch data so this updated record is displaying okay so yeah that's all for today i hope you like this video and thank you so much for watching please subscribe my channel

Channel: Programming With Pragnesh

Views: 15,627

Keywords: CRUD OPERAtion, CRUD Operation In .NET MAUI Blazor App, .NET MAUI, Performing Crud Operation In .NET MAUI, CRUD .NET MAUI, .NET MAUI CRUD, CRUD, .NET MAUI SQLIte, CRUD Operation With SQLIte, SQLIte Demo in .NET MAUI, .NET SQLIte, Crud Operation In Blazor App, Crud Operation Using SQLite In .NET MAUI Blazor App, Blazor App, Blazor Demo

Id: paPe68vT2Mg

Length: 55min 40sec (3340 seconds)

Published: Wed Jun 22 2022