Blogs by Ashwin

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

  Creating a Blazor Server Application To start, we will create a Blazor Server application: Start Visual Studio 2019. Press Create a new project, and in the search bar, type blazor . Select Blazor App from the search results and press Next. Now name the project. Name the application MyBlogServerSide , change the solution name to MyBlog , and press Create. Next, choose what kind of Blazor app we should create. Select .NET 5.0 (Current) from the drop-down menu and press Create. Now run the app by pressing Ctrl + F5 (we can also find it under the Debug | Start without debugging). Your first Blazor Server application is ready. Explore the site a bit, navigate to Counter and Fetch data to get a feeling for the load times, and see what the sample application does. This project is based on Blazor Server, which implies that each interaction (such as clicking a button) sends a command through SignalR to the server. The server will then re-render the component and transmit the updates ...