Posts

Understanding Basic Blazor Components (Part 2)

By Ashwin Venugopal -
Image
  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...
Post a Comment
Read more

Understanding Basic Blazor Components (Part 1)

By Ashwin Venugopal -
Image
  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...
Post a Comment
Read more

Introducing Entity Framework Core (Part 3)

By Ashwin Venugopal -
Image
  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...
Post a Comment
Read more

Introducing Entity Framework Core (Part 2)

By Ashwin Venugopal -
Image
  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...
Post a Comment
Read more

Introducing Entity Framework Core (Part 1)

By Ashwin Venugopal -
Image
  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...
Post a Comment
Read more

Creating Your First Blazor App

By Ashwin Venugopal -
Image
  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 ...
Post a Comment
Read more

Web Development With Blazor: Introduction (Part 3)

By Ashwin Venugopal -
Image
  Blazor WebAssembly Rather than operating Blazor on a server, you can also execute it within your web browser through WebAssembly. The WebAssembly variant of Blazor functions in a manner quite similar to the server version. A render tree is still generated, and rather than executing the Razor pages on the server, they are now executed within our web browser. Because WebAssembly lacks direct access to the DOM, Blazor updates the DOM through direct JavaScript interoperation instead of using SignalR. Disadvantages Of Blazor WebAssembly When compared to other major websites, the size of a Blazor WebAssembly is substantial, and it requires downloading many files. In order to utilize any on-site resources, it is necessary to create a Web API for access. Direct access to the database is not permitted. The code operates within the browser, indicating that it is susceptible to decompilation. This is a situation that all application developers are familiar with, but it may not be as ty...
Post a Comment
Read more