Posts

Cross-Origin Requests (CORS) in ASP.NET Core Web API

Image
This blog is going to explain what a Cross Origin Request (CORS) is and how to implement it in ASP.NET Core web API. When a web page tries to access resources from a different webpage it is blocked by the browser security feature. This feature is called the Same Origin Policy (SOP). In many cases the developer has to access resources of different origins. In such cases CORS helps to relax the Same Origin Policy. There are 3 ways to enable CORS in ASP.NET core. Middleware (name policy or default policy) Endpoint routing [EnableCORS] attribute Let’s see that with the example. Imagine you have an API which returns some JSON values. It’s URL is https://localhost:44351/api/Home. When trying to access another domain URL(https: // localhost: 44389 /) from the client page, it will give you the following error message. Access to XMLHttpRequest at 'https://localhost:44351/api/Home' from origin 'https://localhost:44389' has be...

Local Storage in Blazor using Blazored

Image
In this blog, you will learn about storing and retrieving values to the Browser's LocalStorage with the help of Blazored. The Blazored LocalStorage library helps to save data in Local Storage. Let's see how to achieve this step by step. Step 1: First, you have to install the Blazored LocalStorage package. If you use Manage Package for Solution look for Blazored.LocalStorage and install the most current package. Otherwise, If you use 'Package Manager Console' then, run the following command. Install-Package Blazored.LocalStorage -Version 4.1.2 Note:- When I write this blog, version 4.1.2 is the latest. Step 2: For Blazor WebAssembly In this step, I have added an AddBlazoredLocalStorage() to the Main method in the Program.cs file. Program.cs using Blazored.LocalStorage; public class Program { public static async Task Main( string [] args) { var builder = WebAssemblyHostBuilder.CreateDefault(arg...

JavaScript Interoperability in Blazor

Image
This blog is going to explain JavaScript Interoperability in Blazor. Sometimes it is necessary to use JavaScript in Blazor; you can not avoid that. To use the JavaScript in Blazor, you have to use the IJSRuntime instance via the dependency injection. The InvokeAsync method helps to call the JavaScript function. Let's see how to use JavaScript in Blazor. Step1: Create a new Blazor WebAssembly App In Visual Studio -> Create a New Project -> Blazor App. Provide Project name and Location. Then click the Create button. It will display the Create a New Blazor app window. In there, select 'Blazor WebAssembly App'; Step 2: Create JavaScript File In this step I have created a javascript file with the name SampleJavaScript.js, under wwwroot -> Scripts folder . The following is a code of simple javascript code for adding two integer numbers. \wwwroot\Scripts\SampleJavaScript.js function CalulateSum(firstValue, seco...

Entity Framework Core (EF) with SQL Server LocalDB

Image
This blog is going to illustrate how to implement Entity Framework (EF) Core with SQL Server LocalDB. The Entity Framework Core enables access to data from the database. This allows developers to avoid having to write most of the data access code. And the SQL Server LocalDB works similarly to the SQL SERVER with few features. You can get the LocalDB when you install visual studio or visual studio express. You can find the .mdf and _log.ldf files in the C:/Users/{user} directory. Let see how to create a SQL Server LocalDB and implement Entity Framework Core Step 1: The first step is to add a connection. In the menu -> click Tools and select Connect to Database It will display the Add Connection window. Enter (localdb)\mssqllocaldb in the server name textbox. Then in the Select or enter a database, select master and click ok Now in the server explorer, you can find the master DB containing Tables, Views, Stored...

SignalR with JavaScript in ASP.NET Core MVC

Image
This blog is going to explain what is SignalR and how to implement it in ASP.NET Core. SignalR is a real time application framework for ASP.NET Core. Using SignalR you can provide updated information without refreshing the page, for example poll results, game score, chat etc. Let's see how to achieve it in ASP.NET Core MVC. Step 1: First step I added the SignalR client library. To add a SignalR client library, Right click on the project in Solution Explorer and Add -> Client-Side Library. Select the provider as unpkg as shown in the image below. Enter the latest version of SignalR into the library. And selected signalr.js and signalr.min.js files. Finally clicked the install button to install the client library. Step 2: At this step I have created a VoteHub.cs class inside the Hubs folder(create a new folder called Hubs). This class inherits from the Hub class which is a base class of SignalR hub. The SendMessage method will be called by the connected client. ...

View-Based Authorization in ASP.NET Core

Image
This blog is going to explain what is View-Based Authorization and how to implement it in ASP.NET Core. In some cases, the developer may need to show or hide the UI based on the user's identity. For example, an admin can edit data, but should not allow guest users to edit data. In this case, the developer should show the edit link when the admin user logs in and hide the edit link when the guest user logs in. This process can be achieved through View-Based Authorization . Let's look at that step by step. Step 1: In the first step, I created a Users class to get user details. Also, I added two values to test View-Based Authorization . For real use, you need to get these user details from the database. Users.cs public class Users { public string Username { get ; set ; } public string Password { get ; set ; } public string Role { get ; set ; } public DateTime DateOfBirth { get ; set ; } public IEnumerable<Users> GetUsers() { ...

Policy-Based Authorization in ASP.NET Core

Image
Authorization is the process of determining whether a user is allowed to access a resource. Policy-based authorization helps to verify one or more requirements to authorize the user. The policy-based authorization helps to separate the application logic and authorization logic We will see step by step how to implement policy-based authorization on ASP.NET Core MVC. In this example, the policy-based authorization is going to authorize whether the user is from the state of Florida or not. This will allow the user to access the page only when the user state is Florida Step 1: In the first step, I created a class to get user information. For demo purposes, I have added two data. But in a real application, you need to get information from the database. public class Users { public string Username { get ; set ; } public string Password { get ; set ; } public string State { get ; set ; } public IEnumerable<Users> GetUsers() { return new ...