Save data using Entity Framework Core in Blazor

in this video we're going to learn how to save data to a database using Entity framework core in a Blazer web app in net 8 and we will use the edit form component in Blazer to accept input data this video is in continuation to a previous video that you see on screen so please watch that first if you haven't already done so let's add a method to the iBook repository interface for performing the create operation so let's say task add async book bringing in the namespace simple book catalog. domain. entities and call the parameter book Let's implement this method in the infrastructure project so go to the infrastructure project and open the Book Repository class and implement the interface now say context. books do add book and await notice we have the async mod ifier added here context do saave changes asnc now let's work on the presentation layer so go to the simple book catalog project and expand the components folder first let's make some changes to the main layout component so expand the layout folder and double click main layout. Riser now remove the sidebar div with its navigation menu and also remove the top row div and let's set only the pairing top for this article here so setting to pt5 and since we not using the N menu component let's go ahead and delete that component and expand the pages folder and delete all the components inside that folder now let's add a new razor component which will contain a form to add a new book right click the pages folder and select add razor component name the component add new and click add we want this component to be a routable component so that it can be accessed via a URL so let's set the page directive at the top so say at page SL add- new now if you run the application and navigate to SL add- new we can see the add new heading that was present on our component we don't need the heading so let's remove it now let's set the text that's displayed on the title bar of the browser window or the browser tab by using the page title comp component so say add new book in the code block let's define a public property of type book this book entity is present in the domain layer so let's bring in the namespace simple book catalog. domain. entities normally we wouldn't want to reference the domain entities directly in the presentation project rather we want to use a view model but for this demo I'll stick with the domain entity let's put the using directive in the imports. Razer file so that that we don't have to import it in every Razer component going back to the add new component let's call the property book and instantiate it as well now let's create our form here create a Dev with the bootstrap class row and justify content Center and inside that creative with the class call six let's use the edit form component to create our form set method equals post because this form will post to the server every form needs to have a name so set the form name parameter to add book form and set the model parameter to the book property we just created and lastly turn off autoc completion for the form by setting autocomplete equals off now inside the edit form component create a heading with the text add new book then create a div with some margin bottom so say div class equals mb3 Define a label element element with for set to title and class form label the text of that label should be title and then let's use the input text component with ID set to title and use a bind Das value razor directive attribute setting it to book. title and set the class attribute to form control and Shadow none copy the entire Dev and paste it below three times now for the second label element let's set the for attribute to author and set the label text to author and also set the ID attribute of the input text to author and bind value razor dative attribute to book. author for the next label set the for attribute to publication date and set the text to date published now instead of input text let's use input date so change input text to input date and set it ID attribute to publication date and set bind value to book. publication date now inside this div let's remove the input text component because we want to use input select set the for attribute of the label to category and set the label text to category and Below let's use the input select component and set its ID attribute to category set bind value to book. category and finally set the class attribute to form control Shadow none now let's set a default option for this input select component so inside the input select component Define an option element with value set to zero and set the content to select category next we want to Loop through each member of the category enum so let's use the for each Loop say at for each VAR category in enum doget values and pass in type of category now this category is present in simple book catalog. domain. enm namespace so let's bring that namespace in now we can put that using directive in imports. Razer file now go back to the add new component and inside the for each Loop Define an option element with its value set to at category and set it content to at category do2 string finally we'll create a Dev with a class mb3 and inside that let's define a button element with its text set to submit and class set to BTN B in primary Shadow none following this div let's use the data annotations validator component which enables form validation and lastly use the validation summary component to display a list of all errors now when the button is clicked the form will post to the server so let's use the on valid submit parameter of the edit form component and set it to add book down in the code block create a private async method that returns a task and call it adbook now inside the adbook method we want to be able to access the form data so let's set the supply parameter from form attribute on the book property now once we do this the book property will be supplyed from form data and then we can use the book property inside the adbook method now we want to save the book and we already have a repository for that so inject iBook Repository bring in the namespace simple book catalog. application. interfaces and call it repository put the using directive in inputs. Riser file and go back to the add new component also once we perform the create operation we want to redirect the user to a new page for that we need to use navigation manager so let's inject navigation manager call it navigation then scroll down and inside the adbook method say AIT repository. add async and pass in book then navigation. navigate to let's pass in a slash to go to the root of the app and since we are injecting iBook repository we need to register the Book Repository service so open solution Explorer go to program.cs and here say builder. services. add scoped and for the type arguments pass in iBook Repository bring in the name space comma Book Repository and bring in the name space for that as well now let's run the app first let's demonstrate an important feature of Blazer in net 8 called Static server rendering right click the page and click inspect and go to the network Tab and navigate to/ add- new we can see that the component and all other assets got rendered from the server so this is called Static server rendering so we have our form with all the elements but there's an issue with the select list here we have signs as a default option rather we want select category as a default option we'll fix that in a bit let's submit the form without entering any data click the submit button we see a list of all the validation errors with the default error messages now go back to visual studio and go to the add new component for this input select component we have the select category options value set to zero but if we go to The Domain project and expand the enum folder and open the category enum we see by default the enum members have their values starting from zero that's why we see signs as a default options selected so let's set science to one and expand the in's folder and go to the book class decorate the category property with the enum data type attribute pass in type of category and set the error message to please select a category so when the user does not select a category this error message will be displayed likewise let's set an error message for the title property when a value is not supplied in the required attribute pass in error message equals please provide a title and for the author property let's set the error message to please provide the author's name now let's run the app and navigate to/ add- new we can see our form and we have select category as a default option and if you click the submit button we see our custom error messages now let's demonstrate another feature of Blazer in net 8 called enhanced form handling right click the page and click inspect and click the network Tab and clear the network trace and reload the page once again we see all the assets getting downloaded from the server now watch the loading spinner here once I click the submit button we can see a small blip and on the right hand side here all the assets got downloaded from the server once again so this means that we're not taking advantage of enhanced form handling by default enhanced form handling is disabled so let's go back to visual studio and enable enhanced form handling by setting the enhanced parameter of the edit form component to true now run the app right click the page click inspect and click the network Tab and navigate to the add new component and once again look at the loading spinner when I click the submit button we see there is no blip occurring this time so here on the right hand side we can see that instead of returning all the assets from the server a fix request was made by blazer. web.js for the add new component and only that component was rendered and the UI was updated finally Let's test our form enter some data and click the submit button if we wait for a while it will navigate to the root URL and since we don't have a page for that endpoint we get an error 4 not4 response let's go back to visual studio and go to view SQL Ser object Explorer and open the simple book catalog database and right click the books table and say view data we see that a record got inserted into the database so that's it for this video hope you found the video useful thanks for watching

Channel: CodeGanesh

Views: 1,599

Keywords: blazor crud operations, save data using entity framework core, save data entity framework core, crud operations blazor, blazor .net 8 crud operations, blazor crud operations .net 8, save data to database ef core, create operation entity framework core, create operation ef core, ef core save data, ef core crud operations, editform component, blazor crud, ef core crud, static server rendering, enhanced form handling, .net 8 blazor, blazor crud ef core, blazor ef core, codeganesh

Id: b00KRPwCtGQ

Length: 13min 14sec (794 seconds)

Published: Thu Dec 28 2023