Skip to main content

Posts

Pagination In Vue3 Application Using '@ocrv/vue-tailwind-pagination' Plugin

In this article, we will understand the pagination in the Vue3 application using the '@ocrv/vue-tailwind-pagination' plugin. Key Features Of Plugin: current -  The 'current' property to set the current page number. total - The 'total' property that represents the number of records for the table content. So based on this 'total' property value, the total number of page numbers display depends. per-page - The 'per-page' property to set the count for the records to display for each page. page-changed - The 'page-changed' event that raises on selecting the page. It outputs  '$event' which is nothing but the selected page number. Create A Vue3 Sample Application: To implement our pagination sample let's begin by creating a Vue3 sample application. Command To Create Vue3 Application: Vue Create Your_Sample_App_name Install Tailwind Pagination NPM Package: Tailwind Pagination NPM Package Command: npm install --save @ocrv/vue-ta

.Net5 Blazor WebAssembly CRUD Operation Sample For Beginners

In this article, we will explore CRUD operations in .Net5 Blazor WebAssembly application. This article targeting an audience like beginners of Blazor WebAssebly.  Create A .Net5 Blazor WebAssembly: Visual Studio users should have the latest version of 2019VS(Version 16.8.*) to build the .Net5 application. From Visual Studio it is pretty simple to create a Blazor WebAssebly application since VS provides users with a nice GUI for interaction. One other option to create an application is with .Net CLI commands. So one of the best IDE for .Net CLI developers is  Visual Studio Code Editor . .Net CLI Command To Create Blazor WebAssembly Project: dotnet new blazorwasm -n your_project_name Rest API: In the blazor webassembly application, displaying data, storing or updating data, or removing data is carried out by Rest API. So for in our demo application, we will consume a free rest API like 'https://jsonplaceholder.typicode.com/posts' . But there are limitations with these free r

360 Degree Image Preview In VueJS Application Using 'vue-360' Plugin

This article, explains about 360-degree image previewer in the vue.js application using the 'vue-360' plugin. Overview  On 'vue-360' Library: Some of the key features of the 'vue-360' library are: amount - total number of image count that is used to display the 360-degree image preview. imagePath -   need to specify the relative path or full domain path without the image name. fileName - need to specify the file name. spinReverse - boolean property used to rotate the images in reverse order. The default value is false. autoplay -  autoplay your images. The default value is '24' images. loop - number of loops you want for autoplay. The default value is '1'. boxShadow-  apply a box-shadow background. The default value is 'false'. buttonClass - apply styling to buttons. The default value is 'light'. paddingIndex - apply leading zero to image index. The default value is 'false'. disableZoom - disabling zoom functionality.

Part-2 Hot Chocolate GraphQL Validate JWT Access Token And Different Authorization Techniques

Part-1  completely discussed the steps to generate the access token in the GraphQL endpoint. Now in this article, our main goals are to validate the JWT access token and also we try to understand authorization techniques in GraphQL. Install JwtBearer Authentication NuGet: Let's install JwtBearer Authentication NuGet to configure JwtBearer services. .Net CLI Command: dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer Package Manager Command: Install-Package Microsoft.AspNetCore.Authentication.JwtBearer Register JWT Validation Service: Now we need to register the JwtBearer service to validate our access token on the user sending the access token as an authorization header. Startup.cs: using Microsoft.AspNetCore.Authentication.JwtBearer; using Microsoft.IdentityModel.Tokens; services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme) .AddJwtBearer(options => { options.TokenValidationParameters = new TokenValidationParameters { ValidIssuer = Con

Part-1 Hot Chocolate GraphQL JWT(JSON Web Token) Authentication - Generating User Login Access Token

In this article, we are going to implement a JWT authentication sample for the Hot Chocolate GraphQL endpoint. It's purely optional to implement JWT authentication in the GarphQL approach. Because .Net supports endpoint configuration for both normal .Net endpoint and GraphQL endpoint. While implementing GraphQL in your application and if you want to develop an authentication endpoint in the .Net approach there is no issue. But if you want to develop all endpoint in GraphQL including authentication that is also fine. So in this article, our goal is to create JWT authentication as a GraphQL endpoint. Create A .Net5 Web API Application: To understand the concept let's start our journey by creating a sample .Net5 Web API application. Recommended IDE for development are like Visual Studio 2019(Version 16.8.* for .Net5) or  Visual Studio Code . Install Hot Chocolate Library: Package Manager Command: Install-Package HotChocolate.AspNetCore -Version 11.0.2 .Net CLI Command: dotn

.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