Blogs by Ashwin

  Adding Authorization We can determine if a user is authenticated, but we also need to know if they have the rights to use a specific feature. This is the essence of authorization. Fortunately, the available built-in functions accommodate this, even if we need to implement some code to achieve it. The server side contains all the tables required to assign roles to our users, but there are currently no user interfaces accessible for this purpose. Adding Roles From The Server Execute the following steps to add roles from the server: In the MyBlogWebAssembly.Server project, open the Startup.cs file. In the ConfigureServices method, add options to .AddApiAuthorization and remove the default claim mapping. Add roles to Services.AddDefaultIdentity . Add the namespace- using Microsoft.AspNetCore.Identity; using System.IdentityModel.Tokens.Jwt; The server will now send the roles over to the client, but the client won't be listening. Adding Roles To The Client For the client to pick up...

  Configuring the Blazor WebAssembly Project The WebAssembly project offers similar functionalities. It is slightly more complex because it also necessitates API authentication. If we opt to include authentication when setting up the project, IdentityServer will be used by default to authenticate both the client and the API. IdentityServer is an open-source initiative that will assist us in managing authentication for both our website and our API. Updating MyBlogWebAssembly.Server Execute the following steps to update the MyBlogWebAssembly.Server project: In the MyBlogWebAssembly.Server project, open Startup.cs. Add the following namespaces- using MyBlog.Data.Models; using Microsoft.AspNetCore.Authentication; Open appsetting.json and add the following just after the first curly brace - "ConnectionStrings": { "MyBlogDB": "Data Source=../../MyBlog.db" }, In the Configure method, just above app.UseEndpoints , add code. The codes need to be between app.UseRou...

  Implementing Authentication There are numerous built-in features related to authentication. We need to implement authentication independently for the Blazor Server project and the Blazor WebAssembly project since they operate in slightly different ways. Adding Tables To The Database To be able to add authentication, we need to add the necessary tables to our database. This can be done via Entity Framework: In the MyBlog.Data project , we need to add a couple of NuGet packages. Right click on Dependencies and select Manage NuGet Packages. Search for Microsoft.AspNetCore.Identity.EntityFrameworkCore and click Install. Search for Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore and click Install. We also need to add IdentityServer . Search for Microsoft.AspNetCore. ApiAuthorization.IdentityServer and click Install. Open the MyBlogDbContext.cs file . Change the code so that MyBlogDbContext inherits from ApiAuthorizationDbContext and add a new constructor and overridden OnM...

  Adding The API Controller Execute the following steps to create the API: In the MyBlogWebAssembly.Server project, right-click on the Controllers folder and select Add | Class. Name the file MyBlogApiController.cs .  Add a using statement at the top of the file. Inherit from ControllerBase and add attributes. Now we need to access the data through the server-side API. Add code inside the class we just created. Next, we will add the code to get blog posts. Now, we have created a method that returns the data directly from the database. Let's add the function to get the blog post count. We can use the Get verb but with another route. We also need to be able to get one blog post. Let's add an API that saves a blog post. Next up, we add a method for deleting blog posts. In this case, we use the Delete verb, and also add the Authorize attribute. Next, we need to do this for Categories and Tags as well. We have an API! Now it's time to write the client tha...

  Creating The Service There are numerous methods to develop a service, including REST or possibly gRPC. REST, which stands for REpresentational State Transfer, is essentially a method for computers to communicate with one another using HTTP. In REST, various HTTP verbs are utilized for distinct operations. It could look something like this: URI Verb Action /BlogPosts Get Gets a list of blog posts /BlogPosts Post Creates a new blog post /BlogPosts/{id} Get Gets a blogpost with a specific ID /BlogPosts/{id} Put Replaces a blogpost /BlogPosts/{id} Patch Updates a blogpost /BlogPosts/{id} Delete Deletes a blogpost   This is what we are going to implement for tags, categories, and blog posts. Since the API determines if the post should be created, we ...

  Custom Validation Class Attributes By utilizing the edit form, input components, and DataAnnotationValidator , the framework will automatically apply classes to the components based on their validity. The default classes are .valid and .invalid . In .NET 5 , we now have the opportunity to personalize these class names. When utilizing Bootstrap, the standard class names are .is-valid and .is-invalid , and these class names should also include .form-contro l to ensure the appropriate styling. The next component we will develop will assist us in applying the correct Bootstrap styles to all our form elements. We need to create our own FieldCssClassProvider to personalize the classes that Blazor will employ. Now, we will build a component that we can just put inside of our EditForm and access EditContext : In the MyBlogServerSide project, right-click on the Components folder and select Add class, and name the class CustomCssClassProvider. Open the new file and add the code. Now...

  Exploring Form Elements HTML includes a variety of form elements that are fully usable in Blazor. Ultimately, Blazor generates HTML as output. Additionally, Blazor provides components that enhance functionality, making it beneficial to utilize these components rather than relying solely on HTML elements. This approach offers us excellent functionality at no additional cost. Blazor offers the following components: EditForm InputBase < > InputCheckbox InputDate <TValue> InputNumber <TValue> InputSelect <TValue> InputText InputTextArea InputRadio InputRadioGroup ValidationMessage ValidationSummary   EditForm EditForm functions as a form tag but offers additional functionalities. It generates an EditContext instance as a cascading value, allowing all components within EditForm to share the same EditContext. EditContext monitors the metadata related to the editing process, including which fields have been modified, and keeps track of any validation mes...

  Exploring The New Built-in Component When Blazor was initially released, several tasks were difficult to accomplish, and in some instances, we had to use JavaScript to address the challenges. There are following new components or functions: Setting the focus of the UI Influencing HTML head Component virtualization Setting The Focus of the UI By using ElementReference , you can now set the focus on the element. Let's build a component: Right-click on the Pages folder , select New | Razor component , and name it SetFocus.Razor . Open SetFocus.Razor and add a page directive. Add an element reference. Add the textbox and a button. By using @ref, you specify a reference to an object that you can use to access the input box. The button onclick method will execute the FocusAsync() method and set the focus on the textbox. Press F5 to run the project and then navigate to /setfocus. Press the Set focus button and notice how the textbox gets its focus. Influencing HTML Head At times, we ...