Basic CRUD with Blazor WebAssembly

hey there and welcome to the code wrinkles channel for a brand new blazer video what i want to do this time is something that i think it might be very interesting it would sound maybe a little bit easy but i believe it's really important that we get the fundamentals right so what we will do in this video is we will implement basic crowd operations with blazer web assembly and what i want to do here is to offer a complete walkthrough actually from how we need to set everything up because you know blazer web assembly is actually a single page application framework just like angular and other such similar frameworks that we have outside so when we talk about single page applications we usually have in mind an architecture where we have an api backend and we have this single page application the front end that needs to talk actually to that api back-end to get some valuable information from it in order to be able to display something and what i want to do is actually to set everything up using blazer webassembly and of course to do that we would also need to create an api layer and in order to have some really some real crowd operations we would also need a database so what we'll do today is actually we will start from the blazer template and we'll create a template actually from scratch and then we will add the database layer i would say it would be a very very simple one of course not a complete repository pattern and things like that but we we will set the database layer up then we will set up the controllers that we need or the controller that we need in actual in order to implement our basic crowd operations and last but not least of course we will implement the blazer components in our blazer webassembly app using an http client or a data service or a minimum version or or a viable version of a certain data service to get data from our api and display it of course and do something with the data in our blazer webassembly application so without further ado let's get right into it and yeah let's open up visual studio and start a new application from scratch so we'll select here of course blazer uh then we'll go we'll have to choose a name here let's call it a blazer crud would be the name of our application and of course here we have to choose and this is actually the reason why i wanted to also go through this step of creating the template or creating a brand new solution is that when we have this we of course need to check here that we want the best webassembly app but then the important thing is that we also need an api backend for that so in order to have this we have to check here this checkbox that says asp.net core hosted and what this will do is actually it will provide us with the solution containing a project for the server or for the api that we need and another project for the blazer web assembly of course configure that when you run the application it will also serve the blazer webassembly application from the server so let's click create here and it will take just a few seconds it should it shouldn't take too long so we'll be able then to look into what we actually have here and yeah actually start working with it so we don't need this at all the cs profiles and let's first examine what we actually have here because in this solution you see that we have three different projects and their naming is i would say fairly okay because we have this blazer cloud client which is essentially our blazer web assembly app and we can see that by the fact that we only have this program.cs file we don't have a startup.css file in a blazer webassembly and then we have this blazer cloud server which is of course the server application so that's the place where we'll actually create our basic api layer so our blazer client will talk to our blazer server via a rest api the blazer server or sorry the blazer or sorry the asp.net core api will get or will uh use entity framework core to actually talk to the database and will of course respond with json and then of course the blazer client application or the blazer webassembly application will get that json data and we'll render it or we'll do something with it in the specific blazer components that we will implement and besides these two type of projects we have here another one which is actually a well plain class library which is a blazer crud shared and that's the whole idea or the very nice thing about using bezel web assembly is that we can actually reuse the code that we write in all in all the other layers of our app so for instance if we need uh to use classes from the domain layer maybe i don't know we can easily do that because it's just as easy as referencing this uh blazer uh shared project in the blazer client app and in the blizzard server app and or sorry in this case is a blazer crud server app it's a regular asp.net core server here so we can reuse this weather forecast without the need to re implement it in the front end and this is one of the main advantages that we have in comparison to using other single page application frameworks that are javascript based like like angular for instance where in order to do that we would actually have to rewrite our models also in typescript because this weather forecast class that we have here in shared would have to model as an angular typescript class in order to be able to use it so the advantages as we can see here is that when we go for blazer we don't need to do that because we can simply use the models that we have in all other layers or we can use all the classes and functionalities that we have in all the other layers of our application so let's get started and we'll take it step by step i said so first we're gonna implement the data access layer it will be a very very basic data access layer then we'll implement the controllers of course and last but not least we'll jump over to the blazer cloud client application where we will implement the necessary components and we will talk to the api and get data from the api in order to use it in our blazer webassembly application so yeah let's get started first of all what we will need here is once again we are in our asp.net core project that will serve our blazer webassembly app and we'll also expose our api endpoints that we would need so here what we want to do is we want to install some packages of course because we want to work with the database or with a sql database so what we would need to install here uh sorry i have to switch here my nougat source to all what we would need to install here is of course we will need entity of framework core so this is the first package that we would need to install we would need to install then microsoft entity framework for sql server it should be somewhere here relational abstractions design sql server this one and we'll also need to implement the entity frame or we will also need to install the microsoft entity framework for tools nuget package because that one contains the cli tools that we actually need for the package manager console in order to be able uh to run a migration or to perform a migration and of course update the database things that we will of course need to do in our app right now so we have installed all our packages that we that we need and this should be actually okay so we wouldn't need any other package here so the next step is that we want to implement a very very big basic data access layer so we'll create a new folder and i'll call this folder very simply dal from data access layer we won't implement we won't implement an entire repository pattern if you want or if you are curious about how to implement the repository pattern uh with entity framework core then we have another video where we talk exactly about this and i will leave the link to the video in the description of this video that you are currently watching so if you want to find out more about repository pattern with ef core then you will find the link below in the description so let's uh get started here we would then first of all need to create a new class because we will need a db context of course so let's create a new class here in our dull layer and we will call this a letter public class uh that one would inherit a db context of course you would need also to add necessary using uh using for that which is entity framework and that should do it and the minimum that we need here for a working db context uh is public oh sorry i didn't give it a name here oh let's let's just rename the file sorry for that i wasn't attentive at this and we'll call this wetter db context and let's rename all the content of the file okay so what we will need here we will get here some db context options where we will essentially have right now the connection string but of course you can configure different other things uh there as well and we'll just pass this to the parent okay or to the base class and in the constructor we won't actually do anything else and the only other thing that we would need is to expose a db set public and it would be a db set of weather forecast and this weather forecast is from this blazer shared project so from our class library so we have to add a using also for that and let's call this property uh forecast and then get and set and we should be good to go so this is actually as said the minimum that we actually need for the db context so nothing else actually so then uh what we need to do of course is we need to go to startup.cs and in this startup.cs of course we would actually need to add or to add the db context as a service but in order to do that one other thing that we need to do is we need to provide in our app settings the connection string so that the db context knows exactly to which database it it should connect and perform the different actions that we want to perform and for that i already have created a database uh it's in the regular visual studio sql server express so nothing very very fancy but let's go to the app settings.json and to make things easier for us uh let's create here a property which is called connection strings which is also suggested by visual studio and we'll create here a new one which is called default and here i will paste my connection string and that would be it so that would be it for the app settings then what we need to do of course is actually use this db context but before we can register it we need to get the configuration so we'll say of our cs from connection string equals configuration and we have here an extension method which is called get connection string and we should specify which one and we called our connection string default so we will get that one so what we will do next is services add db context and this is a generic one of course and this is a weather db context we will need to add of course the necessary usings also here blazer cloud server dal and we'll have him here to pass the options of course and it is use sql on server for this one we will also need a using and then we'll just have to pass in the connection string and that's it we have our database right now what we can do as a next step of course we can add a new migration to it so that we create our tables in this case we'll create only one which will be called weather forecast so we'll say here add migration initial let's hope that everything runs okay but it shouldn't and it also shouldn't take long of course so while we're waiting uh we will think a little bit of what we need to do next so after we perform the migrations and uh everything related to it what we need to do is of course uh to specify or to go to the controllers and here we got an error uh okay require a premium okay i totally forgot that so in order for this to work sorry for that we need here in this model weather forecast we have some properties but of course we need an id for that because otherwise we uh otherwise ef core can't figure out exactly what should be used as a primary key and following the conventions we won't do any fancy stuff right now so we'll just create a new property of type int that would be called id a get set and then ef core would consider this as a primary key and let's run the add migration command again and that should be it yeah sorry for that i totally forgot about this i was so excited about what we want to do actually in this video that i totally forgot that we need to actually also add the id to our weather forecast so in case you ask yourself what we did is simply we added this id to the weather forecast model and that's it so nothing very very fancy now you see that the migration completed successfully we also got the the migration class here where we can see exactly okay what will happen once we update the database and we guess that should be right so the next step update database hopefully i typed it correctly and everything should be fine build successful and done that's it so right now we have the database set up everything is okay so the next step so step number two is we need to go over to the controllers and implement the weather forecast controller uh so let's go here to this weather forecast controller and we will change some things here so first of all we won't need this stuff anymore we get here the logger but one other thing that we would need to get here is the context so i would add here a private read-only field of type letter on eb context and we'll call this ctx of course we will need to add necessary using for that in in the dal folder and of course we need those uh we hope that asp.net core will inject this into our constructor if if we require it so whether db context context and we just assign it to the field so everything is very very standard and regular uh very very beginning stuff for an asp.net core api now what we'll do here is okay there is here some some fancy stuff going on but i don't really want to do this way i want to go the classical way so what we'll get here is for the http get we'll get an async because we're working with the database so it is an unmatched connection so we'll use async and await so async then we'll return a task of i action result and here we'll see get what we will do here is actually var forecasts where uh four forecasts should be fine uh equals context forecast to list async for this we will also need of course to add unnecessary using this entity framework core and of course we need to await this and after we have this we can just return an okay and here in this okay we'll just return forecasts so we should be good to go with this one now the next one i would like to have this get by id it will be public async task of i action result of course and we'll call this get by id what we'll need here is of course an id and we'll get this from the route so it's a regular asp.net core api i said uh let's specify that it is an http get although this is not really required because the default would be to consider that we want to do a get if we don't specify anything else but what we need to specify here is of course the route so in the route we would still need to specify that we want to get an id from the route and since we talk about the route i want to do a slight change also to the route here on the controller so it would be under api controller and then what we need to do here is of course bar of forecast equals away context the forecasts where so we specify the criteria that we actually want let's use an f from forecast and we look for a forecast which id is equal to the id that we actually get from our route and then of course first or default async because we want asset to do everything asynchronously and once we have here everything we can just say return okay and we'll return is forecast and that should be it now the next controller action that we want to implement is the create one so let's have it public it will be an async task of course of i action result and let's call this simply create here we'll also have to specify that okay we want this to be an http post of course because we want to create something and the route should be the regular uh controller route so nothing else here but what we need here is that uh i would i like to specify that the from body i want to get a wetter forecast that i actually want to create so what i will do here is i will say here simply a context forecasts dot add and i will add a forecast first i don't do any type of validation here this is only as said i just want to go through all the steps to set everything up but this is not really a complete how-to and this should be done exactly like this i just want that we that we stick actually this type of thinking that we need to implement the database the controllers and then to implement the components that actually talk to the api behind it but of course in the controllers there is regular best practices or there are regular best practices that we use in asp.net core and by the way the month of february as per devoting to the poll that i posted recently we will only create videos or mostly create videos on regular asp.net core so if if you are interested in different topics on asp.net corelab for instance logging services service lifetimes which is very very very important maybe also a little bit hdp but maybe also some uh some things about views powerful views things like that during the next month we would actually create only or mostly the videos around uh asp.net core so for now we just add this to the context then wait context save changes async of course and this is this is actually when our change gets written to the database all right now in this line so we line number 45 we just add actually our new entity to the context but this entity is written to the database only when we call this safe changes async method and then what we will do is return okay once again this is not the best practice in a regular rest api you would return a created result here but i just want to keep things as simple as possible here and so what we will return the created forecast which after the creation of course will also have an id when it will come here it won't have an id or id will be actually of default value which is zero but after we perform this save changes we'll also have an id to that forecast not that it would be very important for us in our blazer web assembly app as we will see later but we will have it uh should we need it somehow okay so right now we have uh this one and i see that we have two errors let's us of course we have forgotten or we have some typos here we uh yeah that's actually it so uh i had it i guess i had a typo there good so we have a get all method we have a get by id method we have a create method or a create actions that these are actually actions so the next one is the update so i would have here a public async of course and i also have this typo here but we'll fix it right away so async task of i action result of course and we call this very very simply update now of course once again what we'll do here is uh we'll have to specify that we want to do this via an http put and what we could do here is we can also specify a route and the route uh should be actually or could be actually uh something like sorry we just need like this something like id and then what we will have here is we'll get an ink id um yeah id let's call it id and then we'll have a wetter forecast that is actually an updated version updated forecast so let's call it like that now what we'll do here in this case of course is uh that we would simply um actually update this so it's it's very easy actually context dot forecasts dot update and then we just provide the updated forecast we don't do any type of checks here as said updated forecast and then we just save the changes wait sorry this is not with underscore context dot save changes async but that should be it and afterwards we can just return okay with the updated weather forecast okay updated forecast and last but not least the the final action that we need to implement here is the delete of course so it will be public uh async ask once again of i action result and we'll just call this very simply and plainly delete now this would be uh of course http delete and what we want to do here is we also want to specify a route and then what we can do here is the route in the route we can get once again an id and what we can do here is id uh intid and here we have actually to do a few operations so var forecast equals weight context dot um forecasts dot where because we want to look for a specific weather forecast that has a very very specific id so forecast we look for a forecast that has the id or that should be a dot here equal to the id that we get actually from the route and of course we want to get the first or default async because we want to do this asynchronously and that should be that should do it but now the next thing that we can do is we can simply say right now uh context.forecast.com and we say that hey we want to remove this forecast and then we can just simply await contact.save changes async as usual and that should be it now what we can do here is we can return on okay and in this case we'll return once again the forecast that was deleted and that should be it so this is right now our controller so i said we have already implemented the data access layer part so we have a database and we have a db context that we can use actually uh to inject in our controllers and write read and update delete things from our database then we have implemented the controller actions that we actually need for the basic rod and for that we have the get the get by id the create the update and the delete and last but not least i said what we want to do is implement everything in blazer so what we need here to do right now is actually to switch over to our blazer web assembly application and here in our blazer web assembly application first of all i want to go here uh to this uh to this program.cs file and show you that actually when the blazer web assembly application starts uh what happens here is actually that we create a new http client service that will provide us with an http client already configured with the address of our hosting server which in our case is this regular asp.net core server so the cool thing is that we can use actually this http client and inject it into our components and the client should already be configured we just will provi we will just have to provide actually the the exact endpoints to which we want to make some calls and that's actually it for what i wanted to show here in this program file so now the next thing is what we want to do here is we have this patch data component which actually as we can see simulates i would say an http call because it actually reads uh from a json file that we actually have in a www root folder but we want actually to substitute this with some real calls that we will actually make to the api that we have just created and in order to do that i said we can inject the http client of course and we can then create other components that we can use for instance for create and update our weather forecasts but before that since the markup would be a little bit longer uh what i would say is that i won't really write down all the markup but i have already prepared it so i will just copy over the parts of markup that we need in our blazer components and then actually we'll just implement the behavior or the code behind part so the first thing that we want to do here is that uh in this table we actually want to add a new column and in this column we would actually just provide some information or well we will provide some buttons actually two buttons i would say for our delete forecast and for the edit forecast and what we will do here is of course we will also need a new button to create a new forecast and we will create this button right below the table and that would be actually a green button that would allow us to create a forecast and of course we get some errors here because these methods here right now are not implemented at all so we will have to implement them but before we go further one thing that we would need here in this code behind part so we have this private weather forecast array we can simply reuse it so no need to change things there but in order to get things working with our uh with our api we will actually need to inject the http or the http is actually already there so the only thing that i would inject because we want to also navigate around inject navigation manager and i promise you we'll do a video on navigation in blazer in general and let's call this uh navigation and that should be it and now that this is actually done let's start and implement uh things in the code behind part so first of all we need to implement this here in in this life cycle method on initialized async that we have in blazer web assembly and here weather forecasts would be actually http get from json async we want to get a json forecast array which is correct so the only thing that we will need to change actually here is the endpoint to which we want to make the call so that would be a slash api slash weather forecast because our controller is called weather forecast controller and that should do it and then of course we need to implement a few methods and do not lose a lot of time here because this video is already fairly fairly long i will just paste them here and go to them but first we have a delete forecast method which will get invoked when we click of course the delete button and it will pass the id of the current forecast where we clicked on this button and based on that what we will do is actually we will simply say that hey we want to delete this and we'll send a delete request to this api endpoint that we have created earlier and then we have this state has changed in order to notify everybody that the state has changed and uh that everything needs to be re-rendered so then uh what we need to do here is the other one which is the edit forecast and here we just navigate the way to something that would actually be once again uh our new component so we'll create a brand new component for this edit forecast and the same thing we will have to create a new component for this create forecast so let's stay let's take it step by step and first let's create the one to create a new forecast so we'll add here a new razer component and we'll call this uh create forecast okay and of course we'll need to uh perform some changes here and once again i will reuse things that i already have prepared because otherwise it would really take too long but what we have essentially done we have specified that this is a page so this is a routable one when we want to go to create forecast actually we will display this component then we have this uh using um but it's not crud is blazer crud sorry blazercrowd.shared so that should be okay right now and then exactly as it happened earlier we just have or we just inject the http client and we inject the navigation manager and that should be it and then uh we'll have here actually a very simple form to add a new forecast and i will i will add the form here right below the h3 uh tag and as we can see here well we have a simple edit form component uh and this one is actually tied to a model that we'll create just in a while and in on a valid submit we will actually call this uh insert forecast method that we will implement just in a few seconds and that's basically it we just have then two buttons if we want to navigate back to the list or things like that so the next thing that we would need to do here is in this create weather forecast is well we'll need first of all the model for that because we need the model to which we actually will bind this form and that is actually a regular private uh weather forecast and just we create a new default i would say weather forecast instance but we will overwrite it very very very shortly so what we'll do here is that what in on initialized so we'll do an override to this on initialized because we want to pre-populate the date and time but that's essentially what we do here and then we implement actually this insert forecast method that gets called when we click the button that we want to do the insert itself so what we do here is simply we use this http client and it's cool that we have this http extensions that actually we can use very very easily to serialize and deserialize from json this is especially useful when we work with rest apis that actually support json so in this case we just post as jason may say that we post a weather forecast we provide the value for it we provide the uri or actually the end point which uh to two words which we want to make the request and then everything should be fine and once everything is created what we do we navigate away back to the fetch data list so to the list with all the components that we have so now we have to create another component for the update and the other component will essentially be exactly the same form only that it will actually not be blank or it will be actually be populated with with with the forecast data based on the id that we will get from the route so let's uh here add a new razer component and we'll call this update forecast update forecast uh that should do it and here once again as we did also in our previous components we need to inject some things here in order to be able to work with the hp client and navigation manager here it's using to blazer prod because this is the name of our project and then we have the http client and the navigation manager let's also add a space into this heading and then we will add exactly the same form once again and we'll see the difference actually to the create forecast component it's essentially exactly the same form with exactly the same model binding the only difference is how we will handle this actually on the code behind part of our component because what we will do here here is first of all we would need a property for the model binding which is this weather forecast here that we create and we also need here a parameter for the id that we will get actually from our routing and we see that here in our route we have specified that we we will also route to an id which is of type int so what happens in blazer is that whenever uh we get routed uh to a new component if we see that we have here this this type of id it actually looks in the component for a parameter of the same data type and the same name uh while it's important to notice this is not the case sensitive so i i id non-capitalized would be exactly the same as capitalized id name but the data type and the name should be exactly the same and of course it should be a parameter in that case whenever the routing occurs what it will happen is that of course the value that we'll have here in the uri will actually be put in our property and this is how we can actually pass data when we navigate from a laser component to the other blazer component now the next important thing that we will have here and it is a little bit different in comparison to the create forecast component is that we'll override asynchronously this on initialized async method because what we want to do here of course is when we want to get the information about it forecast so in order to do that we need to create a get request and we have this get from json async once again to this endpoint slash api slash weather forecast and providing also the id and this will actually trigger the get by id method that we have implemented earlier in our controller and this will actually then return our weather forecast of course in json format but here this extension method would handle it so at the end we'll have here a final forecast and it will of course be displayed or all the information of the forecast will be or are bound and will be displayed in the form uh that we have right now the only thing is that the temperature in fahrenheit is read only so we won't be able to change it manually so then the only thing that we still miss here is a method that gets called when we actually want to update the forecast which say here on valid submit and we want to call the update method and this method is still missing but not for long because here it is so it's just a regular uh async method that returns a task as you can see once again we use http and the put as json async method that will simply put or create a put request for api weather forecast and it will provide a forecast id and of course the entire forecast that needs to be updated and once everything is done we want to redirect back to our fetch data and actually that should do it so right now let's run the application and hope that everything will work correctly so it will take maybe just a few seconds until until we would have our application running it because it's the first time that we actually launch it so yeah let's uh let's make it bigger and we have an exception here okay uh the following errors occurred attribute routing information okay uh controllers better forecast create uh while processing template api controller a replacement value for the token api controller could not be found available action controller to use or as litter string route okay so i probably have a typo somewhere here so let me let me go back here to my controller and let me see what happens so uh what we need here is uh okay we want to get to call this get by id and i guess that should be right here uh it's http get and we have here this route oh okay sorry for that here here is the typo because here we have the controller name so unfortunately i wasn't very careful uh before because we have to to use this actually before it's api slash and then controller here in square bracket so that should be it sorry for that happens unfortunately from time to time so let's run the application once again and i hope that this time uh it should actually work correctly even though the browser didn't get close the last time and so it might be some errors there but uh it's still loading right now now it's loading so okay so if we go on fetch data we see that it's loading and uh right now we see the table and of course the table is empty because we don't have anything in the database it's a totally new database we have configured it right when we started this video so if we click on create entry we see that we are here or we were routed to this create forecast component and the date for today was already populated with today's date so what we can do here is for instance add here a temperature and we can add uh here a summary winter letter and create forecast so we will we are redirected to the fetch data and here we see that right now we get actually the list of forecasts so let's create a new entry and for this entry let's maybe choose a new date let's let's go for yesterday and i don't know yesterday i would say there were zero degrees so what we did is actually that i don't think it will work uh if we will but it should work summary full winter wetter let's click on create and yeah you see that we have this one created and let's create another one for the day before and the day before i don't know we had something like i know five degrees celsius and warmer as usual so let's create forecast so right now we have a list of three forecasts in total and then for instance if we want to edit this one we click on edit and we are redirected to this update forecast component where for instance um updated summary so we have an update and let's click on update forecast and we are redirected to this one and we see that here the summary is already updated then let's try to delete this one so delete and this time something went wrong i guess let's uh let's see what what actually happened here let's go here on network and let's click on delete so i guess we do a request to a wrong url let me actually uh bring this out it would be like that so we are making a request to api slash weather forecast slash 2 and this was an http delete and we get a error 500 back okay so let's see exactly what what we have here on our background now we have of course here some errors argument value cannot be null parameter entity okay so where exactly do we have that uh let's see what do they say okay so let's go to this delete so we have int id this would be to delete uh so forecaster wait let's put a breakpoint here actually and let's try to run this again so let's delete and see exactly what happens so we go here forecast here we have oh we actually don't find it okay so why is this the case because we have this forecast with id2 and we look for a forecast which uh has the id equals to id2 and we want this first or default async so in this case what happens is that it actually it it really doesn't find the forecast which is unfortunate because in the update method uh yeah we look for the same forecast okay so i'm not really sure exactly what happens here right now but maybe i'm missing something so while i'm doing the video it's uh it's not always very very easy to to keep focused on on on what's happened but uh the idea is that it doesn't find this forecast in the database uh and then of course uh since it is a null uh we can't really remove it from the database but actually let's let me uh just uh look a little bit here for instance uh when we want to get by id so it's exactly we do exactly the same thing and when we update the forecast we actually uh can do that so there was no problem in doing that uh and we used exactly the same thing so we get the id do i maybe have a typo somewhere uh i don't know these are angle brackets as soon 48d okay so http uh delete to the route api weather forecast and then slash id so it would be the route was found it was correct the id was found but in the database we seem not to find it okay so i guess we won't stick that much right now with this one let's maybe just go to the sql server object explorer just for short and then in the sql server object explorer uh we can go to the database and just look up so it would be blazer crud uh tables and then we would have this forecast and let's click here on view data and we see that uh yeah strangely enough we deleted so it was actually i guess deleted the first time but it was not updated in the list i guess that was actually the problem i guess that was actually the problem the problem is that when we delete it it actually doesn't update the list and yeah we'll we'll try to resolve that just in a few seconds so let's run that again and then i would expect in this case that we would be able to simply see only two forecasts and not three of them of patch data loading and in that indeed we see only two forecasts and it's exactly the same if we click here on delete uh in this this time i think uh everything will work as expected only that this list doesn't really get updated so if we do this it gets also deleted from this list and this happens uh let me just go quick here back to our fetch data razer component and here when we say that we want to delete the forecast and we say status change that would actually trigger uh the re-rendering of of the of the of the front end but however unfortunately this this doesn't really happen but uh well we see that actually our crowd works so we are right now able to create uh to read to update and to delete weather forecasts in our blazer webassembly app and to wrap up just a short recap about what we did today is well we just wanted to implement some basic crowd operations with blazer web assembly and in order to do that of course we saw that we actually need three things so first of all we would need of course a database and the corresponding database layer and we have implemented it during this video second we needed the controllers so we went on and implement into different crowd methods in our controller of course as controller actions and last but not least the third step was to actually go back to our blazer web assembly application where we have actually created two new components a create a forecast component and an update forecast component and we have reused the fetch data component to actually get some real data via the api and display it in the table with the only addition of two buttons for edit and delete for each of the work for each of the forecasts and a create forecast button to create a brand new forecast and we saw that actually everything worked except for the end that when you delete a forecast even if we have called here status changed the ui didn't re-render so that forecast wasn't actually removed from there but other than this actually everything is okay and we have seen how to implement basic crud with blazer web assembly and of course an asp.net core api in the back end this being said thank you very much for watching i hope you found this video interesting and if you think that it would be useful then don't be shy and just please hit the subscribe button to this channel and share this content with your peers or friends or anybody that you could think could find this type of video useful in the in their learning part that would be highly highly appreciated and i would be totally grateful for you and if you totally enjoyed this content then just get in touch with me just drop a comment i would be happy if you could comment here and if you have questions if you have ideas uh or just even if you want i don't know to criticize uh this content or or challenge it then just feel free to do it and uh well we are an open community and i really like to get engaged with all of you so if you feel the need to say something just use the comments here on this video because it would also be highly highly appreciated so this being said once again thank you very much for watching and until the next time i wish you the very best

Channel: Codewrinkles

Views: 3,730

Rating: 4.9411764 out of 5

Keywords: Blazor, Blazor WebAssembly, Blazor SPA, CRUD, Blazor WebAssembly CRUD, ASP.NET Core, .NET Core, ASP.NET, .NET, Angular, EF Core, Entity Framework Core, DbContext, databases, SQL, web development, programming, C#

Id: EhN8DKwSpiQ

Length: 54min 56sec (3296 seconds)

Published: Wed Jan 13 2021