Skip to main content


Generic Typed Components Using Templated Components In Blazor

What Are Templated Components? : One or more UI templates as a component parameter of type RenderFragment or RenderFragment<T>. A RenderFragment represents a chunk of UI to render. RenderFragment Parameter: RenderFragment parameters render the chunk of UI in a component. RenderFragment type parameter name must match with Html tag element. Pages/Card.razor(Html Portion): <h3>Card</h3> <div class="card text-center"> @CardHeader @CardBody @CardFooter </div> Pages/Card.razor(@code Portion): @code { [Parameter] public RenderFragment CardHeader { get; set; } [Parameter] public RenderFragment CardBody { get; set; } [Parameter] public RenderFragment CardFooter { get; set; } } @CardHeader, @CardBody @CardFooter are Templated Component parameters of type RenderFragment. Pages/Index.razor: <Card> <CardHeader> <div class="card-header"> My Templa

Introduction To Blazor Components

Introduction: A Page or Form or Dialog is used to construct a Blazor Application are made of Components. A Component is a block of code consist of C# + HTML + CSS. Components give the advantage of code splitting, nesting, and reusability. In this journey, we are going to explore Blazor components with sample examples. Blazor Or Razor Component: Blazor components can be called Razor Components because they implemented in a Razor file(.razor). In general, the component is a combination of  C# @code block and Html UI of Razor syntax. A simple component with c# code and Html as below: Pages/Parent.razor: <h3>Hey I'm Parent Component</h3> @code { } Component Naming Convention: Blazor Components should always start with a capital letter. Trying to create a component name with a small casing letter leads to a compilation error. Example create a component as 'Pages/parent.razor' result error as below @code block: C# @code block is lik

Asp.Net Core MVC Form Validation Techniques

Introduction: Form validations in any applications are like assures that a valid data is storing on servers. All programing frameworks have their own individual implementations for form validations. In Dotnet Core MVC application server-side validations carried on by the models with the help of Data Annotations and the client-side validations carried by the plugin jQuery Unobtrusive Validation. jQuery Unobtrusive Validation is a custom library developed by Microsoft based on the popular library  jQuery Validate . In this article, we are going to learn how the model validation and client-side validation works in Asp.Net Core MVC Application with sample examples. Getting Started: Let's create an Asp.Net Core MVC application project using preferred editors like Microsoft Visual Studio or Microsoft Visual Studio Code. Here I'm using Visual Studio. Let's create an MVC controller and name it as 'PersonController.cs' and add an action method as bel

GraphQL API Integration In Asp.Net Core Application

Introduction: GraphQL is a query language for your API and a server-side runtime for executing queries by using a type system you define for your data. GraphQL can be integrated into any framework like ASP.NET, Java, NestJs, etc and it isn't tied to any specific database or storage engine and is instead backed by your existing code and data. How GraphQL API Different From Rest API: GraphQL exposes a single end-point or route for the entire application, regardless of its responses or actions. HTTP-POST is the only Http verb recommended by the GraphQL. The client applications (consumers of API) can give instructions to GraphQL API about what type of properties to be returned in the response. Building Blocks Of GraphQL API: The main building blocks of GraphQL API is Schemas and Types.  A 'Schema' in GrpahQL API describes the functionality available to the clients connect to API. Schema mostly consists of GraphQL Object Types, Queries, Mutations, etc. T