Create master detail components in Blazor Server (Detail CRUD Components)
In the previous part of this article series you developed ListTeamMembers.razor component. Now you need to develop the remaining components namely ShowTeamMember.razor, InsertTeamMember.razor, and UpdateTeamMember.razor. You have already these empty component files in the Shared > TeamMembers folder. The UI rendered by the ShowTeamMember component is shown below.
Posted On : 20 Jun 2022
Create master detail components in Blazor Server (List of Team Members)
In the preceding part of this article series you created master CRUD components namely ListTeams, ShowTeam, InsertTeam, and UpdateTeam. Continuing your development you will complete the detail CRUD components in this part. By the end of this part you will be able to see master-detail behavior and CRUD operations in action. So, let's get started with the detail components.
Posted On : 06 Jun 2022
Create master detail components in Blazor Server (Master CRUD Components)
In the previous part of this article series you developed the List component that displays a list of Teams in a table. In this part you will create ShowTeam, InsertTeam, and UpdateTeam components to perform the CRUD operations on the Teams table. The following figure shows how the ShowTeam component displays a Team in the browser.
Posted On : 19 May 2022
Create master detail components in Blazor Server (Project Structure)
In the previous part of this series you were introduced to the UI and overall functioning of the master-detail Blazor Server app. You also created Team and TeamMembers tables and EF Core model. You have already created the Blazor Server project. Now it's time to kick start the component development. To build the master detail UI you could have but all the markup and the code in a single Razor component.
Posted On : 06 May 2022
Create master detail components in Blazor Server (UI and Tables)
Modern applications often prefer to use rich client side frameworks over traditional server side processing. ASP.NET Core provides Blazor (Server and WebAssembly) as a framework for building rich client side web apps. It would be interesting to see how the master detail user interface can be built using Blazor. To that end this multipart article series is going to show you in detail how Blazor Server can be put to use for developing master detail pages.
Posted On : 21 Apr 2022
Show modal and non-modal dialogs in ASP.NET Core MVC and Blazor
Many web apps accept user input through dialog boxes. There are multiple options when it comes to displaying a dialog box to the user. You can resort to plain JavaScript or you can use some plug-in to accomplish the task. However, in this article I am going to show a lesser known technique of displaying dialog boxes. The HTML element can be used to display modal and non-modal dialog boxes.
Posted On : 03 Nov 2021
Create Templated Components in Blazor
A Blazor application consists of one or more Razpr Components. Typically a component houses its UI in the form of HTML markup and the associated logic. However, at times you want the parent component to specify fragments of the UI so that these fragments can be rendered to produce the final UI of your component. These fragments of UI are called templates. If you ever worked with ASP.NET Web Form's data bound controls such as GridView, ListView, and DataList you are already familiar with the idea of templates and templated controls. Luckily, you can easily create templated components in Blazor so that your component becomes more reusable and customizable.
Posted On : 01 Sep 2021
Drag-n-Drop file upload in Blazor using JS interop and minimal API (Part 2)
In the Part 1 of this article you learned to implement drag-n-drop in a Blazor Server application. So far we are able to drag-n-drop files on to a drop target and list those file names in the fileBasket. However, no files are actually sent to the server. That's what we will do in this part of the article. Although our focus is going to be minimal API approach, we will explorer three variations of the process.
Posted On : 27 Aug 2021
Drag-n-Drop file upload in Blazor using JS interop and minimal API (Part 1)
Uploading files from client computer to the server is a common task in web applications. You can either use jQuery Ajax or Blazor's InputFile component to accomplish that task. Files to be uploaded on the server are typically selected by the end user using file input field. However, most of the browsers also allow you to select files by dragging them from the client computer to your web application. To that end this article discusses how drag-n-drop of files can be done in Blazor Server apps. I am going to assume that you are familiar with Blazor's JavaScript interop. You may read my previous article in case you aren't familiar with Blazor's JS interop.
Posted On : 18 Aug 2021
Use JavaScript Interop in Blazor
ASP.NET Core Blazor allows you build SPAs using C#, HTML, and CSS. Although you can develop Blazor apps without using any JavaScript, at times you might want to invoke some JavaScript code from your Blazor components. Moreover, the JavaScript code might also want to invoke some C# methods. To that end this article quickly illustrates how this can be accomplished using Blazor's JavaScript interop features.
Posted On : 04 Aug 2021