Build app using Blazor, .NET Core Web API and Microsoft SQL Server

hello everyone in this tutorial we will learn how to build a simple to do application from scratch using Blazer as frontend.net core web API as backend and Microsoft SQL Server as the database here is a demo of the web application [Music] we will first install all the prerequisites then we will create the database and objects required for our app next we will create the back end project using.net core web API and finally we will start creating the Blazer project [Music] let's install SQL Server management Studio which we will be using to create database objects in SQL Server ssms is installed successfully let's install Visual Studio which we will be using to develop the app which is needed for this project we will be installing the community version which is free for learning purposes let us run the installer file let me choose asp.net and net desktop development let me put a shortcut in the desktop we can skip the sign in and choose a theme Visual Studio is now ready to be used let us now set up an SQL Server database using azure let's login to Azure portal please note that you need to have a valid subscription to create resources in azure now let's create the SQL database let's create a new Resource Group next we need to enter the database and server names next we need to add credentials for login let's choose development version as it costs less and also reduce the data Max size let's choose public endpoint since I do not have any private Network and let's keep others as default the database server is now ready we can use it in our app with the help of connection strings let's connect to the database using the SQL Server management Studio looks like we need to provide access to our IP address let's add it in the Azure portal now let's connect let's add the table required for our app to store the notes details it will have two Fields one is an auto-generated ID and another one to store the notes description let's add some records into it our database table is now ready to be used let's start creating the API project open Visual Studio let's choose asp.net core web API we don't need https now we need to add a couple of changes to the project openprogram.cs file we need to add Json serializer as default so let's install newtonsoft Json package looks like the latest version is not compatible let's use the older version now let's configure this in program.cs file next we need to enable course so that we can consume the services from the front-end project generally this is not recommended in production you should only whitelist the servers accordingly now let's add a controller to add our API methods we need to First add SQL server connection settings in app setting Json file let's get the SQL connection strings from Azure portal now let's write the method to get all the notes data let's write the select query to get the data we need to get the connection details we can make use of dependency injection to access connection details let's complete our get notes method once data is available in data table we will return this as Json result Let's test if this works we see that it works now let's complete the ADD and delete notes methods as well Let's test if they were work as expected we see that we are able to add new notes let's check the delete method delete method also works our API project is now ready let us now create the Blazer project open up visual studio and choose Blazer server app project we don't need https as of now openprogram.cs here we need to use HTTP client modules so as to work with API methods let's simply run the project and check how it looks we can see a default template with few navigation menus already let's add our to-do app as one of the navigation menu let's create a Razer component we need to add the routing with help of page attribute now let's an entry in the navigation bar let's check if this works we see a new menu item for our to-do app now let's add the methods in HTML for our app to help with the serialization of the notes data let's create a class it will have ID and description fields let's add a variable to store the API URL let's also create an array variable to store the notes data now let's create a method to fetch notes data from API and populate the notes array we will make use of the HTTP client module once we get the response we shall update the notes array variable now let's add the HTML to display the notes data we will make use of for each Loop and display the notes description we need to call the refresh list method on page load so we will override the uninitialized method and call the refresh list method here let's check if this works we see the data as expected now let's complete the adding and deletion of notes functionality we need a text box to capture the new notes data let's create a variable to store the new notes let's add a button to call the method to add new notes let's also add button to delete a particular notes we need to pass the ID of the notes to be deleted now let's complete the add notes method we need to create a form data to send the new notes to add notes API method once added we shall display the response and also call the refresh list method let's also complete the delete notes method we will pass the ID of the notes to be deleted in the query string let us now check if everything works as expected let's add new notes this works now let's try to delete a notes delete also works as expected our to-do app is now completed

Channel: Art of Engineer

Views: 3,608

Keywords: blazor, .net core, .net core web api, sql server, full stack, front end, backend, tutroial

Id: 3HOUg86TN50

Length: 28min 22sec (1702 seconds)

Published: Wed Jun 21 2023