Posts

Passing Data Across Blazor Components

Image
 In this article we will explore a mechanism of passing data across Blazor Components In the previous article  we have seen the Blazor Server App for performing CRUD operations using EntityFrameworkCore with .NET 5. The Blazor Server Apps runs on the server and based on the UI event the component on the server is executed and the DOM updates are serialized back on the browser. We can create a Blazor Client App which runs on the browser on .NET WebAssembly. The Blazor is a feature of the ASP.NET Core for creating interactive web applications. So we can look it  as one the possible alternative for Angular, React or Vue.js etc.  Blazor components are autonomous, this means that it contains UI, Data (aka state), Events and Logic. These components are re-usable and we can use one component as a child of the other component. But in this situation, there might be a scenario that parent component want to pass data to child components and child component want to pass data to its parent. In this

Creating Blazor Server App for Performing CRUD Operations using EntityFramework Core

Image
 In this article we will understand an implementation of the Blazor Server App for performing CRUD Operations using EntityFrameworkCore. The modern web applications required rich and interactive UI. To implement such UI, we uses various JavaScript Libraries and Frameworks e.g.  Angular, React.js, Vue.js etc. Although JavaScript is the powerful language for browser based front-end apps, the developer must learn it properly and use it carefully and accurately for front-end application development. Considering you are a .NET Developer and having good experience of C# programming language and ASP.NET Web Forms / ASP.NET MVC, if you are expected to work on rich and interactive web UI, then learning JavaScript (or TypeScript) will take some time (learning curve) and then taking the decision for choosing the JavaScript library or framework  for the implementation will be time consuming process. So what if that, you use your existing knowledge and expertise on C# and .NET to develop such inter

Working with React.js Class Components

Image
React.js is a first class JavaScript library for building front-end for the modern web applications. This library is based on a WebComponent concept. The WebComponent is an autonomous object which has it own UI, Data and logic (presenter). The React.js is makes use of this concept to implement <b>Compositional UI<b>. In React.js, we can create components using 2 mechanisms, the first is Class Component  and the second is Functional Components .      Class Components, are the pure implementation of ES 6 class concept. The class component is derived from Component  base class. This base class contains render()  method to render the HTML UI. The class components defines local public properties. These properties represents State  of the class component. The State, means the data that will be used by class component to manipulate local to component so that the the HTML UI can be rendered.  Functional Components, are the JavaScript functions. These functions returns the HTML so t