Skip to main content

Posts

Blazor: Blazor Client-Side CRUD Operations (Part 4)

Introduction: In  Part 3  we have discussed on Update Operation using Blazor client-side application. Now we get hands-on Delete Operation in our sample application. Delete Operation: For a delete operation, we use a bootstrap modal for confirmation. Opening and closing of bootstrap in this sample we are going to use bootstrap js. In Blazor not all the operations related to UI can't be done alone with c#, we need to use javascript in few areas. But invokation of the javascript method will be done from the c# method using JavaScript Interoperability. Step 1: Goto "wwwRoot" folder open index.html file add the bootstrap js  links  as shown  below <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.j

Blazor: Blazor Client-Side CRUD Operations (Part 3)

Introduction: In  Part 2  we created a page to fetch all the data in Blazor Client-Side application. Now we are going hands-on UPDATE Operation. Update Operation: Step 1: In the "Pages" folder create a new razor file name it as "EditPlayer.razor".This page is used to update or edit the data in our Balzor Client-Side application. Now to navigate to this new page we need to add Blazor routing with "@page" directives. Add the routing code as below. @page "/player/edit/{PlayerId:int}" "PlayerId:int" is a placeholder in the URL, where the application expects numeric value in that place from the incoming requests. If we try to pass any string value in place of numeric, the application throws an error as no end found with your request. "PlayerId" data get accessed in c# code by creating c# property with same name "PlayerId" and it should be decorated with attribute "[Parameter]" which can observe in

Blazor: Blazor Client-Side CRUD Operations (Part 2)

Introduction: In  Part 1  we have worked on the CREATE Operation page in blazor client-side application. Now here we going to discuss on the READ Operation in blazor client-side application. Read Operation: Step 1: In the "pages" folder, add a new file name as "ShowPlayers.razor". Add players route in the file using "@page" directive as below. @page "/players" Run command "dotnet watch run" and navigate to "http://localhost:5000/players". Step 2: Add the HTML to show all the cricket players that we had created in our application as below <div class="row"> @foreach (var player in players) { <div class="col-sm-4"> <div class="card"> <img src="/images/player.jpg" class="card-img-top"> <div class="card-body"> <h4 Card-title>@player.FirstName @player.LastN

Blazor: Blazor Client-Side CRUD Operations (Part 1)

Introduction: Blazor client-side framework is to build interactive client-side single page web apps which work in all modern web browsers, including mobile browser. The code is written in c# which can run on the browser like javascript frameworks (angular, react, vue etc). In Blazor client-side framework Dotnet Code executed via WebAssembly in the browser runs in the browser's javascript sandbox securely. Specs: 1. Asp.net core 3.0 Preview 2. Blazor (Client-side) 3. Bootstrap 4 4. VisualStudio Code Editor Core Concept: Blazor client-side application sample CRUD (Create, Read, Update, Delete) operations. Let's create a sample application of the Indian cricket team players using the Blazor template. Our final sample looks as follows Create Operation: Step 1: Create Blazor client-side application.  Step by step process to create a blazor template . Step 2: Go to Pages Folder, add a new file name it as "AddPlayer.razor".Now add the follo

Part 2: Share Authentication Cookie - Application Runs Under Another Application

Introduction: In  Part-1  we have implemented SSO with sharing authentication cookie between domain and subdomain binds to an MVC application. Now we implement the sharing authentication cookie between two different applications which runs under another application in IIS Server. For example, ASP.NET Core MVC application is client application shares login cookie to the ASP.NET Core WEB API which is hosted under the MVC application as a child in IIS Server.  To know more about child application runs under another application click here Core Concept: Sharing authentication Cookie between entirely two different applications, but one application runs under other applications in IIS. Create an MVC Application:  Create an MVC application by following  Part-1 , consider it is the main application for registering users and log-in to the application. Create WEB API Application: Now we have to create another application, which runs under the MVC application(created by following Step 1

Part 1: Share Authentication Cookie - SSO (Single Sign-On) In Dotnet Core

Introduction: Single Sign-On (SSO) is an authentication technique where the user uses one set of login credentials to access multiple web applications. About Platform: . Asp.net core MVC . Microsoft Identity Login . Dotnet core 2.2 . SQL LocalDB Core Concept: In the dotnet core, by sharing authentication cookie we can achieve SSO for the subdomains. A subdomain is a domain which part of another domain.  Additional name prefixed to a domain that URL can be a subdomain. For example " http://testmyapp.com/ " is a domain, its subdomain looks like " http://mobile.testmyapp.com ". Create MVC Application & LocalDB Setup To IIS & IIS Hosting: Create an Asp.net MVC Core application by selecting a login individual user template from a visual studio. For this application use, LocalDB as a database then host this application to local IIS, bind "http://testmyapp.com" as domain and "http://mobile.testmyapp.com" as a domain to test

IIS Server Sub Application Hosting Or Folder Level Hosting

Introduction: In IIS Server so many numbers of applications can be hosted as child applications under one main application. Domain bindings did at the main application, the same domain can be used by child application with their folder path as URL. Let say the "http://test.com" domain is assigned to the main application. Under it, child application hosted in a folder like "api" now it can be accessed with the URL "http://test.com/api" Step 1: Let host main application, open "Internet Information Services (IIS) Manager" goto  "Sites" right-click on it and select "add new website" a popup get open as follows . "Site Name" application name in IIS . "Physical Path" location of application source code . "Host Name" domain that configured to the application Step 2: Click ok our application created and hosted in IIS Server it looks as below Now we have our main