Blazor is now in preview and not experimental anymore. With each preview build there is a lot of breaking changes. The above code will work with the latest preivew build mentioned above.
Sometimes you have to redirect using code in your client side application and one common use case is redirect users to the login page when not authenticated. Blazor is an expreimental framework letting developers write C# on the client side making use of webassenly.To keep the code in a centralised location we will be writing the logic to do the redirection in MainLayout.cshtml.
Below is the full code for MainLayout.cshtml. There is only 2 lines of code that is of intereset to us here.In Line 1 we are injecting the IUriHelper and in Line 17 we are using the NavigateTo method to redirect to the loging page when the user is not authenticated.
@inject Microsoft.AspNetCore.Components.IUriHelper UriHelper
@inherits LayoutComponentBase
<div>
@Body
</div>
@functions
{
// TODO : Setting as not authenticated to false for demo
private bool IsAuthenticated = false;
protected override void OnInit()
{
if (!IsAuthenticated)
{
UriHelper.NavigateTo(@"\login");
}
}
}
Blazor is an experimental .NET web framework using C# and HTML that runs in the browser. We will be looking into using the Blazer on Server with runs on server using the full DotNetCore and uses SignalR to provide nice SPA feel. Microsoft has announced that server-side Blazor will become first class citizen as part .NETCORE 3 with a new name Razor Components (See Blazor update). Client side Blazor will continue as an experiment.
In this tutorial we will be using the server-side Blazor that you can install using the below dotnet new command.
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
Solution Setup
Once the template is created let’s go an create a new Blazor Server project
Create an ASP.NET Core Web Application in Visual studio
Select the Blazor (Server side in ASP.NET Core) project template. Make sure ASP.NET Core 2.1 or higher is selected. I have used 2.1 in the interest of using a non preview version as 2.2 is still in preview at the time of writting.
Your solution now contains 2 new projects the server and Ap
Press Ctrl + F5 and you should have a Blazor server app running.
Now let’s go an add a separate Web Api project to provide api services for our Blazor UI (You could use the Server project for the same but to decouple it I will be using a seperate web api project).
Lets also add a .NET Standard class library and call it FullStack.Client. This will be become the API client that can be called from any .NET project.Your project should look something like this at this point.
Generate Swagger definition from FullStack.Api
We will be generating the client library using Swagger.json and NSwag.Msbuild. Lets start by adding the NSwag.AspNetCore nuget package to the FullStack.Api project, so that we can generate the swagger definition from code.
Install-Package NSwag.AspNetCore -Version 11.20.1
Update the ConfigureServices in startup.cs to AddSwagger
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc()
.SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
services.AddSwagger();
}
Also update the startup to configure swagger using the “UseSwaggerUi3WithApiExplorer” extension method.
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseHsts();
}
app.UseHttpsRedirection();
// Register the Swagger generator and the Swagger UI middlewares
app.UseSwaggerUi3WithApiExplorer(settings =>
{
settings.SwaggerUiRoute = "/api";
settings.SwaggerRoute = "/api/specification.json";
settings.GeneratorSettings.DefaultPropertyNameHandling =
PropertyNameHandling.CamelCase;
});
app.UseMvc();
}
Now if you run the Api project and navigate to /api swagger UI should load.
Lets create a new values-swagger.json file in the FullStack.Client Proect and copy the swagger definition to this file.
Microsoft did announce that in future releases of .NET Core this process will be a lot more automated like adding a reference of the Api project in the client project.
Also add the nuget package for NSwag.MSBuild to FullStack.Client project
Install-Package NSwag.MSBuild -Version 11.20.1
Lets now edit the FullStack.Client Csproj and add the following target
Now if we build the client project we should get ValuesClient.cs generated as seen below.
The generated client used Newtonsoft.Net and so we should add the Newtonsoft nuget package to the client project.
Install-Package Newtonsoft.Json -Version 11.0.2
Using the client in our Blazor server project
Lets now add a reference to the FullStack.Client in FullStack.App and update the Startup class to inject the ValuesClient. For this we also need to add
the nuget package Microsoft.Extensions.Http, so that we can inject the Http client.
Update Index.cshtml to display the values from the values api. Also in update the solution properties to run both the api project and the server project.
If we run the solution now we should see the home page loaded with the values from the values controller.
Kiran Joy 