#100DaysOfCode - Day 26: Basic Blazor Components
4 mins
Yesterday, I released a new page that displays who people have assigned as Secret Santa for. This was done using Blazor components, with the primary component linked later in this post. The syntax for Blazor and Razor allows you to use C# code on these front-end pages, so long as you embed that code with @{ } tags.
With that in mind, you can do most of everything you’d normally expect to do, with the caveat of needing to prepend a @ in-front of a few of the keywords that may be potentially interpreted as html. For example, the following text:
@{
public string TestFunction() { return "do something"; }
/* this is automatically interpreted as c# */
TestFunction();
/* This is not, because it's embedded in HTML. You need another @ */
<div>@TestFunction();</div>
}
Because all of this code we see in the beginning is embedded within <Authorized> tags, the Context keyword automatically hooks into the .NET Identity DB context, which lets me access the (secure) database of users that had created accounts and grab that information, which is needed to then connect to my non-Identity tables that are used in the application.
Further down in the code (outside of the <Authorized> and <AuthorizeView> tags), you’ll notice I do all the calls to my regular DB context from @functions{ }. While this isn’t necessary, I prefer the separation to make it more clear which DB context I’m accessing where.
FILENAME: Shared/RecipientData.razor
<AuthorizeView>
<Authorized>
@{
var identityName = context.User.Identity.Name;
<h2>hello, @identityName</h2>
var myUser = GetMyUser(identityName);
var recipientUser = GetRecipientUser(myUser.RecipientId);
<h3>You have: @recipientUser.Email</h3>
}
@functions
{
private User GetMyUser(string IdentityName)
{
using (var c = new SecretSantaContext(new DbContextOptions<SecretSantaContext>()))
{
var myUser = c.Users.First(x => x.Email == IdentityName);
return myUser;
}
}
private User GetRecipientUser(int myUser_recipientId)
{
using (var c = new SecretSantaContext(new DbContextOptions<SecretSantaContext>()))
{
var recipientUser = c.Users.FirstOrDefault(x => x.UserId == myUser_recipientId);
return recipientUser;
}
}
}
</Authorized>
<NotAuthorized>
<p>This will never load, because this component isn't even attempted to be loaded by the parent component (shown below), unless already Authorized</p>
</NotAuthorized>
</AuthorizeView>
Finally, this component shown above is loaded into the primary page (a more front-end focused razor page, tied to a route or page URL (see top).
That HTML page is saved as a .razor page, but is essentially just a normal HTML page without all the boilerplate <head>, <body>, etc. It has the @page declaration at the top, which tell Blazor what URL routes this page should be loaded from (https://sitename/recipientinfo in this case).
FILENAME: Pages/RecipientInfo.razor
@page "/recipientinfo"
<h1>Recipient</h1>
<p>This component demonstrates fetching a target user and their associated presents they're interested in.</p>
<AuthorizeView>
<Authorized>
/* Only loads that above RecipientData component if the user is Authorized (e.g. logged in) */
<RecipientData/>
</Authorized>
<NotAuthorized>
<p>You are not a part of this Secret Santa game, sorry!</p>
</NotAuthorized>
</AuthorizeView>
Finally, there’s a root HTML page, which loads each of these /Pages, and thus each /Pages’s /Shared components. That root page is where you would put all your JavaScript dependencies, styling, and boilerplate code to handle older browsers (if applicable).
Anyways, while this wasn’t a big deep dive, I hope this gives a sort of decent idea of what Components look like in Blazor!
Happy Coding!