Blazor .NET 7 CRUD using ADO.NET & Stored Procedures | Blazor CRUD Operations | C# Blazor CRUD

hey guys how are you in today's session I decided to record a video about blazer.net 6 credit operation using edio.net and store procedures okay so in this video basically I will show you how we can perform the credit operations uh in laser on dot Net 7 using adio.net with store procedures uh the dot Net 7 was released few days ago and it is the latest version of dotnet so we will see the crew depression uh with the latest technology which is dot Net 7 with the Blazer right so I will perform all these steps one by one for completing the video right so our first step is to come to create a database to create a table and to create store procedures and then we will move forward step by step okay so I am ah going to the Microsoft Visual Studio uh Microsoft SQL Server management studio right now here let me create a new database and the database no name should be pleasure current yes it should be the uh it should be the the DB name okay and now I will create the database okay now here my database created successfully now lets me add here a table I will add a student table and in the student table I will add some columns like student ID uh print first name us name okay and here should be the email address of the student and gender okay and create it done so these will be The Columns of these students table now the data type of these column will be integer for the first name I will use n bar chart okay and its length should be 150. copy these one paste here and paste here also for the email address the gender should be 10 characters okay and for the created on I will use the date time column okay now this column should not allow null values and let me also uncheck for the other columns okay I will make the student ID as a primary key and lets me increment the student ID by One automatically when a new record inserted inside the table right no if I show you here I am at the first step I will create the database the table and the store procedure right now I will give a name to this table and the name should be students right create the database table now close these one just refresh the table and see here whether the table created successfully okay the table created successfully if I just run a query and see the data inside the table like storage from students control a okay now currently we have no record inside the table no I will no create the store procedure for inserting the data for updating for getting the data and for deleting the student record okay so I will basically create uh three to four store procedure okay now I will first create the store procedure for inserting the data inside the student table okay so use the keyword create and then procedure and here you have to give the procedure name okay so my procedure name will be uh right add new student and here I will pass some parameter to this store procedure okay and just press enter type here the keyword as and then the keyword begin and the keyword and okay now let me post a first pass here the parameter to the store procedure so the parameter will be first name and it will be n uh 150 right now let me also pass the other parameter okay and it will be the last name okay it will be the email address it no let me also put here comma and here we will pass the gender and here I will pass the I think these are the enough parameters to restore procedure right no here I will write the insert statement for inserting these parameter to the student table whenever we call this store procedure from the Blazer application then we have to pass these parameter to the store procedure and then we have to insert the data inside the body of the store procedure so it is the body of the store procedure right now right here an insert statement insert into students and values should be of the parameters that we are getting from the so procedure parameter okay so the First Column name is first name last name email address and and gender and created on okay so these are The Columns of the students table okay I will paste here and just append the at the rate symbol I will get this first name from from the show procedure parameter last name from here and email address from here gender from the parameter and we will get this parameter from the Blazer application okay and for the created on I will use the SQL Server built-in get it function so this function will get will give us the latest date time okay so our first store procedure is created successfully now let me comment this store procedure and I will paste here oh sorry Ctrl Z let me copy this one and paste here uncomment okay now I will create here the procedure for updating the student record update student card okay now in these store procedure I will pass all these existing parameter that I am passing to the add new student store procedure but I will also pass here one additional parameter from the application and it will be the student ID okay because I want to update a particular student record with the student ID so I will also pass the student ID from the application right now remove this statement and write here the update statement of SQL for updating the student data update students set uh first name is equal to first name last name is equal to last name and email address is equal to at the rate email address and gender okay from the gender we are student ID is equal to the student ID okay now I will update the student's record with the student ID with the student ID that I am getting in the parameter of the store procedure and I will pause these all parameters from the from the Blazer application right now also create these store procedure sorry guys Ctrl Z run uh incorrect syntax okay let's make copy execute okay no Ctrl C and I will also comment these two procedure because it created successfully Ctrl V now I will create a store procedure for deleting the student data so my store procedure name will be delete wouldn't record okay now in these in the parameter of these two procedure I will just pass a single parameter a single variable which will be the student ID and I will delete the record with this ID from the student table okay did the from students we are student ID is equal to the parameter that I am passing to the store procedure okay now run these store procedure okay the the store procedure created successfully now I will comment this one and lets me move towards the Final store procedure and it will be the uh get students card okay and here I will write the select statement like historic from students right no in in the in this store procedure I will not pass any parameter so let me remove the parameter okay and I will execute know the store procedure okay the store procedure created successfully now I have created four store procedures uh the add new student for inserting a new row inside the student table the update student regard so procedure for updating the existing record of the store procedure and these two procedure for deleting the student record and these one is for getting the list of students okay now let me check the word uh file the steps that we have defined no we have created the database the table and the store procedure so our this step is now completed okay no our second step is to create the projects right and then we will move towards the next steps so I am going to the visual studio okay and I will I am using uh the 22 Edition at this time so right click run as administrator here I will click on this template and here lets me select let me select empty project is there any option empty empty project for sorry guys I will add here the Blazer app directly so Blazer web assembly from the list you have to select Blazer webassembly app and you have to add this okay select this one and here uh you have to give the name so Blazer dot web okay no my application will be saved inside this location if and if you want to give another m to the solution then you can just give a name to the solution so I will give here an amp to the solution Blazer current app okay now it will be the solution name click on next and here from the drop down I will select the latest version of dot net which is 7.0 at this time right now leave all other option as it is and click on create guys I will tell you about each and every step um about in the project uh I will show you all these steps are the necessary things so keep watching the value up to the end right so our project created successfully now let me see the structure of the folder okay you can see that here we have all the required uh I mean file structure and important files now let me run the project whether it's working correctly or not okay so the project creates it successfully and you can see that the default template is attached with our project that we have created just in the visual studio okay now go to the visual studio and open the solution Explorer and here I will know add one two more projects okay now I will know and I will add the blazer.server app so right click add new project and select here laser server okay now I will use these Blazer server app for the api's purpose right now select this template click on next and give here a name like blazer.server okay and click on next select the dot Net 7 version also for this project and check this one and select none from the drop down for the authentication tab right now click on create okay now close this template and here you can see that our second project is also created successfully the blazer.server now I will just add one another project for our for maintaining the entities for maintaining the classes of this whole solution right now new project and here I will select class Library okay and here you have to select this option a project for creating a class library that targets.net are DOT net standard and here the project name will be class Library okay and click on next and give here a name to this project like Blazer dot shared okay because this project will be shared by both our server and web app that is why I am keeping the name as Blazer Dots here Okay click next select.net 7 click create and close these class okay and also delete just give me one minute I also delete this class so here you have basically three projects inside the solution the blazer.server these project will be used for our apis okay the blazer.share in these project basically we will create our entities the database uh table entities the data or common entities and any other type of entities okay and here we have the blazer.web app so basically these project will be used for our front end okay and I will now give reference of this project in both our server and web app no right just expand these the blazer.web right click on the dependencies a project reference and give here the reference of laser totes here click on OK now I will see here the reference of this project okay you can see that the browser blazer.share this project is referenced by blazer.web and I will also share these the shared project by blazer.server Okay now click right click on dependencies ADD project reference select Blazer dot share and click on OK and just let me see here the project reference you can see that the blazer.share project is also referenced by these laser dot server okay now let me rebuild the whole solution so that we have no error project created successfully sorry rebuild successfully now let me see the notepad file we have also performed our second step now I will create the student entity class now copy these one I'm just copying the name okay now I will add the student class inside our shared folder uh for these for the student table right in our database now expand this project just add a folder with the name models right and here in the models I will add a new class and the class name should be student entity.cs right and here we have successfully added the class now just keep easy at his uh public class student entity now let me also add here the properties for the student table if I just go to the let me run a new query select historic from students so you can see that we have total uh six columns in the student table now I will add attributes in our C sharp class for all these columns okay now just right click copy with the header and go here inside the blazer.web app let me stop the application first okay here I will add the properties for all these uh column copy these one public int student ID just one minute okay so I will add the attribute also for first name for last name for email address for gender and for created on just remove these line of code and no I have also to Define here the data type so it will be string it will also be string it will be string and it will be string and this column will be the it will be the daytime right control s and rebuild this project sorry just build this project okay so the project built successfully no let me see on the notepad file okay so create student NT class okay we have created so mark this step as done okay uh no I will go to the even okay now create ado.net edio.net create update read and delete functions okay now I will create the C sharp functions um and inside each function I will use edio.net for creating a student for operating a student record and for reading and deleting a student record so I will note was this step right now go to the application and go to the blazer.share uh folder now here lets me add in the in the blazer.server I will just give me one minute guys in the blazer.share lets me add a new folder here I will add the folder with the name services and inside the services folder lets me add a class print which is dot CS okay now create these or classes created successfully now inside the class lets me Define the connection string ah yes string connection string uh thing dot empty heady step okay and inside the Constructor I will set the value of these connection string now copy this class name and here lets me create the Constructor okay changing visibility of class 3 where the starting the application okay we know here let me read the connection string private eye configuration let you see the namespace install package okay use local version now I will install this package from the new gate and this one and click on install okay and lets me go to the project the package installed successfully okay right click control Dot and import the namespace okay the namespace imported successfully uh now let me also use here the read only okay I configuration copy this line best here no set the value of the configuration from the parameter that we are getting don't get connection string yes and I will pass here just the name of the connection string okay now set the value of this variable okay now inside the Constructor of this class basically I am setting the connection string value okay Ctrl s no I will set here the connection string okay so I have already copied a connection string just for saving the time lets me go here and copy this connection string go to the application blazer.curred and go here inside the Blazer Dot Blazer tot server okay and in the app settings.json lets me let me paste here the connection string okay so it is the connection string my server name is this one and my database name will be database name will be Blazer current let's copy the name okay and the server user ID is sa and my server password is one two three four five six at this time and my connection string is DB connection now go to student services and just pass here the connection string name right okay now I will add here the create update delete and read functions okay now for this purpose uh I have also created the create um update and delete functions so that we can save our time that is why I have already created just copy the functions go to your application and paste here foreign let me import the name spaces it's showing me that I am missing the SQL client package the system.data.scale client package so I will install this package okay install with package manager click on this one and install inside your application I accept the package installed successfully close this window and lets me import the namespace connection string okay just replace me the name of this variable okay now here you can see that I imported four functions get all students eight student update student and delete student now let me first show you the first function the get all student so these function basically will read the data from the student table in the database and then we will show the record inside our page right now you can see that I am just creating a variable of type list okay and it is the student entity variable no I will return I will first fill data inside this variable and then I will return from here now I am using the SQL connection here just I am passing the connection string here right and you you see that we we are setting the connection string here inside the Constructor of the class right now here I am using the SQL command class and inside the Constructor I am passing the store procedure name and the connection the SQL connection class object okay now let me copy the store to see your name are getting the student data okay get student record control C and I will paste here these two procedure name guys ah no this kind of code is basically the edio.net code with store procedure for getting the student data right now here you can see that I am using the command tab F2 procedure because I am using store procedure let's suppose I am using plan text then I will pass here text okay now at this time I I am using store procedure control s now I will execute and then I will read the data one by one line by line now let me remove this column because I am not using this one ah and I will read the student ID the first name the last name the email the gender and then the date time okay uh no you can see that I just create an object I am setting the column of this object and then I am adding in the main list of student entity and then finally I will return the student list guys I think it is enough about this function because I hope you are already familiar with the C sharp now let me move to our second function the add student now this function will basically add a new regard uh inside our table and it is the store procedure name let me say yes add new student copy this one and paste here okay uh and here I will pass the parameter first name last name email address and gender if I see here first name last name email address and gender okay no I am not passing these uh and let me remove okay close these one it is the procedure for updating the student record update student record is the store procedure name lets me check update student card copy this one and paste here and I will pass these variables the student ID first name last name email address and gender student ID first name last name email and gender okay now let me close this one and here I am using these store these function for deleting the student record let me see the store procedure name copy this one and paste here okay no or part of creating the audio dot net functions completed here no we have created basically four functions for the different credit operations right now let me add here uh an interface with the name I student services inside the student services class and I will also show you here the steps that we are performing create student list page okay so before moving towards this step lets me also add here an interface and the interface name will be High student services because I am creating for the student service class I student Services Okay click on ADD and here uh I will add the signature of all the classes that I Define inside the student services class no copy the signature of this one signature I am just copying the signature are our definition you know Ctrl C go to the interface and paste here so I I just pass here this uh signature of the functions now I will copy this interface and I will inherit my class from the uh I student interface basically I am using the dependency injection Concept in this laser application that is why I created the class inside the class I use the complete I read the complete code and then I just created an interface for this class and inside the interface I you know that I declare here just the signature of the functions now inside my blazer.server app I will just use this interface and not the class here in my blazer.server using the dependence injection right don't go to the [Music] brain.server project go to the program.cs now here I will add the uh the I will register the I student service and student service class I will just add in here in the services okay now we can add here like in this way copy this line Ctrl C and paste here now here I have to give the interface name okay and here I have to give you the class name remove the I okay no V register or Services inside the program.cs of blazer.server app no our fourth step is completed these one right okay guys now I will move towards or this step for creating the student list page okay now go to the project and let me move to the blazer.web and here go to the pages and I will add here the student list page now just copy this one and paste here I will rename the existing one uh students list okay just open this page and here first of all you have to replace the URL okay students list will be the URL of four page and let me give here a title to this page students list okay and also I will give a title here this line of code and this line of code okay yes this one and here remove all these line of code just keep this line okay remove this one and also remove this one right I will declare here a variable for these students for the students right now go to your notepad because I have already copied here some code so I will this variable and this one right to an initialize essing okay I will use this function at this one okay let me give here a name I will declare here sorry guys a list of student list okay student and I will set here the value of student list okay look at the table let me show you some regard like student ID uh this one and here we will show the first name of the student okay the last name of the student and address sorry lets me show give here a column for the gender and our final column will be created on okay now here I will use these variable the student list STD and lets me put here the values for all these columns get the rate STD dot student ID so let me see whether I am doing all the steps in a correct way okay just give me just give me one minute uh I think I am doing each and every step in a correct way but I am getting an error okay protectedly student list okay I am using here STD Dot I think oh sorry guys sorry sorry uh I have just to use the correct class name the student entity okay Ctrl C paste here and let me import the namespace also okay now I have no to to define the column student ID control D and first name for you first name and address and here I have to give a column for the gender okay and the Creator done right now here I will make an API call for getting the student list first I will comment this code and lets me add a menu first for the student list so copy these URL and go to the blazer.web app go to the shared folder now menu and here Ctrl D okay and I will give here a menu for student list friends list lets me run the application and I will show you know the menu okay now we have here the student list click on this one and you can see that we have just an empty student list now I will fetch record from the database so that we show inside this table okay now close the application and go to the SQL now lets me add here um a row some two rows to the student table so that we can show okay insert into [Music] students okay values I will just add some dummy data okay first name last name email address gender create it on okay copy these columns oh sorry guys I have to add the values okay so the first name let's should be null the second name should be also should be like it should also be null okay and the email address should be one two three red test.com okay and gender is male and created on let's we should we use the SQL data and time function and I will insert This Record let me also add one another row Elena uh last name should also be Elena and here let's meet give the email and female okay insert this row let me show the data now here we have basically two rows now I will display these two row inside our Blazer application right now go to the just close the name menu go also close the program.cs go to the student list and uncomment this line of code and here no I will make an API call uh for getting the student list okay now let me Define here a function wait get students list okay and I will Define this function below here protect it okay I will use the async await mechanism task get student list okay and inside this function I will set the value of this variable to something okay you just comment this one at this time lets me move towards the top of this page and I will use I will call an API for getting the student list now as I explain earlier that I will use the blazer.server app for creating the API okay now here lets me add a folder with the name controllers if I just see the name the right name is controllers now copy the name it is my one another project okay now I will add here a folder with the name controllers okay now inside the controller lets me add an API controller okay and click on this one click on API controller and here I will add I will add an empty API controller now give a name to this controller student uh sessions controller okay yes sorry the name should be student Ops controllers to yeah I mean student operations controller Okay click on ADD here I will add an API first and it will be the HTTP get okay now let me add here the API public or sorry I will just copy an existing code um yes these one okay uh it wouldn't list okay remove these one and here I will return [Music] of the student return okay now let me create here a variable of type list and I will pass here the student entity and I will return this list but first I have to fill this list from the database so for the database operation you know that we have created inside these services on the student services class where we have different methods okay if I just collapse you can see that we have the get all students method right now I have to first use the dependency injection inside the controller I will use a Constructor and inside the conductor lets me use the interface the I student interface okay now copy this one private read only I student services student services okay now let me import the namespace copy these one paste here and just uh give another name to the variable okay student services should be equal to the parameter to this one of the Constructor okay now it is basically the dependency injection concept right inside the Constructor of the student Ops controller I am just injecting the interface right now copy this one and here I will read the student list friends get all students okay it's giving me an error can I please convert okay to list yes then I will read the student list and I will assign to this variable and I will return the list from this API but I will show you just these method if I go to the implementation and here you can see that this method is defined inside the student services okay now go to the student apps controller let me also give here a route to my the EPA to my these API so the root will be like API um hence sorry students and here I have to give a name like get students I will use this complete path just copy this one go to the notepad I am here get in in the five step for creating the student list okay I know I will just copy here the complete path like in this way we also copy this part for making a complete path in here I will give the the base URL okay so for getting the base URL of the blazer.server app right click go to properties and go to the to just get the URL of this project I think I am doing something wrong no I will not get here in the normal SPM you see application we are getting the URL in like by clicking uh on the properties and then to get the URL but here there is no option so I can also get the URL by just select this one as a startup project and run these blazer.server and here I will copy the URL of this project close okay my complete URL okay copy this complete path it will be the path for this API okay for getting this to student list now go to blazer.server go to the pages the student list and here I will call this API okay so string API URL is equal to this one okay now here I will use the HTTP client for getting the student record ing sorry variable response await um HTTP Dot it string async okay now here I will pass on the URL just see here these method takes the URL as a first parameter and here I have to pass the URL API URL okay double sorry response Dot foreign [Music] control s just commit this line at this time Ctrl k c now I will select these as a startup project and right click here properties and now I will select uh multiple startup projects okay so I want to run this project and this project at the same time right no I will select this one is start and I will also select this one as start and click apply and okay now when I run the application this project the blazer.server and blazer.web both of these projects will be run no is my server app okay blazer.server and it is my blazer.web app now put here a debugger okay go to the blazer.web and click on student list just go here the debugger is heated no step or step or you can see that I just get an error if I show you the error showing me that access to fetch student list from origin has been blocked by course policy okay these message showing me that I am not able to get the data from the server site app from our blazer.web because the server app if I show you my server app sorry this one if I show you my server app so these server a basically not allowing my blazer.web app due to the course policy so to bypass this error I have to add few line of code inside my Blazer tot server app now copy this code which is a I am using this code in one my of my another application so it is basically an e-commerce application with react KS if you want to get this project you can just comment in the comment box okay so I have to copy this code go to your blazer.server app yes blazer.server as these two kind of things attach when we run the application if I just stop okay now these things runs okay go to the program.cs and just head here the code if I just added the top okay right no just eight at the top V and here I have to pass the this variable basically these line of code means that I am allowing any application to access my apis with any header with any method okay from any region and let's suppose I want to not allow all types of application then I have just to specify the URL of duplication and for which I want to give access to my apis then I will Define here the URL with a comma separated and you have just to uncomment this line but at this time I will allow all the applications so Ctrl s and you have also to add one another online if I do the bottom okay so you have to also use this line stayed here and copy these and paste here also okay now let's see whether we are getting a hit on or these API or not now I will run the application again it is our web dot blazer.web app and it is our blazer.server okay now I will click on student list Apple step or it's just return me an error okay it's showing me an error so for removing this error I have also to add these two line of code inside my blazer towards server app no Blazer dot server go to program.cs so it is a one time setting and after these you have not to add this kind of setting um just add one time okay remove this line and run the application again a blazer.server go to the other app basically we are running two simultaneous shape at the time the Blazer tote wave the Blazer tool server so click on this one and step or step or okay you can see that our API is now heated successfully don't click on next next and here I have got two rows from the database the first one and the second one now click on continue and here I have got all the data inside my uh if I just show you here to first name okay no copy this one go to the google.com and paste here guesting s convert to last list okay type here like in this way convert to Json HTTP okay I just forget the sentix for converting the API result into Json oh okay so we can convert like in this way copy this line of code and go to your application just paste here okay and here I am getting an error of the application so that we can see does not contain if I just get async okay okay now I will get the response body Json and I will then convert these Jensen into my into my student list okay student list is equal to Json convert okay I am missing this Library no I will install this Library into my application Json convert go to your blazer.web app right click on dependency add project reference sorry add new get package and here in the browse option and type here for Newton soft Json and select the first option and install so basically these will enable you to convert Json into list and list kind of data into Json okay control dot I am importing the namespace you can see that the namespace imported successfully no I will congestion convert dot deserialize object okay now I am converting the Json into my student list okay now just pass here the Json paste here okay and first here the list of student entity copy the student entity and paste here okay put the student apps controller remove the debugger from here and run the application again now we will successfully get the student record I hope at this time go to the blazer.web Okay click on student a post Depot and here let me show you the Json data okay the Response Road body and no I will show you the student list we have got two records now let me remove the debugger and continue okay now you can see that I have just read all the student data from the database successfully and I am showing here inside the Blazer application if I go to the database select you can see that we have just two rows at this time and I am showing these two row inside my application no I am moving towards the next step which is uh eight student page with functionality okay so or these functionality is completed we got all the students required successfully now I will just add a functionality for adding the student the card inside uh inside the inside the database okay now let's we continue or this step go to the application stop the application and let's be add a new page copy this one Ctrl C and paste here okay and rename the page it's student okay and here give a URL line of code and this line of code also yes this is enough code also remove these then of code okay and this one also and here I have to give a title to the page at student Ctrl C and also paste here I will add here a form for the student right so I have already already made from if I just copy from here copy these from okay and paste here I have to use a variable for the student entity right now copy these one and paste here and rename it student entity okay and let me also and give here a name student copy this one and replace with this one I am using the student entity model no lets me replace the other thing with the student sorry guys it will be the model name student entity and I think I am doing a missing Ctrl Z yes like in this way okay copy and paste here so you have to create an object of student entity and then you have to pass here as a model and then just replace for the friend DOT first name okay also passed here for validation okay and here I have to pass for the last name last name okay and here you have to pass also these one for validation of the last name okay first name first name okay and here it is our last okay copy this one paste here for email and for gender right yes I am getting here an error because the function is not defined at this time okay I am getting there due to this reason so I will also Define the function email address and just give here a label okay dress okay um first name it will be the gender okay and finally I will Define two functions for the save and cancel right so the email address and it will be my yes it will be the last name okay and it is the first name I am still getting an error because I did not Define the save user function now I will Define here the save user function for error cons R is still 80 cannot convert Lambda expression to Infinity litigate because some of the return tabs in Block are not implicit okay for the cancel lets me also Define here a function all the errors gone because we have created all the functions successfully now I will just pass here some validation like this one and yes I will pass this one and let me Define here like if wouldn't put first name is equal to null then just return otherwise we will move towards our API and we will create the student record okay so just go to the student entity uh class and passed here a required attribute on all the required columns okay search for um B Sharp required with error message copy this one and go to your application and above the first name just pass this one uh first right okay and about the last name last name is required and above the email address we have to show the user that email address is required and for the gender we have to show Ender is required right guys just give me one minute okay no run the application again unless we see uh sorry guys I have just to stop the application because I will now add a menu for the add student go to Shared name menu and here just add a new menu Okay add student and the URL is I think add student okay Ctrl s run the application okay no I will go to the add student here we have a beautiful Farm now let me click on Save whether the validation file or not okay no these field is also required last name email address and email and we have beautiful type of validation now on the cancel I will just write some other kind of code but it is not necessary at this time when I click on Save and once all the fields are filled then I will insert This Record inside my data base right now go to the Blazer application and lets me close this one go to the add student and can I just Define an email type here um the email plus a type no there is no way to pass here the type okay no way no issue so I have just to Define here an API for creating the student record okay uh sorry guys go to the application now here uh I have to define the API for adding the student record because I am getting an error okay now I will Define here an API for inserting the student record so to add a student record uh just give me a minute okay now I will go to the student apps controller copy these line of code paste here and just Define here the URL post student okay um add new student and I will pass here the student entity as a parameter okay uh student entities student entity remove this line of code okay and just in the try cage block hey catch exception okay and inside the try catch block lets me Ctrl X control V I will use the add student function and I will remove the tool list and this function add student requires a parameter student entity if I just go to the implementation you can see that this function text student entity as a parameter okay now it will not return me anything and here I will return a response like okay and here I will return an error if something went wrong and bed request okay and I will return the error message also call these API from our add student page come here API URL yes it will be the API URL control X just replace this one okay now here let me pass the URL and I will pass the student as a sec as a parameter to these function and I will save all the data now let me put here a debugger and also put here a debugger inside the API now close the application and run the application again okay now go to the uh uh to the front end project to the Blazer web app click on ADD student and lets me put here the data like avid theme will be the the last name avid test at the rate of test dot com and gender will be the mail click on Save the debugger is heated successfully now click on next next and here from this point our API should be heated okay now click on next we I think we get an error because we are we did not get a hit on our API okay sorry guys I have to define the type as a post because I am using the post sjs song okay no close duplication uh I will use the http or the obligation again it's student uh avid with one two three at the rate test.com and the gender will be male let me remove this one and click on Save okay this field is required click on mail and next next next next next again we are not able to oh sorry guys I am really sorry just give the correct URL okay sale I have to turn on the application again sorry for the income is okay no add student just gave the name avid avid123808 test.com and here a bit sorry sorry guys for these for the gender basically we should use the drop down with two values male and female but at this time I'm just using the text boxes now click on Save okay step or step or step or okay or API controller heated successfully and lets me see here the data I am getting all the required information right now click on next next okay it's mean that the data uh it is successfully okay let me see in the database okay you can see that the row inserted successfully now here I will redirect the uh from our application if everything successfully uh inserts successfully then I will redirect to the student list page so for these I have to use a namespace the yes I will use these namespace sorry sorry guys I will inject the navigation manager and then inside here I will redirect to the I will redirect to our student list page okay so I can use the navigation manager of duplication and here navigation manager Dot s URI and here I have to pass the URL which is the students okay I am getting an error okay so let me copy the navigation manager and see how we can redirect towards the uh page if we save the data successfully just give me one minute so that I can see the correct use of the navigation manager okay okay I think I should use like navigate to okay no save and I will run the application again to the student list add student uh join the last name should also be John John at the rate test Dot com and here I will pass the gender as mail click on Save okay now I redirected successfully to the student list and you can see here the result that the data inserted successfully now we have also completed or or this step okay now we have just to write a functionality for deleting the student record and for updating the student record okay now let me go to the browser stop these close this window and close this window right and here I have to search for bootstrap buttons right and just copy this button for deleting the record no I have to try to copy this one now go to your application go to the student list page pages student list and here I have to add a column for oh sorry edit sorry delete okay and here just add here the button so the button edits successfully no just uh rename the text delete okay now I have to write here a function for deleting the student record right just uh tab carry function okay now lets me add here a function when someone click on the on these button right click okay now when someone click on this button I will pass the ID okay so I have to pass here the function sorry guys for the inconvenience so I have just to passed here uh the function name of it I will use the function name as remove d three the function M should be delete okay and here inside the parameter of the function I will just pass the rent ID sorry I like in this way I think I am doing something like in a wrong way let me remove this one I should use like in this way async red Lambda expression okay the arrow function I have to use the await keyword okay also create keyword okay and I will pass here the function name delete student and here I have to pass the student ID STD Dot student ID yes like in this way but again I am getting an error here so let me check on async I am using and everything in a in a right way basically but still getting some error let's meet print okay no it's fine I have just to Define this function below here protect it async okay and ask the function name is delete student okay and inside the parameter I have to pass the student ID in student ID okay now you can see that the error cons now here I have to write the code for deleting the student record no copy just this code from here and paste here inside the student list let me Define here okay it will be the URL and lets me okay and I will pass here Define here a variable for the student entities STD I think I should declare here a guessing Okay is there any option for delete testing okay okay here is an option okay now I will pass here the I will use the complete URL uh and then I have to pass the student ID like in this way Plus student ID so it will be my complete URL and lets me pass this URL and I will navigate to the student list but I am missing these namespace so let me copy these namespace from here test here okay now when I click on the on these button this function will be called and I will Define here a API for deleting the student record and I will append the student ID and here uh one I will call the API and after calling the API I will navigate to the student list page now let me go to the student subcontroller and lets me Define here the API okay the API URL is uh student okay HTTP delete okay and here I will get the student ID as a parameter student ID and lets me also Define here [Music] parenthesis I will pass here the student ID lets me put here a debugger and run the application whether each and everything works fine or getting some error okay guys I have to oh of the application okay and here I have to call the delete function delete student okay remove this one and here just pass the student ID as a parameter okay and I will return okay and also remove this line of code no run the application go to the it is my servers the API project and it is my blazer dot web app now go to student list and click on delete okay nothing happens if I go to my lets me refresh the page again okay you can see that the records edit successfully but we could not navigate successfully to the to the student list right yes just refresh no there is no way so when all the data when the record edits successfully I want to navigate to the home page right no refresh Okay now click on delete I uh redirect it to the home page successfully go to the student list you can see that the record is added successfully now I have also completed this step so we are just one step away to edit to update the student record okay now I will add here a new button for deleting the student record okay so go to the student list page yes and here just add a new column for updating the student record update okay and here uh I have to also add a button for updating the student record I will Define here function update to navigate to Navy get to update student okay and let me go to the bootstrap and I will give here the button color as a primary edit okay and let me Define this function control C control V and here uh I will I will just copy the name of this function replace with this one and I will navigate to the uh to the student list okay I will navigate to the update student page okay now let me add this page click on ADD Ctrl C paste here and just replace the name update student okay now we are at the last step update student and just Define here the URL update student okay date student will be the title update student will be the title now here I have to first get the student record and then I will update the existing student record okay now just give me one minute so that I can see code for getting the student record just give me one minute okay right save user will be the update user okay copy this one and paste here okay so we will use this function for updating the user and once the student updated successfully then I will get to the student list but I will add here one another field for the student ID okay rule KD then ID and it will be the student ID okay student ID student ID and of error I am getting ID student ID sorry guys control set I think I did a mistake so let me check what what kind of error I am getting Ctrl C TRL V yeah with the student ID entity yes student ID and student ID and let me also check first I have to close the existing applications I am getting an error that print each and everything is fine but again I am getting an error so let me and here I will check if student ID is less than one then I will not insert the record okay now go to the student apps controller and here copy the line this code so I will give here a name like date student date student and I will also call here the update student function okay now copy the URL go to the update student and just replace the URL with update student and here I will call the API and if all data inserts successfully then I will navigate to the student list okay you go to the student list um just copy the URL update student go to the student list and I will navigate to the update student okay update student and here just give me one minute okay and here I have to pass the parameter this one student list student ID and it will be of integer type and lets me come to the bottom of this page and here I will get these pyramid as a parameter sorry I will get these as a parameter let's also Define here this parameter uh public int student ID and here once uh I will I will use the on parameter essing and in this function I will first get the student record okay ask and let's meet here a function the function name will be the function name will be on parameter sync okay and here I will call the API right now go to the student list I will first get the student list and then I will stick the exact student no I will get all the students list okay let me go here student sorry guys just give here a name variable student is and from this student list I will extract the student okay so student list dot VR um lets me get the exact student x dot student ID is equal to the parameter that I will get from the URL Dot first our default okay put here a debugger and let me run the application okay this is our blazer.server app now I will move towards my clan side application the Blazer Port web student list and I will click on edit it redirect me towards our home page okay go to student list see what kind of things we are getting update student okay sorry guys I have to pass this URL here API URL sorry this will this will be the [Music] um oh H URL copy and paste here just put here a debugger and start the application okay go to student list click on edit okay no I just get the student ID next next continue okay no I get the exact data now let me change something like two like two like these like it should be female Okay now click on Save okay you you can see that updated successfully now click on this one edit let me uh remove the debugger click on continue remove this debugger click on continue okay now I will update this record yes in this way click on save you can see that this record updated successfully so or last step also completed successfully guys in this video in this session basically we use uh the edit edio.net with store procedures in blazer.net 7 application and we perform the credit operations using adio.net and store procedures so we have completed the video successfully thank you for watching the video and don't forget to subscribe the channel and like the video thank you so much

Channel: Noor Codelogics

Views: 12,475

Keywords: blazor crud example, blazor crud without entity framework, blazor crud, blazor in .net7, blazor in .net 7, blazor crud .net 7, blazor ado.net, blazor stored procedure, blazor insert .net 7, blazor crud operation, blazor .net 7, blazor .net7, blazor crud tutorial, blazor sql server, .net 7, blazor insert record, blazor ado.net stored procedure, blazor insert form, blazor save data, blazor read data, blazor c#, blazor tutorial, learn blazor .net 7, Blazor dotnet 7

Id: TCLLVz8Wk3A

Length: 104min 50sec (6290 seconds)

Published: Sun Nov 20 2022