How to Create a Basic CRUD Application with Blazor?

overview this guide will walk you through building a complete crud (create, read, update, delete) application using blazor in this tutorial, you'll configure a back4app project, design your database schema, and integrate your blazor frontend with back4app via rest apis this process will help you establish a robust backend while ensuring your web application can efficiently manage data initially, you'll set up a back4app project titled basic crud app blazor , which will serve as the backbone of your data management system next, you'll craft a scalable database design by establishing detailed collections and fields, either manually or with the assistance of the back4app ai agent after that, you'll harness the power of the back4app admin app—a user friendly, drag and drop interface—to manage your collections effortlessly finally, you will connect your blazor frontend to back4app using rest apis and secure your backend with proper access control by the end of this tutorial, you will have a production ready web application that supports essential crud operations along with user authentication and secure data updates key learning points build crud applications that handle data operations seamlessly using a reliable backend acquire insights into creating a scalable backend and integrating it with a blazor frontend utilize the drag and drop capabilities of the back4app admin app to simplify data management learn deployment techniques, including docker containerization, to rapidly launch your application prerequisites before starting, make sure you have a back4app account and a new project set up visit getting started with back4app https //www back4app com/docs/get started/new parse app if you need assistance a blazor development environment use visual studio or visual studio code with the latest net sdk (version 6 or above) basic knowledge of c#, blazor, and restful apis check out the blazor documentation https //docs microsoft com/en us/aspnet/core/blazor if required step 1 – initial project setup establishing a new back4app project sign into your back4app account select the “new app” button from your dashboard input the project title basic crud app blazor and follow the on screen instructions to complete the creation process create new project after setup, your new project will display on your dashboard, providing a sturdy foundation for configuring your backend step 2 – designing your database schema crafting your data model for this basic crud application, you'll need to create several collections below are examples of the collections along with the required fields and data types to set up your database efficiently 1\ items collection field data type purpose id objectid auto generated unique identifier title string the name or title of the item description string a short summary of the item created at date the timestamp when the item was created updated at date the timestamp when the item was last modified 2\ users collection field data type purpose id objectid auto generated unique identifier username string unique identifier for the user email string user’s email address password hash string encrypted password for secure login created at date timestamp of account creation updated at date timestamp of the last account update you can create these collections manually in the back4app dashboard by establishing a new class for each collection and adding the necessary columns create new class you can define columns by choosing a data type, naming the field, setting default values, and determining if the field is mandatory create column employing the back4app ai agent for schema creation the back4app ai agent streamlines schema creation directly from your dashboard by entering a prompt detailing your collections and fields, the ai agent automatically generates the necessary database schema how to utilize the ai agent access the ai agent log in to your back4app dashboard and locate the ai agent in the settings or main menu define your data model paste a descriptive prompt that lists the collections and their fields review and confirm check the suggested schema and apply it to your project sample prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) using this ai agent not only saves time but also ensures a consistent and efficient schema setup step 3 – activating the admin app & managing crud operations introduction to the admin app the back4app admin app provides a no code, drag and drop interface to manage your backend data this intuitive tool enables you to perform crud operations with ease activating the admin app navigate to the “more” menu on your back4app dashboard click on “admin app” and then select “enable admin app ” set up your admin credentials by creating an initial admin user, which will also establish default roles and system collections enable admin app after enabling, log in to the admin app to manage your collections and data admin app dashboard performing crud operations with the admin app inside the admin app you can create records click the “add record” button within a collection (for example, items) to add new entries read/update records click on a record to inspect its details or modify its fields delete records remove entries that are no longer necessary this simple, drag and drop interface significantly enhances the data management experience step 4 – connecting blazor with back4app now that your backend is configured, it’s time to integrate your blazor frontend with back4app using rest apis in blazor since the parse sdk is not applicable to blazor, you will leverage rest apis to perform crud operations in your blazor application, use the httpclient to interact with back4app’s rest endpoints example fetching items via rest create a service in your blazor project to fetch items for example // services/itemservice cs using system net http; using system net http headers; using system text json; using system threading tasks; using system collections generic; public class item { public string id { get; set; } public string title { get; set; } public string description { get; set; } } public class itemservice { private readonly httpclient httpclient; private const string baseurl = "https //parseapi back4app com/classes/items"; public itemservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task\<list\<item>> getitemsasync() { var response = await httpclient getasync(baseurl); response ensuresuccessstatuscode(); var json = await response content readasstringasync(); var itemsdata = jsonserializer deserialize\<itemsresponse>(json); return itemsdata results; } } public class itemsresponse { public list\<item> results { get; set; } } integrate such api calls within your blazor components to manage crud operations step 5 – securing your backend implementing access control lists (acls) protect your data by setting acls on your objects for instance, to create a private item public async task createprivateitemasync(item newitem, string ownerid) { // prepare your item data with proper access controls // in your rest call, include acl information as required by your backend // this is a conceptual example; refer to back4app documentation for acl details } configuring class level permissions (clps) within the back4app dashboard, adjust the clps for each collection to ensure only authorized users can access or modify sensitive data step 6 – managing user authentication setting up user accounts in blazor back4app utilizes parse’s user class to handle authentication in your blazor app, manage user sign up and sign in via rest calls for example // services/authservice cs using system net http; using system net http json; using system threading tasks; public class authservice { private readonly httpclient httpclient; private const string signupurl = "https //parseapi back4app com/users"; public authservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task signupasync(string username, string password, string email) { var user = new { username, password, email }; var response = await httpclient postasjsonasync(signupurl, user); response ensuresuccessstatuscode(); // handle success, such as storing tokens or redirecting the user } } similar methods can be implemented for login and session management additional functionalities like social logins, email verification, and password recovery can be set up via the back4app dashboard step 7 – deploying your blazor frontend back4app’s web deployment feature allows you to seamlessly host your blazor application by deploying your code from a github repository 7 1 creating your production build open your project directory in a terminal run the publish command dotnet publish c release this command generates a published folder with optimized static files for your blazor app verify the build confirm that the output folder contains the necessary files (e g , index html , javascript, css, etc ) 7 2 organizing and uploading your code your git repository should encapsulate the complete source of your blazor application an example folder structure might be basic crud app blazor frontend/ \| wwwroot/ \| | index html \| pages/ \| | index razor \| | items razor \| | login razor \| services/ \| | itemservice cs \| | authservice cs \| program cs \| basic crud app blazor csproj \| readme md sample file program cs using microsoft aspnetcore components web; using microsoft aspnetcore components webassembly hosting; using basic crud app blazor; using basic crud app blazor services; var builder = webassemblyhostbuilder createdefault(args); builder rootcomponents add\<app>("#app"); builder rootcomponents add\<headoutlet>("head after"); builder services addscoped(sp => new httpclient { baseaddress = new uri(builder hostenvironment baseaddress) }); builder services addscoped\<itemservice>(); builder services addscoped\<authservice>(); await builder build() runasync(); commit and push to github initialize git in your project folder (if not already done) git init add your files git add commit your changes git commit m "initial commit of blazor frontend source code" create a github repository name it basic crud app blazor frontend push your repository git remote add origin https //github com/your username/basic crud app blazor frontend git git push u origin main 7 3 integrating your repository with web deployment access the web deployment option in your back4app dashboard, open your project ( basic crud app blazor ) and navigate to the web deployment section connect your github account follow the prompts to link your github account, allowing back4app to access your repository select the repository and branch choose the repository (e g , basic crud app blazor frontend ) and the branch (e g , main ) that holds your blazor code 7 4 deployment configuration provide additional details such as build command if the published folder isn’t pre generated, specify a command like dotnet publish c release output directory set the output path (for example, bin/release/net6 0/wwwroot ) environment variables add any required environment settings (such as api keys) in the configuration 7 5 containerizing your blazor application with docker if you prefer docker for deployment, include a dockerfile in your repository here’s an example \# use the official net sdk image for building the app from mcr microsoft com/dotnet/sdk 6 0 as build workdir /src copy \["basic crud app blazor csproj", " /"] run dotnet restore "basic crud app blazor csproj" copy run dotnet publish "basic crud app blazor csproj" c release o /app/publish \# use the official asp net core runtime image to run the app from mcr microsoft com/dotnet/aspnet 6 0 as runtime workdir /app copy from=build /app/publish expose 80 entrypoint \["dotnet", "basic crud app blazor dll"] then, in your web deployment settings, select the docker option to deploy your containerized application 7 6 launching your application initiate the deployment click the deploy button in the back4app dashboard monitor the build back4app will fetch your code from github, run the build command if necessary, and deploy your app in a container get your url once the deployment process is complete, back4app will supply a url for your hosted blazor application 7 7 confirming the deployment open the provided url visit the url in a browser to view your deployed app test the application verify that all pages load correctly and that crud operations function as expected troubleshoot if necessary use browser developer tools and review deployment logs on back4app to diagnose any issues step 8 – summary and further exploration congratulations! you have successfully built a basic crud application using blazor and back4app you set up a project titled basic crud app blazor , designed collections for items and users, and utilized the back4app admin app for seamless data management additionally, you integrated your blazor frontend with back4app using rest apis and applied robust security measures future steps expand your frontend enhance your blazor app with more detailed views, search functionality, or live notifications add advanced features consider incorporating cloud functions, third party integrations, or role based permissions consult additional resources review the back4app documentation https //www back4app com/docs and other advanced tutorials to further optimize and expand your application by following this guide, you now have the foundation to build a scalable and secure crud backend for your blazor application using back4app happy coding!