Blogs by Ashwin

  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 ...

  Building an Alert Component To gain a clearer insight into using render fragments, we’ll create an alert component. The components provided by default utilize Bootstrap, so we will adopt that approach for our component as well. Bootstrap offers numerous components that can be easily adapted for Blazor. In large projects with multiple developers, creating components helps ensure that the entire team maintains a consistent coding style. Let's build a simple alert component, based on Bootstrap: Create a folder by right-clicking on MyBlogServerSide project | Add | New folder and name the folder Components . Create a new Razor file by right-clicking on Components | Add | Razor component and name the component Alert.razor . Replace the content with the Alert.razor file. Add a code section with a RenderFragment property called ChildContent and replace the alert text with the new property. In the code section, add enum containing the different styles available. Add a parameter/pro...

  Exploring Binding By utilizing bindings, you can link variables either inside a component (allowing for automatic updates) or by assigning a component attribute. In Blazor, we can bind values to components and there are two different ways to do this: One-way binding Two-way binding Through the use of binding, we can transmit information between components and ensure that we can modify a value whenever we choose. Adding Actions and EventCallback To relay changes, we can utilize EventCallback . EventCallback<T> has some differences compared to what we might recognize in .NET. It is a class specifically designed for Blazor, allowing the event callback to be made available as a parameter for the component. In .NET as a whole, it is possible to attach several listeners to an event (multi-cast), whereas with EventCallback<T> , you can only attach a single listener (single-cast). It's important to note that you can utilize events in Blazor similarly to how you do in .NET. H...