Technology Wonders

In this article, we will implement a Dialog Box using Bootstrap in the Blazor WebAssembly application. Since the Blazor WebAssembly is a great technology for building interactive UI using Components, the Dialog Box UI is one of the frequent UX requirements demanded by the End-Users. In the Blazor WebAssembly application, we can create a Dialog Box using Bootstrap. Step 1: Open Visual Visual Studio 2022 and create a new Blazor WebAssembly project and name this project as Blazor_DialogBox. In this project add a new folder and name it as Models. In this folder add a new class file and name it as StateCities.cs. In this class file add State, States, City,  and Cities classes. The code for these classes is shown in listing 1 namespace Blaz_CascadeDropdown.Models { public class State { public int StateId { get; set; } public string? StateName { get; set; } } public class States : List<State> { public States() { Add(n...

In this article, we will implement a Sing-Page-Application using React.js Version 17 and React-Router-DOM Version 6. The React is a JavaScript library for building user interfaces. The React is a great library but when we need to develop a Single-Page-Application (SPA), then we need to rely on the React-Router-DOM, a third-party library.  React-Router-DOM This library is specially written for implementing routing features in the React.js application. The current version of this library is 6.x.x. (In the current project the version 6.2.1 is used). Following are some of the objects provided in React-Router-DOM BrowserRouter: This is used in web browsers. This provides the cleanest URLs. Routes: This object is used to define Routes. This is a collection of the Route object. The Routes is a container for the nested tree of elements that renders the element based on the Route match. Route: This object is used to define a Route or we can also call it an expression for rendering the eleme...

Blazor is an interactive UI technology for modern Web Front-End apps, there are various kinds of UI and UX needs from the end-users. One such need is the Pagination of data that is shown in table form on the UI.  In this article, we will implement Server-Side pagination using ASP.NET Core API defined using .NET 6 by using UI client as Blazor WebAssembly Application. The Blazor WebAssembly application executes in Browser. This is pure front-end application technology. In this article, we will implement an End-to-End .NET Full-Stack application and we will see a simple implementation of the Server-Side Pagination for fetching data from the Azure SQL database server and displaying it in Blazor Component that contains HTML Table.  This article has 2 phases in the first phase, we will see how to perform pagination on the in-memory collection that is already loaded in the browser, and in the second phase, we will see how the server-side pagination can be implemented by receiving dat...