Today I thought of Blazor and I watched the first dozen minutes of this and in doing so I learned that while we are still waiting until midyear for the Blazor WebAssembly stuff, the Blazor Server version, which will be more sluggish in performance and not include a disconnected mode, is here to goof off with now. Visit blazor.net for more. You will need .NET Core 3.0, Visual Studio 2019 version 16.3 or better, and the Blazor templates stuff for making a new project. I made a project. My Program.cs parallels that of the video more or less with more or less this in it:
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;
namespace Tinker.UserInterface
{
public class Program
{
public static void Main(string[] args)
{
CreateHostBuilder(args).Build().Run();
}
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStartup<Startup>();
});
}
}
Startup.cs in turn looks like so. You may see where we are both using the server-side rendering and then pointing to a _Host.cshtml file as the front door to the application.
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Tinker.UserInterface.Data;
namespace Tinker.UserInterface
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
}
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
}
}
_Host.cshtml in turn has this in it. The video calls out the blazor.server.js callout in JavaScript and the Razor syntax two lines above it as "what is special" herein. SignalR is used to communicate back to the server from the client. It fakes out the magic to be for real midyear, if you believe all that. I'm not sure I am buying in.
@page "/"
@namespace Tinker.UserInterface.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tinker.UserInterface</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
The video has you make Component1.razor as a Blazor object. It looks like this. The video puts emphasis on how the usual onchange event is swapped out with oninput here so that the event should trigger whenever we type in the control.
@using Microsoft.AspNetCore.Components.Web
<h3>Component1</h3>
<input @bind="message" @bind:event="oninput" />
<p>message: @message</p>
@code {
string message;
}
Around the twelve minute mark the video was coughing up this as the way to call out to what is immediately above in a Razor .cshtml view. It looks a lot like what is in _Host.cshtml with App swapped out with Component1. I don't know where Component1 comes from other than the file name honestly. I don't see a deeper tie in yet.
@(await
Html.RenderComponentAsync<Component1>(RenderMode.ServerPrerendered))
No comments:
Post a Comment