Skip to main content

Posts

Showing posts from December, 2019

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