Blazor Weather Forecast CRUD

 


On my way to set up SQLite within Blazor, I ran into a few more hurdles than I was expecting. So, I decided to write about it. I have used SQLite with C# in the past and it was quite straightforward. But since then, there must have been a couple of updates that did not work quite like they expected.

Once I got SQLite working, I decided it would be fun to create a new Weather Forecast CRUD application to highlight using SQLite with Blazor. That part turned out to be fun.

Application Goal

The goal was simple, using the Weather Forecast, Fetch data, part of the standard Blazor template, read the records from an SQLite database, and add the functionality of adding, editing, and deleting forecast records. Additionally, I wanted to use TailwindCss for styling. I am incredibly pleased with the result of the application.


Connecting to SQLite

Connection to SQLite has simple steps:

    1. Add NuGet Microsoft.EntityFramework.Core.SQLite
    2. Add NuGet Microsoft.EntityFramework.Core.Tools
    3. Create the db context
    4. Add the DbContext Service in Program.cs

        builder.Services.AddDbContext<WeatherDbContext>(options =>
        {
            options.UseSqlite("Data Source = data\\WeatherData.db");
        });

    5. Run the DB migrations to initial the database.

    Normally that is all that is needed, but when I tried to run the DB migrations I received an error:
 
"You need to call SQLitePCL.raw.SetProvider()" error when using Microsoft.EntityFrameworkCore.Sqlite 5.0.4 via C++\CLI wrapper”
After getting frustrated and googling, I found the solution(https://github.com/dotnet/efcore/issues/24493). There is a NuGet package called SQLitePCLRaw.batteries_v2.dll. 

Once I added this NuGet package I was able to run the db migrations and create the SQLite database. The article really did not say what the issue was but adding the NuGet package did work. 

I did add a method to do the initial population of the database with ten records. It helps when building out the other pages.

Weather Forecast Service

I expanded the Weather Forecast service to be a repository for the WeatherForecast db set. I added the following methods:

    1. Constructor that injects the WeatherDBContext
    2. Populate Data Base
        a. This is only called if the database has no Weather Forecast items
    3. GetAsync
        a. This method returns the collection of records from the database.
    4. Add Forecast
    5. Update Forecast
    6. Delete Forecast

I could have just used an UpInsert method to manage both the add and the update. I personally prefer separate Add and Update for simplicity.

Data Grid View

I had to add additional functionality to the grid on the FetchData page. I added the ability to:

    1. Load the grid from the GetAsync method from the Weather Forecast service
    2. Click on a grid item
        a. Have the grid highlighted
        b. Store the current grid item that was clicked on.
            i. We will need this for the delete and the edit.
I added three action buttons right above the grid. The user will use these buttons to Add, Edit and 
Delete records.



Using the click on grid item event, I was able to disable the Edit and Delete buttons if there were no records selected.

The code that manages the highlighting of the grid line that was clicked on is done via JavaScript. When a row is clicked, we must turn off any highlighted rows and then highlight the one row that was clicked. At some point, I would like to see if this can be done in C#.


Add / Edit Form




The date is set to the current date. The standard HTML input with a type of date is used for the data input. I found it easy to work with. The standard HTML input with the type of number is used for the temperature. The summary is just a text input.


On cancel, I just return to the grid page. 

On Save, the application will:

    1. Validate the data entered, date, temperature and summary are not empty
    2. Call the Weather Forecast service to save the record
    3. The application will return to the fetch data page and display either a successful or error message

For editing, I use the forecast object in the application state and populate the form:


Cancel and Save work the same as add, but will update the record, instead of adding it.

Delete Confirmation Modal

For the delete function, I need to prompt the user for confirmation that they really want to delete the selected record. If so, we will delete it from the database. When the record is successfully deleted, we need to re-load the forecast items from the database and refresh the grid. We need to close the modal and clean up the row selection index.

There are several good NuGet packages I could have used for the confirmation modal, but I created my own and it looks sharp.





It was easy to support the modal once it was created. I made the “hidden” class soft. When the user clicks on the “Delete” button, the modal is displayed. If the user clicks on the ”No, cancel” button, the hidden class is reset, and the UI is updated. If the user clicks on the “Yes, I’m sure” button, the delete forecast method in the WeatherForecast service is called.

On success, the success message is displayed. If there is an error deleting the record, the error message is displayed. The last step is to reset the hidden class and close the modal. The date and summary on the modal are displayed so the user can see which forecast they are deleting.

An additional project that I might do is to create a reusable component out of this modal because it looks so cool.


Toast

At first, I thought I would just create the toast like the model, but it was more work than I wanted to do. I went with the Blazored Toast (https://github.com/Blazored/Toast) NuGet and is easy to use, even though it does have a Bootstrap look to it. I might look at creating my own with TailwindCss styling.


Application State

I went with using Application State to pass the forecast object to the edit page. I did this as opposed to passing the ID and then retrieving the record from the database. Using the application state saves a db lookup.

This application is built as a Blazor Serve application. Application State service must be defined as a Scoped Service. This will ensure the data is per session. If you define it as a Singleton, the data is shared between all users. If this were a Web Assembly application, you would use a Singleton since it is running on the client side.

    builder.Services.AddScoped<AppDataService>(); 

The service, itself contains several properties, a property for a Weather Forecast object, a property for the Result from adding / editing, and a property for any errors from adding / editing.

 

Styling

Keeping with my current philosophy I am still restyling using my blog applications with TailwindCss(https://tailwindcss.com). It makes things so much easier to style. For some reason, TailwindCss has just clicked with me.

 

Summary

This was a fun and educational project. The main goal of getting SQLite to work within Blazor took extra steps, but I got it working. The styling, modal, and grid events added real enjoyment to the project.

I will continue to use/add to this project for other blog posts.

 

[source]




Comments

Post a Comment

Popular posts from this blog

Yes, Blazor Server can scale!

Image
From the very beginning of the release of Blazor Server naysayers have incorrectly stated that Blazor Server can not scale.  They usually state that the limit is 5,000 concurrent users. There are several misconceptions and wrong assumptions about their statement.  Let's break it down and get a better understanding of Blazor server-side scaling. What is the "limit" for users When Microsoft talks about the need to scale an application, what they are saying is that when a normal response for any concurrent user is taking longer than 200 ms, the system is not performant and needs to scale. We will accept that definition: If any normal user response is taking longer than 200 ms, the system needs to scale for concurrent users. By a normal response, we are referring to a page get, a post, etc.  Large database access requests would not be included in this measurement. What is scaling There are 2 common ways to scale, scale, out horizontally, and scale-up, up vertically. In our di...
Read more

Blazor - Cool Blur Loading Page

Image
  I was working on a project and wanted an original way of showing the user the application was loading besides using the normal "Loading...." text.  I came across a website page and thought I could refactor that into what I was looking for. When my application starts, it displays a full-screen image with a count down while the page loads.  As a special effect, I want to unblur the image the closer it gets to the applicaiton finishing loading.  Once the teh count down is done, we pause for 1 sec, for effect, then proceed to the application.  I think it turned out pretty cool.  See the demo here . I used the server side Blazor project template in my example, but the code should work on any Blazor template. Template changes 1. Rename the original Index.razor page to "home".  Besure to change the routing at the top of the page as well.      @page "/home" 2. Create a new Index.razor page     a. Add routing      ...
Read more

Blazor new and improved Search Box

 Back in March, I posted a new Blazor data grid with a search box ( see post ).  Since then I have found a new and improved search box that I wanted to implement.  The search part is implemented the same.  What I added was the ability for the user to narrow down the search by selecting which field they wanted to search on.  This will help the user find what they are looking for and in a large collection, the search will end up being faster. The goal of making the change was to make the search box a new component and have it handle the UI functionality part. Prep Work Here is the prep work I did before adding the search box: Started with the source code from the post listed above. Upgraded the project to .Net 5 Upgraded the Nuget packages that were out of date. Ensured every build and run. Change to a Component I wanted to create a component for the search box so I could use it in other applications.   1. Create a Folder under UIControls called "SearchB...
Read more