Tech Seeker

In this article, we are going to implement CRUD operation in .NET6 Blazor Server application using the MudBlazor UI components. Blazor Server: Blazor Server is a single-page application. At the server, a pre-rendered HTML output of the page will be delivered to the user browsers. Any UI update, event handling, javascript calls will carry over by a SingnalR connection to the server. So application updates are depending on the continuous connection of the SignalR. So Blazor server is a single-page application that can be made of C#. Since the blazor server only outputs the pre-rendered HTML to the client, so there is no c# code downloading into user browsers like in Blazor WebAssembly(c# code downloaded and run in the browser for blazor webassembly application). SignalR Connection: A Blazor Server application works over a SignalR connection. A Blazor Server application creates a UI State memory at the server which will be interacted by the SignalR connections. If a SignalR conn

In this article, we will know about .NET6 feature like 'SupplyParameterFromQuery' attribute to access the query parameters in the blazor application. SupplyParameterFromQuery Attribute: A routable component to capture the query parameter values into the component parameter, then we have to decorate the 'SupplyParameterFromQuery' attribute along with the 'Parameter' attribute on top of the component parameter. On decorating 'SupplyParameterFromQuery', then the component parameters can read the query parameters of type 'bool', 'datetime', 'decimal', 'float', 'guid', 'int',  'long', 'string'. It also read the array type of query parameters as well. If component parameter name and query parameter name then there is no need for explicit mapping to read the values. If the component parameter name and query parameter name are different then we have to specify the query parameter in an attribute lik

In this article, we will know about .NET6 feature that is in Blazor application handling error using the Error Boundaries. ErrorBoundary Component: ErrorBoundary component is an in-built blazor component, that will handle the unhandled error at the UI level. So with the ErrorBoundary component, we can handle the errors at a particular section or area of the page so that the remaining page of the application runs smoothly without any issue. ErrorBoundary is a wrapper component so we can use like: ErrorBoundary can be wrapped around any Blazor component, so it will display content if no error, but if any child component throws an error then it will show the error message. ErrorBoundary can be wrapped around '@Body' element in 'shared/MainLaout.razor', so it means its scope is global(means page-level error handling), so any error occurs inside of any component of the page then the entire page will show an error message. Use ErrorBoundary At Components Level: Let's

In this article, we will explore the blazor application binding support multiple options for the 'Select' or 'InputSelect' which is .NET 6.0 feature. Create A .Net6 Blazor WebAssembly Application: To implement our demo let's create a .NET6 Blazor WebAssembly application. To work with .Net6 application's most recommended editors are 'Visual Studio 2022', 'Visual Studio Editor(.NET CLI commands)'. For this demo, I'm using Visual Studio Editor(Using .NET CLI command). CLI command For Minimal API Project dotnet new blazorwasm -o Your_Project_Name Multiple Option Selection For HTML Select Element: Now let's develop a small sample for the multiple option selection of the HTML 'Select' element. To enable multiple options selection for the 'Select' element key configurations are like 'Select' element should be decorated with the 'multiple' HTML attribute and its binding property should be an array type. L

In this article, we are going to implement a Blazor WebAssembly application file upload using MudBlazor UI components. Create A Sample Blazor WebAssembly Application: Let's create a sample Blazor WebAssembly application to accomplish our demo on file uploading. Initial MudBlazor Setup: Install the 'MudBlazor' library package. Add Mudblazor namespace into the '_Imports.razor'. _Imports.razor: @using MudBlazor Add the below CSS files inside of the head tag in 'index.html'. wwwroot/index.html: <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> Now comment the 'bootstrap.min.css' and '{your_applicationname}.styles.css' links in the head tag. Add MudBlazor javascript file in 'index.html' just above the closing body tag. wwwroot/index.html: <script

In this article, we are going to implement pagination in the Blazor WebAssembly application using the MudBlazor UI table component. Pagination API: To accomplish our demo we need an API endpoint that contains a payload to support the pagination. If you have good knowledge of API pagination you can create your own API or else I have already created a blog on API pagination, so  click here  to know more. Create A Blazor WebAssembly Project: Let's begin our coding by creating a sample Blazor WebAssembly project. Steps To Configure MudBlazor: Let's install the 'MudBlazor' NuGet into our sample project. Now add the MudBlazor namespace into the '_Import.razor' file. _Import.razor: @using MudBlazor Add the below CSS files inside of the head tag of the 'index.html'. wwwroot/index.html: <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content