Code Murals

GraphQL is the query language for the API. With an API endpoint, any data can be retrieved from the server. You can tell the API what data you want, the API will return those values. So it helps to avoid multiple requests and instead of getting all the data and selecting the one you want, you can tell the API what you want and it will send that data. This article explains how to create the first basic GraphQL in .NET. Let’s look at it with some sample code. First, you have to install the GraphQL package. You can install the latest version of GraphQL from NuGet. The following is a command to install the GraphQL package PM> Install-Package GraphQL Next, you need to install the JSON.NET serializer for GraphQL.NET. The below command installs NewtonsoftJson for the application. PM> Install-Package GraphQL.NewtonsoftJson The following is the .NET C # console application. First I added the necessary packages. Then the schema was initialized. The schema states what the requ...

This article is going to explain how to debug the Blazor WebAssembly application on the Chrome browser's Dev tool. Let’s look at it step by step Step 1: I have developed a small calculate application in Blazer to demonstrate the debugging process. It calculates simple arithmetic. If users click the Calculate button it will display the results. The following is a screenshot of the calculated code snippet. Step 2: Press Shift+Alt+D (When focusing the application). This will open a new tab with the message “Unable to find debuggable browser tab” . But at the same time, the page gives instructions on how to get this. Step 3: Press Win + R . This will open a run window. Enter the command specified on the page in the open text box (chrome --remote-debugging-port=9222 --user-data-dir="C:\Users\golda\AppData\Local\Temp\blazor-chrome-debug" https://localhost:44366/calculate). And click ok. This will reopen the application in another Chrome bro...

This article is going to explain what a manifest file is and how to use it in the PWA Blazor application. You can easily configure the manifest in your Blazor app. Let's see how to do it. What is a Manifest File? Manifest is a single JSON file that tells the browser what kind of application it is, What is the name of the application? Where is the application icon? What background color and etc. The manifest file name must be manifest.json While creating the Blazor application , it will automatically create the manifest.json file under wwwroot folder. The following is a default manifest.json code. { "name" : "SamplePWABlazorApp" , "short_name" : "SamplePWABlazorApp" , "start_url" : "./" , "display" : "standalone" , "background_color" : "#ffffff" , "theme_color" : "#03173d" , "icons" : [ { "src" : "icon-5...

This article is going to explain how to create a Progressive Web Application (PWA) with Blazor WebAssembly with an example. What is PWA The PWA is a web application that acts like a native application using modern standards. You can install PWA on your computer. You can add a shortcut on the desktop and launch it in the start menu. You can easily convert the Blazor application to PWA. Let's see what are things that need to create an installable web application. A web manifest (The web manifest is a JSON file that tells the browser about your Progressive Web Application) [manifest.json] HTTPS A Service Worker with a functional fetch hander (So that your browser will recognize it is an installable app) Let’s take a step-by-step look at how to create a Progressive Web Application through Blazor WebAssembly Create a new project In the create a new project window, choose Blazor App Configure Your New Project Enter the project name and location in Configure your n...

This article is going to explain how to validate the model manually. If you want to calculate the value of a model and assign it to the model, you can use TryValidateModel to validate if the model is valid or not. Let us see with an example of how TryValidateModel works. The following is SampleViewModel. The [Required] attribute is included for all properties. That is, all properties are mandatory, so it is a must to assign value to them. public class SampleViewModel { [Required] public int MovieID { get ; set ; } [Required] public string Movie { get ; set ; } [Required] public string DirectedBy { get ; set ; } [Required] public int ReleaseYear { get ; set ; } } Next is a controller Index() action method. Here the value is assigned to MovieID and ReleaseYear, but not to DirectedBy and ReleaseYear. public IActionResult Index() { SampleViewModel model = new SampleViewModel() { MovieID =1, ReleaseYear = 2019 ...

ModelState refers to a set of name and value pairs submitted to the server during a post. This allows you to save the value submitted to the server and check for errors associated with each value. Let's see how this works with an example. The following is a sample model code. It has three properties: MovieID, Movie and Release Year. SampleViewModel.cs public class SampleViewModel { public int MovieID { get ; set ; } public string Movie { get ; set ; } public int ReleaseYear { get ; set ; } } Below is an index view code. Here you can see how the model properties are bonded to the TagHelpers. Index.cshtml @ { ViewData[ "Title" ] = "ModelState Example" ; Layout = null ; } @model SampleViewModel <form action= "/Home/index" method= "post" > <div> <div> <label for = "MovieID" >Movie ID:</label> <input id= "MovieID" ...

This article is going to explain how to create a Bootstrap tab with a small example. Step 1: Add CDN To use Bootstrap or jQuery you need to add a CDN link or you can download and use the package. The following is a list of CDN links to use the Bootstrap styles and scripts. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> Step 2: Tab Menu You must use an unordered list element to create the tab menu. In the following code, you will find an unordered list with three menu list items. nav nav-tabs classes are added to the unordered list to convert the list item to the tab menu. The first menu mostly always be active, so in the first list item, the active class is include...