Blazor server crud tutorial

hey there everyone it's ravindra here back with another video today we are going to learn something new at least in this Channel and that is Blazer server tutorial we will see how to create crud operations in Blazer server in future hopefully we will create some projects in it first of all if you don't know about Blazer then it is a technology created by Microsoft for creating single page applications and now you are able to create single page applications with C sharp and Dot net you do not need to learn JavaScript for it it is completely c-sharp based technology and there are two type of Blazer applications first one is Blazer server that we are going to learn today and another one is Blazer web assembly Blazer server allows you to create front and and backend in the same applications it means you do not need to rely on apis for it while Blazer web assembly is a completely front-end technology and you need web apis for interacting with server so if you find this video helpful then please hit that like button if you haven't subscribed this channel then it's okay you can do it later so let's get started without any delays and first of all let's close this thing and now we need to click on this icon which is Visual Studio 22. now click on create new project and let's search here Blazer and select this Blazer server app not this Blazer webassembly app so click here in Blazer server app and let's name it Blazer crud and let's change the location Okay click on next frameworks.net 7.0 it is fine authentication type none okay so let's click here on create and it will take little time so our application is created and so let's see how it is looking in web browser and click on this run button here so it is how our application look like by default so if we click here it is our counter component yeah and it is fetch data so you might be thinking how it is working if you are new to Blazer and okay so let us stop this project now and here are the pages it is our index page and it is our Fest data page which is a Razer page okay so I'm gonna run it again and I'm gonna show you something right now you might be thinking that index page contains only this much code and then from where we are getting this whole design here so we have a layout page for this and it is a Content page for that layout page and it is here inside this here folder it is our main layout and inside this main layout you are looking we have this nav menu which is a component and it is created here name menu so we can create our razor component in the Blazer server application and call them wherever we need it and we have created this name menu separately and called it here so it is our main layout which is containing nav menu which is created separately here and this name menu it is it is the name menu which is a sidebar of navigation links so it is our main layout page and inside this inside this article we are displaying our body and in the case of index it is our body in the case of fetch fetch data fetch data dot razor page is our body so these index are fetch data or counter page are displaying here inside this article so it is a little brief introduction of this application how it is working and what are the components so all of these are components like counter dot razor face data dot razor and index.reza and here you are looking at this it is a survey component which is created here survey prompt razor and it is called here in index dot razor it is here the survey prompt so if I comment it here and call this call this counter call this counter component here and run this application again let's see so I have commented this survey survey component here and added this counter component in the index page now we are seeing the counter component in the index page so that's how our component Works in the Blazer server app and we will create our own components later part of the tutorial first of all we need a watcher because I have to run this application and close it again and again and again and I do not want this so I need a watcher for that and let's type here github.com slash rd003 that is my profile and we are gonna copy some code from here actually go here in sorry not new guest go here in guests thank you actually it is here your guests and I have some code here and I'm just gonna copy this code so copy this code and paste it here inside the launch setting dot Json which is resides here and copy it here so when we have copied it we are seeing this new tab inside this drop down which is watch and now we can run our project with watch it means you do not need to stop and run stop and run kind of thing again and again which is kind of problematic and it is not a mandatory if you do not want it then you should not use it so the benefit of this water is that if I change here something then I do not need to stop this project and run it again what I have to do is just refresh this page and it will do fine so that's the benefit of watcher okay so now let's create a folder here let's create a new folder and name it models and why I'm not seeing the rename okay let's do it again let's create a new folder and actually I'm not seeing any rename I think I should stop the project okay now I am seeing the rename and delete options okay so let's create some folder already here models one thing we need here models and another thing we need here which is services that is fine so here first of all we need to create a class actually we are not going to create a class right now and first of all we need to go here and look at this guest and we are copying some of the code from here first of all we need to create these two packages because we are using Entity framework core so you can do either go here and manage like this actually click here nougat package manager and manage package of solutions and you can go here in browse and you can search it directly here and when we search it from here we have to select this project and we need to click on install it is one method and we can do another thing click here on package manager console and right here some commands we can install it from here both of our fine so if I write here install package and the name of package it is going to install this package for us yeah and we need another package Microsoft dot Entity framework core dot tools so type here install package press enter so the installation of packages are done now let's see what we have to do next now we need to create a class inside this models folder and click here create new class name it database context or whatever you like okay now we have created this class and let's see let's copy this line from here and actually we need to inherit a class here which is DB context right DB context and press Ctrl Dot click here on using Microsoft dot Entity framework core okay now we need to create a Constructor here and whatever it is just copy these lines do not waste time now we need to create a new class here and it is a table for our database so we are going to create a person class here which will have these properties not that much string and name and email that's fine and let's make these things mandatory now name is mandatory and email is also mandatory and it should be email address it should be a valid email so here we have written some validation logics okay fine and now we need one more thing here type prop and double tap it will create a property for you it is a shortcut for creating properties now it will be public DB set and person very nice let's name it person okay now move to the program dot CS file and before that before using the third options or third step we need to move fourth option first and we are going to create a connection string first so copy this line and open the app setting.json file press comma here and paste this line it is our data source dot which is my local server name of database will be Blazer crud Integrated Security true and Trust server certificate equals to True okay fine now let's close that tab now let's move to the program dot CS file and we need to copy only this line and open this program dot CS file and copy wherever wherever you like and I'm gonna copy it here fine so this name of connection string con and here name of connection string con it should be same it should not vary they should be same okay fine now I guess we have done almost everything related database connectivity now we need to create now we need to open the nuget package manager console we are going to run some migrations command so first one will be add migration let's name it init means initial okay so let's wait ah k so now we need another command which is update database and all of these changes will be reflected to the actual database after this command so let's wait for it yeah it is done now okay now we can close this tab we do not need and we can close this package manager console also okay fine now we will create our own component so what should I name it okay so inside this pages let's create our own component freezer component and name it add update person okay so we can write here paste title which will be the title of our page and here we need to define a route of this page so the route of this page will be add sorry person slash add and another route will be person slash edit slash user ID which will be integer type and we can have multiple routes when we are looking here so it is the route of this counter base last counter and it is the route of our index page which is the root of our application it means it does not contain any route just forward slash so these are the routes of those components and it is the route of our ad person component actually we need two routes for this component and you will see why in the future actually sorry the first route will be a person slash add and second route will be persons edit slash user ID it means the route will be like person slash addit slash three it means we are going to update the details of the three ID person or person which have ID equals to 3. okay so it is our title which will be shown in the web page and it will be shown the here it will be shown here here you are seeing index it is the page title okay so let's create a form here so for form we need to write here okay first of all we need to create a div class equals to row okay which is fine and div class equals to call md6 now here we will create actually here we need a button so ahref equals to right now we are not defining any route here a class equals to ptn BT and out line dark and it will be so all Okay so now we will create our form it will be edit form and inside it we need div class equals to form group okay label 4 equals to name label 4 equals to name and name okay input text equals to class equals to form control okay but before that we need to do something here we need something we need uh parameter all right which is user ID so this parameter we will get from the route and we have defined here user ID and right here I am writing camel keys and here I am using initial letter as capital okay it does not matter it is just a URL so it is fine so I am fetching this user ID here inside this property so I need to Define it here okay I guess it is fine now and we need another thing here so it should be private string message equals to string dot empty and it will contain a success or failure message okay fine another thing we need here so we need here data Dot sorry models dot person equals to new Okay so now we can use that person here and we need a method here private save person or just save private void save so it is the save method for our form post data so okay so right here in the edit form we need a model to pass which is person which I have created here in this person okay fine and on valid submit I need to pass a method which is save okay so that is fine and here I need to bind this text box and if I write this input text equals to form control and I need to bind it here so I will write here bind value equals to person dot name okay and I need to write here one more line which is data annotation validator we need this line for the validation purpose now we need to write here validation message for equals to this person dot name so it is how we can write validation in the Blazer application okay so let's copy this line and paste it here just change it to email change it to email change here also email just copy this email thing and paste it here okay fine now we need slash div it will be just m y 2. we need these two divs here it will display success or error message and this will contain submit button so button type equals to submit plus equals to form control sorry not from control it will be btnbt and and primary that should be fine and its name will be save D so I think we have created a form now we need some more thing here like title title equals to sorry private restring title equals to add person and we will change it according to edit or ADD so we will initialize it with ADD person we will display that title here t i t l e fine and here also t i t l e yeah that is fine I guess we have completed this form thing here okay let's try to run it let's see how it is looking in the web browser okay but before I need to Define that route inside here name menu click here and let's define that route here so just copy this thing here and name it processor that is fine and okay so here name link href equals to and copy this link first one slash add here now we can run our project just minimize it so click here in the person link and it is our form right now it is just a design it won't do anything and we will create some Logic for it okay so let's close it for now Okay so inside this folder we will create our services first we will create an interface so let's select it and let's select this interface and name it I person service okay and it will have some method let's define those method and okay so it will have Bool add update which will contain this person type of objects okay fine another one will be Bowl delete it will take just an ID another one will be person find by ID will also take ID and one more method which will be I enumerable list sorry not list person let's make it list person and it will be persons are get all that will make more sense okay fine and now we will create class that will contain these methods it will inherit that interface so create person service class and it will Implement I what is I person okay now press Ctrl Dot and click here Implement interface now we need to go here inside the program.cs and we need to resolve the dependency here so right here Builder dot Services dot add transient at transient and it will be I person service person service okay so that's fine we are done here now let's define these methods so it will contain a try catch block catch exception ex and we are not going to log error right now so I'm just returning return files from here and return true from here before that we need to define a Constructor here and a private read only database context CTX database context CTX CTX equal to okay it has done this thing for me wow that's nice okay apart from that let's write code here so just quickly right here CTX dot person dot add person but before that if person dot ID equals to 0 it means we are going to hire a person if ID is greater than 0 then we will update the person CTX dot person dot update person that is fine and CTX dot save changes okay so let's define a try crash block here accepts an ex and return false where person equals to get my ID and where is our get by ID method okay find by ID find by ID if frozen equals to null and return false otherwise CTX dot person dot remove person and CTX dot save changes hmm yeah it's fine it will just return c t x dot person dot find ID it will return c t x dot person dot to list now we have created our services let's close it and move back to the ad update person component for using those surveys we need to inject those service here so right here inject inject service Dot I person service okay or we can use we can write here we can also use this using services using services and let's create an instance of this service so it will be present service okay so inside this save method we can write where okay if person's service Dot add update person it means if it returns true then we will write here message equals to success [Music] fully added and we will empty this person method sorry person object so person equals to new otherwise else message equals to good not saved so it is the functionality of add update now we need to do one more thing here protected override on initialized if user ID is greater than zero it means we are getting user ID it means we have to update the title now we are not saving the data sorry not adding the data now we are updating data so right here update person and person equals to person service dot find by ID user ID okay I guess we have created our ad update person component okay let's check it let's test it and I am getting some build error here so person slash didn't delete ENT ID not return all the paths okay so right here return true I guess it should not have any problem let's build it again let's see are there some error or not yes one succeeded zero failed that what we need so click here first of all let's check our validation so if I move here and nothing is working I guess yeah it is working name field is required email field is required so let's name let's type my name and add the Red X y z dot com actually just type here this okay it is saying email feed is not valid email address so we need to type a valid email address oh right here xyz.com I guess it is fine yeah so if I click here in the save button let's see what will happen and it is saying could not saved okay so let's see why it is happening Okay so where are our services here Let's see we can okay for that I need to run in to run it with debug mode actually I am going to debug it so let's run it again so let's enter these fields again right here ravindra.com [Music] first of all let's check here am I getting the data here or not yeah I am getting name and email okay so for instance let's add person context dot save changes and it is saying I am too I don't know why the error was occurring right now it is fine successfully added okay I don't know why it was happening but we need to write here some more thing first of all whenever I am clicking here on the save button I'm not seeing any message means I am not seeing whether I have clicked or button or not so I am just writing here wait okay so let's run it again let's enter some detail here John John at the red rediff.com press save here and again why it is not working okay why wait is not displaying there successfully added which is fine but I want to see a wait message here so let's see why it is not working message equals to wait it should work I don't know why it is not working okay so message equals to wait so let's build it again and let's see it will work or not how build a solution run it again now let's add some detail Max and Max at the rate Yahoo dot in successfully added again wait message is not appearing and we will see it later and let it be and let's enter some more details x y z x y z.com X5 jet at the redx.com dot XOM okay so I guess we have entered enough entries now we will create a display person component so for that we will create a component here add razor component let's name it persons okay and one more thing here enter persons it is the Route 4 this person controller sorry not controller component so we will Define that route here inside this page directive page persons fine all right here div plus equals to call MD sorry not call MD row class equals to call MD 6. now here we will Define a table T head TR t h will be name email action and we will Define a d body here it will be TD [Music] and TD okay so let's inject inject I what was that five person something like that using services and inject I service I person service person service okay now here we will Define uh private list person and it will be data sorry not data models dot person s equals to new foreign that list where person in persons here I can just write this person dot name person Dot email first then Dot email and why it is giving me error I don't know why it is giving error okay first of all I need those braces here it should be T body and these four each Loop should be defined here and it should be closed here now we are fine person dot email and here we need two buttons one is edit and another one is delete so AHF equals to person Flash edit slash person Dot ID class equals to BTN BTN success edit okay one more thing one more button it will be BTN Danger it is or delete button and let me see okay so now move here inside the code section now we will fetch this person from the surfaces so we need protected okay override on any sliced persons equals to person services person service dot get all now we have retrieved those list of person and assigned it inside this person field okay now we will Define delete method data so let's run it right now let's see how it is working what I need to do I just need to click on this button and it will display the list of persons so first of all I need to do little bit change here public class equals to table table streamed okay and let's refresh this press Ctrl R if your server has stopped and it will build your project again I guess those changes will be reflected now yeah so it is the list of our person ravindra John Max and XYZ let's try to edit this let's see it is working let's change this x y z oos on E and Johnny add the red gmail.com let's click here and successfully added okay so we have successfully updated it if I click here if I refresh this page yeah those changes are permanent so it is working very perfectly right now so let's move here and Define that delete function also first of all let's define here private and async task delete it will take a whole object person person I'm gonna tell you why I am using this async method because I have to call async I have to call one async service which is this inject i j s runtime actually I need a JavaScript what we say prompt method or JavaScript prompt whatever it is prompt model it will be JS runtime so right here Bool confirmed and await JS runtime sorry Js run time dot invoke async it will be a Boolean type here I am gonna write confirm are you sure it means it will ask are you sure you want to delete okay and I am getting here and error let me see what it is cannot await method group now it is fine so I will write here if confirmed then what I will do I will delete this record so right here persons persons Dot remove person right now I'm not removing it from database I'm just removing it from the this list we will later remove it from the database so right here person and right here data dot person I guess sorry models dot person okay so press Ctrl R here now it is building our project okay fine now refresh it and click here and it is not working because I haven't invoked this method Okay so I will write here sorry on click equals to it is a sync method so I have to write here sorry it will be a sync and right side it will be avoid delete it will take a person as an object okay I guess it is fine so let's save it and let's see yeah it is asking me to rebuild it again so I guess we are fine now let's check it again okay let's click here and it is asking me are you sure no I'm not sure if I click in ok so it will delete a record but it is not deleting it from the database it is just deleting it from the list if I refresh it those changes will not reflect to the actual database now we will call the delete service here and we will write actual delete function okay so here I will write person service dot delete press n dot ID it is a Boolean method so if it succeeded then we will remove it from remove it from the list also okay so I guess public I read okay okay if it should be wrapped inside if method if person service delete percent or idea now I'm fine or we are fine oh click here control plus r it will rebuild our project and it will refresh here so if I click here let's see the changes has reflected or not yeah changes has completely reflected now I need to add a button here and just here we sorry it will be a href equals to person slash add class equals to BTN BTN out line dark add more my two yeah here if I click here I will move back to the address and if I click here I will move back to the person so I'm Gonna Change something here inside sorry where it is shared shared name menu and I'm Gonna Change this link here it should be persons okay so if I go here in the home page and click here in the person it will show the person's page rather than add percentage if I have to add records I will click here so everything is working perfectly so that's it for now if you find this video helpful then please hit that like button if you haven't subscribed this channel then it's okay you can do it later if you like so see you later

Channel: Ravindra Devrani

Views: 17,197

Keywords:

Id: r65oJNybfQY

Length: 63min 53sec (3833 seconds)

Published: Fri Dec 23 2022