Professional Documents
Culture Documents
Creating A Step-By-Step End-To-End Database Server-Side Blazor Application (Updated To .Net 6)
Creating A Step-By-Step End-To-End Database Server-Side Blazor Application (Updated To .Net 6)
11/15/2021 Admin
In this article, we will demonstrate how a list of Weather forecasts can be added to the database by each user. A user will
only have the ability to see their own forecasts.
The new project template in Visual Studio will allow you to create a database using SQL Server Express LocalDB.
However, it can be problematic to install and configure. Using the free SQL Server 2019 Developer server (or the full
SQL Server) is recommended.
Download and install SQL Server 2019 Developer Edition from the following link:
https://www.microsoft.com/en-us/sql-server/sql-server-downloads
Click Create.
Add a connection to your local database server if you don’t already have it in the SQL Server list.
For this tutorial, we do not want to use the SQL Express server on (localdb) that you may already see in the list.
Paste in the connection string for the DefaultConnection and save the file.
Because this is the first time the database is being used, you will see a message asking you to run the migration scripts
that will create the database objects needed to support the user membership code.
After clicking refresh in your web browser, a popup will require you to click Continue.
On the Confirm email page, click the X to close the confirmation notice.
You can click around the application and see that it works.
The Fetch data page currently shows random data. We will alter the application to allow us to add, update, and delete
this data in the database.
Close the web browser to stop the application.
If we do not intend to configure email account verification (using the directions at this link: https://bit.ly/2tf2ym4), we can
open the Program.cs file and change the following line:
builder.Services.AddDefaultIdentity<IdentityUser>
(options => options.SignIn.RequireConfirmedAccount = true)
.AddEntityFrameworkStores<ApplicationDbContext>();
To:
builder.Services.AddDefaultIdentity<IdentityUser>
(options => options.SignIn.RequireConfirmedAccount = false)
.AddEntityFrameworkStores<ApplicationDbContext>();
Paste the following script in the T-SQL window and then click the Update button:
CREATE TABLE [dbo].[WeatherForecast] (
[Id] INT IDENTITY (1, 1) NOT NULL,
[Date] DATETIME NULL,
[TemperatureC] INT NULL,
[TemperatureF] INT NULL,
[Summary] NVARCHAR (50) NULL,
[UserName] NVARCHAR (50) NULL,
PRIMARY KEY CLUSTERED ([Id] ASC)
);
Back in the Server Explorer window, right-click on Tables and select Refresh.
The WeatherForecast table will display.
We will enter some sample data so that we will be able to test the data connection in the next steps.
Set the UserName field to the username of the user that we registered an account for earlier.
If you do not already have it installed, install EF Core Power Tools from:
https://marketplace.visualstudio.com/items?itemName=ErikEJ.EFCorePowerTools
In the Solution Explorer, you will see the Data Context has been created.
Open the Program.cs file.
Add the following code above the var app = builder.Build(); line:
builder.Services.AddSingleton<WeatherForecastService>();
to this:
We will use the Data/EndToEnd/WeatherForcast.cs class file created by the EF Core Tools instead.
This:
Connects to the database using the datacontext we created with the EF Core tools.
Finally, open the FetchData.razor file.
This code simply calls the GetForecastAsync method we created in the previous step, passing the username of the
currently logged in user.
In a normal web application we would have to make a http web call from this client code to the code that connects to the
database.
With server-side Blazor we don’t have to do that, yet the call is still secure because the pages are rendered on the server.
If we are not logged in, and we go to the Fetch data page, we will see a message indicating we are not signed in.
public Task<WeatherForecast>
CreateForecastAsync(WeatherForecast objWeatherForecast)
{
_context.WeatherForecast.Add(objWeatherForecast);
_context.SaveChanges();
return Task.FromResult(objWeatherForecast);
}
Register Log in About rss_feed
Open the FetchData.razor file.
Home Add the following HTML markup directly under the existing table element:
Downloads
<p>
<!-- Add a new forecast -->
[Login] <button class="btn btn-success"
@onclick="AddNewForecast">
Add New Forecast
[Register]
</button>
</p>
This adds a form (that will be displayed a popup because the class for the DIV is modal), that allows the user to enter (and
later edit) data for a forecast.
We do not need JavaScript to make this popup show. We only need to wrap this code with:
@if (ShowPopup)
{
...
}
When the ShowPopup value is true the popup will show. When the value is false, the popup will disappear.
When you run the project, you can click the Add New Forecast button to add an entry.
The form only requires a Fahrenheit, Celsius, and a summary, because the other values (date and username), will be
set by the code.
After clicking the Save button, the entry is saved to the database and displayed.
Replace the existing table element with the following markup that adds an edit button in the last column (that calls the
EditForecast method we will add in the next step):
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date?.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
<td>
<!-- Edit the current forecast -->
<button class="btn btn-primary"
@onclick="(() => EditForecast(forecast))">
Edit
</button>
</td>
</tr>
}
</tbody>
</table>
This sets the current record to the objWeatherForecast object that the popup is bound to, and opens the popup.
// This is an update
var result =
@Service.UpdateForecastAsync(objWeatherForecast);
When we run the application, we now have an Edit button to edit the existing record.
The existing record will display in the popup, allowing us to edit the data and save it.
Add code markup for a Delete button under the code markup for the current Save button in the popup:
However, when we click the Add New Forecast button that opens the same popup…
The delete button does not display (because there is no record to delete at this point).
Links
Blazor.net
OwningComponentBase (background)
Download
The project is available on the Downloads page on this site.
You must have Visual Studio 2022 (or higher) installed to run the code.
18 Comments
1 Login
Name
Joel Lang − ⚑
3 months ago
I love the approach of just being able to do this whole process without handling any HTTP Calls. Why is this not
possible on MAUI Blazor? Are there plans to add this? I guess there would have to be a secondary build result
containing a server you can run and then the apps will connect to this server instead of to a local server. Obviously
there would need some methods to handle not having a connection etc. but those hurdles could be overcome. Is
there really no way currently to do this in MAUI Blazor or am I missing something?
1 0 Reply • Share ›
0 0 Reply • Share ›
Joel Lang
3 months ago
> Michael Washington
edited
− ⚑
But this is just a local database, not a centralized one, right? Unless you would add a centralized
one. I am looking for a solution with a centralized DB on a server. Of course I cannot just connect
to the DB directly since it would leak the connection credentials, since the entire code is
executed on the client device. But in normal Blazor, there is a server where the code is executed.
Therefore I think they should add the ability to have the same setup in MAUI Blazor as you have in
Blazor WebApp. With code that is executed on a server instead of on the client device. Do you
know what I mean?
BTW, great tutorials my man!
0 0 Reply • Share ›
Joel Lang
3 months ago
> Joel Lang
− ⚑
I thought of just making an app that includes my Blazor WebApp Website using an
iframe, but apple probably wouldn't accept that I guess. And you won't have access to
the Platform API (GEO Location etc. but I could live with that)
0 0 Reply • Share ›
I think to achieve what you want to do: "Have a MAUI app connect to a central
database". You would: Authenticate the user, perhaps using Azure BC2, and then the user
uses that auth token to connect to your centralized WebAPI's (perhaps controller
methods in a Blazor Server application), and those controller methods connect to the
central database. No "connection credentials" would exist in the MAUI app to be 'leaked'
0 0 Reply • Share ›
Joel Lang
3 months ago
> Michael Washington
− ⚑
That's brilliant, I will test that, thanks a lot for the tip!
0 0 Reply • Share ›
C
Curt T
a year ago
− ⚑
Thanks for this overview. I remember checking out your LightSwithch stuff in the old days!
1 0 Reply • Share ›
M
Moha Med − ⚑
a year ago
Hi Michael, thank you very much for this Tutorial, it is very helpful!
1 0 Reply • Share ›
AvengerSpartan − ⚑
a year ago
0 0 Reply • Share ›
You will want to download the sample code and compare it to your own. Ensure you are using Visual
Studio 2022 and not Visual Studio 2019. Thanks
1 0 Reply • Share ›
Thank you, it appears that I had a mess with dotnet 5 and 6 but I was already using Visual Studio
2022. I repeated the steps on a fresh project and it worked perfectly up to testing database first
sample data. Now I'm going to continue with the instructions to complete the tutorial. Thanks
again for answering.
0 0 Reply • Share ›
drevange − ⚑
2 years ago
Is the code for this post and demo available to look at to help understand further? Thanks
0 0 Reply • Share ›
0 0 Reply • Share ›
Iliyan Kulishev − ⚑
2 years ago
Hello,
Thank you for this and the other wonderful Blazor example projects. As I am new to Blazor and development in
general, I want to ask this:
Assuming I use Blazor Server and I am not using a remote API for requesting these services, does this mean that I
don't need jwt-based or token based authentication anymore?
0 0 Reply • Share ›
Yes. for Blazor server, if you are not using a remote API for requesting services, you do not need jwt-based
or token based authentication. If you need authentication, you can use the cookie based authentication
that the Microsoft Membership provides. This is what my example demonstrates.
0 0 Reply • Share ›
marcel
2 years ago edited
− ⚑
Hi Michael, thank you very much for this Tutorial, it is very helpful!
My Question, how about if i want to deploy this kind of project (including the SQL DB as a Azure DB) to Azure
WebApp with prof. security (DB password secret etc...) with Azure Vault.
What steps are needed and essential? Do you have a addition and follow up for the security part of your Tutorial?
Many Thanks, Marcel
0 0 Reply • Share ›