I have a blazor app in the Visual Studio 2022. In it I have a todo list page in the nav menu.
This is the TodoItem.cs:
[Table ("todo")] public class ToDoItem { [Key] [DatabaseGenerated(DatabaseGeneratedOption.Identity)] [Column("id")] public int Id { get; set; } [Column ("name")] [MaxLength(100)] public string? Name { get; set; } [Column("detail")] [MaxLength(100)] public string? Detail { get; set; } [Column("status")] public bool Status { get; set; } }I have it connected to a docker and sql server management database.
This is the ToDoService.cs:
private readonly AppDbContext _context; public ToDoService(AppDbContext context) { _context = context; } public List<ToDoItem> GetToDoItems() { return _context.ToDoItems.ToList(); } public void AddToDoItem(ToDoItem item) { _context.ToDoItems.Add(item); _context.SaveChanges(); } public void RemoveToDoItem(int id) { var item = _context.ToDoItems.Find(id); if (item != null) { _context.ToDoItems.Remove(item); _context.SaveChanges(); } } public void UpdateToDoItem(ToDoItem updatedItem) { var existingItem = _context.ToDoItems.Find(updatedItem.Id); if (existingItem != null) { existingItem.Name = updatedItem.Name; existingItem.Detail = updatedItem.Detail; existingItem.Status = updatedItem.Status; _context.SaveChanges(); } }}This is the TodoList.razor component:
@page "/todolist"@using Quest1.Entities@using Quest1.Model@using Quest1.Service@inject ToDoService ToDoService<h3>To-Do List</h3><div class="add-todo"><input @bind="newToDoItem.Name" placeholder="Enter name" /><input @bind="newToDoItem.Detail" placeholder="Enter detail" /><label><input type="checkbox" @bind="newToDoItem.Status" /> Completed</label><button @onclick="AddToDoItem">Add</button></div>@if (toDoItems != null && toDoItems.Count > 0){<ul class="todo-list"> @foreach (var item in toDoItems) {<li><div class="todo-item"><div class="todo-item-info"><input type="checkbox" @bind="item.Status" /><span>@item.Name</span><span>@item.Detail</span></div><div class="todo-item-actions"><button class="edit-button" @onclick="() => EditToDoItem(item)">Edit</button><button class="remove-button" @onclick="() => RemoveToDoItem(item.Id)">Remove</button></div></div></li> }</ul>}else{<p>No to-do items available.</p>}@if (editMode){<div class="edit-todo"><input @bind="editedToDoItem.Name" placeholder="Enter name" /><input @bind="editedToDoItem.Detail" placeholder="Enter detail" /><label><input type="checkbox" @bind="editedToDoItem.Status" /> Completed</label><button @onclick="UpdateToDoItem">Save</button><button @onclick="CancelEdit">Cancel</button></div>}@code { private List<ToDoItem> toDoItems; private ToDoItem newToDoItem = new ToDoItem(); private ToDoItem editedToDoItem = new ToDoItem(); private bool editMode = false; protected override void OnInitialized() { LoadToDoItems(); } private void LoadToDoItems() { toDoItems = ToDoService.GetToDoItems(); } private void AddToDoItem() { if (!string.IsNullOrWhiteSpace(newToDoItem.Name)) { ToDoService.AddToDoItem(newToDoItem); newToDoItem = new ToDoItem(); LoadToDoItems(); } } private void EditToDoItem(ToDoItem item) { editedToDoItem = item; editMode = true; } private void UpdateToDoItem() { ToDoService.UpdateToDoItem(editedToDoItem); editedToDoItem = new ToDoItem(); editMode = false; LoadToDoItems(); } private void CancelEdit() { editedToDoItem = new ToDoItem(); editMode = false; } private void RemoveToDoItem(int id) { ToDoService.RemoveToDoItem(id); LoadToDoItems(); }}And it's connected with this in the AppDbContext:
public DbSet<ToDoItem> ToDoItems { get; set; }
The Page itself looks like this:enter image description here
When I was using **Add-Migration ** and Update-Database. It was bit clunky since I still could not see the table todo in the Database itself.But when I used a query to import data(Garden,Watering plants,1) to the table. It did show up. As seen in the picture.
Buttons Add, Edit, Remove do not work.Why?
-psI'm sorry for perhaps being unclear. I am very new to all of this and I a bit of rush.Thanks in advance.