Skip to main content

Posts

CSS Isolation Of Razor Pages/Views[.NET6 Feature]

In this article, we will know about a .NET6 feature that is CSS isolation of razor pages/views. CSS Isolation: CSS isolation means creating a CSS file like '.cshtml.css' for each razor page/view(.cshtml). CSS isolation helps to avoid dependencies on global styles that will be very hard to maintain and also avoid style conflicts among the nested content. In this isolation process, the style defined in the '.csthm.css' file are scoped and they are applied to respective razor pages/views. For example, any styling that is added in 'index.cshtml.css' file will only apply to 'index.cshtml' page, they won't affect any other page in the application. The .NET framework runtime will bundle all the isolated CSS files(*.csthml.css) in the single file that is '{your_application_name}.styles.css'. So this bundled CSS line will be added automatically at '{Pages/Views}/Shared/_Layout.cshml' by the framework.  The bundle CSS file({your_application}.st

SupplyParameterFromQuery Attribute To Read Query Parameters In Blazor Application[.NET6 Feature]

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

.NET6 Application No Longer Generates A Separate Assembly For Views By The Razor Compiler[.NET6 Feature]

In this article, we will understand a .NET6 feature that is in a .NET6 application no longer generates a separate assembly for views(.cshtml file) by the razor compiler. .NET5 Or Below Version Generates Separate Views(.cshtml) Assembly:  For .NET5 or below versions razor compiler produces a separate views assembly that contained views and pages(.cshtml files) in the UI application. .NET6 No Separate Views Assembly File: From .NET6 razor compiler builds the views and pages(.csthml) into the UI project assembly itself. This change improves the application build performance, enables single file deployment, and enables these types to work for the Hot Reload(Developers option to reflect changes immediately). Video Session: Wrapping Up: Hopefully, I think this article delivered some useful information on a .NET6 feature no separate assembly file generation for views(.cshtml files). I love to have your feedback, suggestions, and better techniques in the comment section below. Supp

Blazor App Handling Errors Using Error Boundaries Component[.NET6 Feature]

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

.NET 6 Application No Need To Configure Developer Exception Page Middleware Explicitly[.NET6 Feature]

In this article, we will get to know about a feature of .Net 6 that is 'no need to configure developer exception page middleware explicitly because the framework will automatically enable developer exception page for the Development environment'. .NET 5 or Below Version Application Developer Exception Page Middleware: For bugs identification, the developer exception page is very helpful for debugging. For .NET5 or Below version application developer exception page middleware is always configured in the 'Startup.cs' file based on the environmental variable that is 'Development'. Startup.cs: This middleware renders a well-designed exception page with a full exception stack trace as below. .NET6 Application: From .NET6 application no need to configure developer exception page middleware explicitly. By default, the framework will load the developer exception page if the environment variable is 'Development'. Program.cs: But still, we can see the deve

Blazor Binding Support Multiple Options For - 'Select' HTML Element Or 'InpuSelect' Blazor Component[.NET 6.0 Feature]

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

A CRUD Operation Demo On Asp.NetCore Minimal Web API[Asp.NetCore 6.0 Feature]

Minimal API: The concept of creating an HTTP API with minimal dependencies is Minimal APIs. It was introduced in Asp.Net 6, and they are ideal for microservices that can be finished with minimum files and features. In Minimal API there won't be any controller or action methods. In Minimal API, the logical execution function will be registered along with the route registration. On comparing Minimal API with the normal Web API, that Minimal API doesn't support(for Asp.Net Core 6  these won't support but in the upcoming versions, these may be available) the following features like: Minimal API doesn't support built-in validation. Minimal API doesn't support filters. Minimal API doesn't support versioning. Minimal API doesn't support OData. Create A .Net6 Minimal API Project: Let's create a .Net6 Minimal API sample project to accomplish our CRUD sample. We can use either Visual Studio 2022 or Visual Studio Code (using .NET CLI commands) to create any .Ne