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

Author:Andy Watt
Language: eng
Format: epub
Publisher: Packt
Published: 2023-10-15T00:00:00+00:00

Logic, including calling the API

We will modify the code that we built previously to connect to the API. If we did our jobs well, and correctly separated the UI elements from the logic, we should be able to make this change by only modifying the code. Let’s see how we did!

Start by adding a string constant that points to the API URL:

private const string ServiceEndpoint = "http://localhost:5300/gateway/habits";

Make sure to set the port correctly. Also, note that hardcoding a URL is not really good practice, but it will suffice for this demo.

Next, comment out or delete the three dummy habits that we added. From now on, we will get the habits that we stored in our database:

private List<Habit> GoodHabits { get; set; } = new List<Habit>();

We need to add a hook to fetch the habits from the database. We will tap into the initialization hooks and add the following method:

protected override async Task OnInitializedAsync() { httpClient.DefaultRequestHeaders.Add("tenant", "CloudSphere"); GoodHabits = await httpClient.GetFromJsonAsync<List<Habit>>($" {ServiceEndpoint}"); }

This uses httpClient to call the API endpoint, which will return the list of habits that are stored in the database.

Before we can add the calls to interact with the add and edit endpoints, we will need to create some classes. Add two private classes as follows:

private class CreateHabit { public string Name { get; set; } = default!; public string Description { get; set; } = default!; public int UserId { get; set; } } private class UpdateHabit { public string Name { get; set; } = default!; public string Description { get; set; } = default!; }

Next, modify the AddHabit method to interact with the API:

private async Task AddHabit() { var newHabit = new CreateHabit() { Name = "New Habit", Description = "Enter a description here", UserId = 101 }; var response = await httpClient .PostAsJsonAsync(ServiceEndpoint, newHabit); var habit = await response .Content.ReadFromJsonAsync<Habit>(); // Add the new habit to the list of habits GoodHabits.Add(habit!); SelectedHabit = habit; }

Add a line to the DeleteHabit method:

private void DeleteHabit(Habit habit) { httpClient.DeleteAsync($"{ServiceEndpoint}/ {habit.Id}"); GoodHabits.Remove(habit); if (SelectedHabit == habit) { SelectedHabit = null; } }

And finally, modify the SaveHabit method to include the required interactions:

private void SaveHabit() { httpClient.PutAsJsonAsync($"{ServiceEndpoint}/ {EditingHabit!.Id}", EditingHabit); GoodHabits.Add(EditingHabit!); GoodHabits.Remove(SelectedHabit!); IsEditing = false; SelectedHabit = null; }

That’s done! With just a few small changes, we are now hooked up to the API and the database. We have now created the outline of a fully functioning SaaS application!

To prove this, go into the Run and Debug menu and execute the Run All compound task that we created in Chapter 6. This will start both the microservice projects, the API gateway, and the client project. Then, navigate to the client in the browser. You should see the contents of your habits database on the screen! We are much closer to completing our SaaS application!

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.