Building Modern SaaS Applications with C# and .NET. by Andy Watt

Author:Andy Watt
Language: eng
Format: epub, mobi
Publisher: Packt Publishing Pvt Ltd
Published: 2023-05-30T00:00:00+00:00

Figure 7.5 – Starting to build the GoodHabits page

In the preceding screenshot, we can see that we have successfully added the navigation and sketched out the GoodHabits page! Let’s add some more functionality.

We will start by modifying the code in the code block to allow us to view, add, edit, and delete the habits. We will shortly bind these functions to UI controls so that we can manipulate the habits in the list.

In the @code block, start by adding some class-level variables:

private Habit? SelectedHabit { get; set; } private Habit? EditingHabit { get; set; } private Habit? AddingHabit { get; set; } private bool IsEditing { get; set; } = false;

This will allow us to select a habit out of the list, edit that habit, and store a state variable that tells the view when we are editing.

Next, add a function that allows us to select a habit:

private void ShowDetails(Habit habit) { SelectedHabit = habit; IsEditing = false; }

Add a function that will allow us to add a new habit with some default properties to the list:

private void AddHabit() { Habit newHabit = new Habit() { Name = "New Habit", Description = "Enter a description here" }; GoodHabits.Add(newHabit); SelectedHabit = newHabit; }

Add a function that will allow us to edit a habit:

private void EditHabit(Habit habit) { SelectedHabit = habit; ShowEditForm(); }

Add a function that will allow us to delete a habit from the list:

private void DeleteHabit(Habit habit) { GoodHabits.Remove(habit); if (SelectedHabit == habit) { SelectedHabit = null; } }

Add a function that will allow us to edit a habit from the list:

private void ShowEditForm() { IsEditing = true; EditingHabit = new Habit() { Id = SelectedHabit!.Id, Name = SelectedHabit!.Name, Description = SelectedHabit!.Description}; }

Add a function that will allow us to save a habit that we have been editing:

private void SaveHabit() { GoodHabits.Add(EditingHabit!); GoodHabits.Remove(SelectedHabit!); IsEditing = false; SelectedHabit = null; }

Finally, add a function that will allow us to cancel any edits that we made, should we change our minds:

private void CancelEdit() { IsEditing = false; EditingHabit = null; SelectedHabit = null; }

That should allow us to manipulate the habits in the list! Now, we will add the UI and bind the elements to the functions that we just created!

We’ll start by adding the list of habits to the left-hand pane. Copy the following HTML in directly under the <h3>Good Habits</h3> line in the HTML:

<ul class="list-group"> @foreach (var habit in GoodHabits) { <li class="list-group-item d-flex justify-content- between align-items-center"> <span @onclick="() => ShowDetails(habit)">@habit.Name</span> <div> <i class="oi oi-eye mr-2 text-primary" @onclick="() => ShowDetails(habit)"></i> <i class="oi oi-pencil mr-2 text-primary" @onclick="() => EditHabit(habit)"></i> <i class="oi oi-trash text-danger" @onclick="() => DeleteHabit(habit)"></i> </div> </li> } </ul> <button class="btn btn-primary mt-3" @onclick="AddHabit">Add Habit</button>

You can see that we loop over the list of dummy habits that we included in the code block, binding these habits to the functions that we added to the @code block. We have added buttons to add, edit, and delete the habits in the list.

Finally, we need to add the HTML to display or edit the habit on the right-hand side of the screen.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.