Blogs by Ashwin

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

  Understanding Dependency Injection (DI) DI is a software design pattern and a methodology for achieving Inversion of Control (IoC). IoC is a broad term that refers to the practice of indicating that a class requires an instance of another class, rather than allowing our classes to create an object themselves. We can express that our class needs either a particular class or a specific interface. The responsibility for creating the class lies elsewhere, and IoC determines which class will be instantiated. In the case of DI, it represents a type of IoC where an object (class instance) is supplied via constructors, parameters, or service lookups. There are numerous benefits to implementing Dependency Injection (DI). Our dependencies are not tightly bound, allowing us to avoid creating an instance of another class within our own. Instead, we request an instance, facilitating easier test writing and enabling implementation changes based on different platforms. The external dependencies...

  Exploring Components In Blazor, a component refers to a .razor file that may encapsulate a specific, self-contained functionality (including both code and markup) or may serve as a standalone page. Additionally, a component has the capability to contain other components. There are three different ways we can create a component: Using Razor syntax, with code and HTML sharing the same file Using a code-behind file together with a .razor file Using only a code-behind file Counter The counter page displays a button and a counter, where pressing the button increments the counter. At the top of the page, the @page directive enables direct routing to the component. By running the MyBlogServerSide project and add/counter to the URL, we can access the component directly via its route. The implementation of the counter component is consistent for both Blazor WebAssembly and Blazor Server. In contrast, the FetchData component has two distinct implementations since the Blazor Server project...

  Implementing The Interface To implement the interface for the Blazor Server implementation, follow these steps: First, we need to create a class. Right-click on the MyBlog.Data project, select Add | Class, and name the class MyBlogApiServerSide.cs. Open MyBlogApiServerSide.cs and replace the code. We start by adding the namespaces we need and then create a class that implements the ImyBlogApi interface. Add a code to MyBlogApiServerSide.cs inside of the class. To retrieve the data, we will implement a DbContext, but instead of adding it directly, we will utilize a DbContextFactory. Using data contexts in a unit of work is advised for Blazor, implying that we should instantiate the data context and subsequently dispose of it for each data access operation we perform. Add a code to our MyBlogApiServerSide.cs just under the code we just added in the class. Add relevant codes under the code we just added. We could have done the same in our API, just having one delete method, but...

  Creating The Database Context The Database Context is the class from which we will access the database. This is how we create one: Right-click on the MyBlog.Data project and select Add | Class. Name the class MyBlogDBContext.cs. Open the new MyBlogDBContext.cs file and replace the content with a code. This file contains two classes- MyBlogDbContext and MyBlogDbContextFactory. MyBlogDbContext serves as the DbContext for our database, allowing us to interact with it. The second class, MyBlogDbContextFactory, is intended for setting up our database during the migration process; it consists of code that executes exclusively when we are performing migrations, not during production. Creating A Migration A migration is a code snippet used for configuring the database, which encompasses the creation of the database and the establishment or modification of tables. We can do this from within Visual Studio: Start PowerShell and navigate to our MyBlog.Data folder. If this is the first t...

  Creating A Data Project To preserve our blog entries, we can utilize Entity Framework, which is Microsoft's Object Relational Mapping (ORM) tool. This framework allows developers to interact with data through domain-specific classes without needing to concern themselves with the underlying database. There are two ways to use Entity Framework: The database-first approach: This is when we already have an existing database and generate classes based on that database. The code-first approach: This is when we first write the classes, which will then generate the database. Creating A New Project There are numerous methods for storing data. We can implement an SQLite database when developing the blog. The information will be available for both the Blazor WebAssembly project and the Blazor Server project. To create a new project, follow these steps: Open a PowerShell prompt. Navigate to the MyBlog folder. Create a class library (classlib) by typing the following command- dotnet new cla...