Introduction<\/p>\n\n\n\n
Blazor is a versatile and powerful web framework that allows developers to build interactive web applications using C# and .NET. One of the fundamental operations in web development is CRUD (Create, Read, Update, Delete). In this article, we will explore how to implement CRUD operations in a Blazor application. By the end of this tutorial, you’ll have a clear understanding of how to create, read, update, and delete data in a Blazor application.<\/p>\n\n\n\n
Prerequisites<\/p>\n\n\n\n
Before diving into Blazor CRUD operations, make sure you have the following prerequisites:<\/p>\n\n\n\n
Setting Up the Blazor Application<\/p>\n\n\n\n
Let’s start by creating a new Blazor application. Open your preferred development environment, and run the following commands in the terminal:<\/p>\n\n\n\n
dotnet new blazor -n BlazorCRUD\ncd BlazorCRUD<\/code><\/pre>\n\n\n\nThis will create a new Blazor application named “BlazorCRUD.”<\/p>\n\n\n\n
Data Model<\/p>\n\n\n\n
To implement CRUD operations, you need data to work with. In this example, we’ll create a simple “TodoItem” model to represent our data. In the Data<\/code> folder, add a class called “TodoItem.cs”:<\/p>\n\n\n\npublic class TodoItem\n{\n public int Id { get; set; }\n public string Title { get; set; }\n public bool IsDone { get; set; }\n}<\/code><\/pre>\n\n\n\nImplementing the Data Service<\/p>\n\n\n\n
To manage the CRUD operations, create a service to handle data operations. In the Services<\/code> folder, add a class called “TodoDataService.cs”:<\/p>\n\n\n\nusing System.Collections.Generic;\n\npublic class TodoDataService\n{\n private List<TodoItem> todos = new List<TodoItem>();\n\n public List<TodoItem> GetAllTodos()\n {\n return todos;\n }\n\n public void AddTodo(TodoItem todo)\n {\n todo.Id = todos.Count + 1;\n todos.Add(todo);\n }\n\n public void UpdateTodo(TodoItem todo)\n {\n var existingTodo = todos.Find(t => t.Id == todo.Id);\n if (existingTodo != null)\n {\n existingTodo.Title = todo.Title;\n existingTodo.IsDone = todo.IsDone;\n }\n }\n\n public void DeleteTodo(int id)\n {\n todos.RemoveAll(t => t.Id == id);\n }\n}<\/code><\/pre>\n\n\n\nCreating Blazor Components<\/p>\n\n\n\n
Now, let’s create Blazor components for each CRUD operation.<\/p>\n\n\n\n
\n- Create a Component for Listing Todos<\/strong> In the
Pages<\/code> folder, add a Blazor component called “TodoList.razor” to display the list of todos:<\/li>\n<\/ol>\n\n\n\n @page \"\/todolist\"\n\n <h3>Todo List<\/h3>\n\n <table class=\"table\">\n <thead>\n <tr>\n <th>ID<\/th>\n <th>Title<\/th>\n <th>Is Done<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n @foreach (var todo in todos)\n {\n <tr>\n <td>@todo.Id<\/td>\n <td>@todo.Title<\/td>\n <td>@todo.IsDone<\/td>\n <\/tr>\n }\n <\/tbody>\n <\/table>\n\n @code {\n List<TodoItem> todos;\n\n protected override void OnInitialized()\n {\n todos = todoDataService.GetAllTodos();\n }\n }<\/code><\/pre>\n\n\n\n\n- Create a Component for Adding Todos<\/strong> Add another Blazor component called “AddTodo.razor” for creating new todos:<\/li>\n<\/ol>\n\n\n\n
@page \"\/addtodo\"\n\n <h3>Add Todo<\/h3>\n\n <form>\n <div class=\"form-group\">\n <label for=\"title\">Title<\/label>\n <input type=\"text\" id=\"title\" class=\"form-control\" @bind=\"todo.Title\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"isDone\">Is Done<\/label>\n <input type=\"checkbox\" id=\"isDone\" class=\"form-check-input\" @bind=\"todo.IsDone\" \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\" @onclick=\"AddTodo\">Add Todo<\/button>\n <\/form>\n\n @code {\n TodoItem todo = new TodoItem();\n [Inject] private TodoDataService todoDataService { get; set; }\n\n private void AddTodo()\n {\n todoDataService.AddTodo(todo);\n NavigationManager.NavigateTo(\"\/todolist\");\n }\n }<\/code><\/pre>\n\n\n\n\n- Create a Component for Editing Todos<\/strong> Now, add a component for editing existing todos:<\/li>\n<\/ol>\n\n\n\n
@page \"\/edittodo\/{id}\"\n\n <h3>Edit Todo<\/h3>\n\n <form>\n <div class=\"form-group\">\n <label for=\"title\">Title<\/label>\n <input type=\"text\" id=\"title\" class=\"form-control\" @bind=\"todo.Title\" \/>\n <\/div>\n <div class=\"form-group\">\n <label for=\"isDone\">Is Done<\/label>\n <input type=\"checkbox\" id=\"isDone\" class=\"form-check-input\" @bind=\"todo.IsDone\" \/>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\" @onclick=\"UpdateTodo\">Update Todo<\/button>\n <\/form>\n\n @code {\n [Parameter] public int id { get; set; }\n TodoItem todo;\n [Inject] private TodoDataService todoDataService { get; set; }\n [Inject] private NavigationManager NavigationManager { get; set; }\n\n protected override void OnInitialized()\n {\n todo = todoDataService.GetAllTodos().Find(t => t.Id == id);\n }\n\n private void UpdateTodo()\n {\n todoDataService.UpdateTodo(todo);\n NavigationManager.NavigateTo(\"\/todolist\");\n }\n }<\/code><\/pre>\n\n\n\n\n- Create a Component for Deleting Todos<\/strong> Finally, create a component to handle todo deletion:<\/li>\n<\/ol>\n\n\n\n
@page \"\/deletetodo\/{id}\"\n\n <h3>Delete Todo<\/h3>\n\n <p>Are you sure you want to delete this todo?<\/p>\n <button class=\"btn btn-danger\" @onclick=\"DeleteTodo\">Delete<\/button>\n\n @code {\n [Parameter] public int id { get; set; }\n [Inject] private TodoDataService todoDataService { get; set; }\n [Inject] private NavigationManager NavigationManager { get; set; }\n\n private void DeleteTodo()\n {\n todoDataService.DeleteTodo(id);\n NavigationManager.NavigateTo(\"\/todolist\");\n }\n }<\/code><\/pre>\n\n\n\n