Skip to main content

Posts

.Net5 Application Query Tracing Using MiniProfiler

In this article, we are going to explore the usage of MiniProfiler in the .Net5 application. MiniProfiler: MiniProfiler helps us to optimize the performance of our dotnet application. Its capabilities are like: Traces the queries and their execution in an application. It displays the time taken by each query. Able to determine the time taken to execute a block of code using customizing time. Provides UI report of an application per page or per request. It supports .NetFramework, .NetCore, .Net5, Dapper, EntityFrame, etc. Targets To Accomplish: MiniProfiler will work on any of the .Net Applications like MVC, RazorPages, WebAPI. To understand the usage of MiniProfiler, I'm going to use it in my existing .Net5 MVC application.  Here my MVC application structure is like this: My application contains 3 pages 'Home', 'Todo', 'Album'. My 'Home' page have 2 database call's, those calls are done by entity framework. My 'Todo' page has 1 database

Angular User Rating Component Using 'NgBootstrap' Library

In this article, we will know about implementing a user rating component in the angular applications using the 'NgBootstrap' library. Key Features Of NgBootstrap Rating Component: max -   The 'max' input property to define the max number of rating icons or images(eg:  stars that represent rating). By default, the 'max' input property value is 10. rate - The 'rate' input property to define the current rating value. The 'rate' input value can take either number or decimal value. readonly - The 'readonly' input property is of boolean type. If it is set to 'true', then the user can't add a rating this rating only used for display purposes. hover - The 'hover' event raises on mouse hovering. leave - The 'leave' event fires on a mouse moving from the rating component. rateChange - The 'rateChange' event raises when the user clicks on a new rating. Create An Angular Sample Application: Let's implement

Ionic&Vue Application Integrate Side Menu With ion-menu Component

In this article, we are going to learn about the steps to integrate the side menu using the 'ion-menu' component in the Ionic&Vue application. 'ion-menu' Component: Using the 'ion-menu' component we can develop a verticle side menu for our mobile ionic application. The menu should be rendered as a sibling element to the root content element. Mostly the root content element in our Ionic&Vue application is 'ion-router-outlet', so our menu element should be the sibling to it. So to operate on the menu component we have to use the 'menucontroller' that loads from the '@ionic/vue'. The key terms we need to remember while implementing the 'ion-menu' component: menucontroller: The 'menucontroller' helps to operate on our menu like opening and closing of the menu. It's not ideal to use multiple menus in the application but ionic supports to render multiple menus so to open them from anywhere of entire application it is

NestJS File Upload

In this article, we are going to understand the steps to create a file uploading endpoint in the NestJS application. Key Features In NestJS File Upload: Let us know some key features of NestJS file upload before implementing a sample application. FileInterceptor: The 'FileInterceptor' will be decorated on top of the file upload endpoint. This interceptor will read single file data from the form posted to the endpoint. export declare function FilesInterceptor(fieldName: string, localOptions?: MulterOptions): Type<NestInterceptor>; Here we can observe the 'fieldName' first input parameter this value should be a match with our 'name' attribute value on the form file input field. So our interceptor read our files that are attached to the file input field. Another input parameter of 'MulterOptions' that provides configuration like file destination path, customizing file name, etc. FilesInterceptor: The 'FilesInterceptor' will be decorated on t

A Sample On Blazor Server Form Validation Using Validator Component

In a form to validate values against data store or database in a blazor server application, we can achieve this by creating a custom blazor component that can be called a Custom Validator Component. Here our Validator Component is not a built component, here we make a plain class as a component by inheriting 'Microsoft.AspNetCore.Components.ComponentBase', and then we use built-in blazor form components and make it as Custom Validator Component. Our Custom Validator Components mainly built on form components like 'Microsoft.AspNetCore.Components.Forms.ValidationMessageStore' and 'Microsoft.AspNetCore.Components.Forms.EditContext'. Create A Blazor Server Application: Let's understand our topic more in-depth by making a sample on it, so let's create a Blazor Server sample application. Here my sample targeted framework is '.Net5'.Most recommended IDE's for development in Visual Studio 2019(Version 16.8.* that supports .Net5) or  Visual Studio Co