Forum Widgets
Latest Discussions
Convert the standard Blazor navigation menu to a collapsible icon menu
While I admittedly love Blazor I’ve always changed the out-of-the-box navigation menu that comes with it. It’s the first manoeuvre I pull when spinning up a new Blazor app, stripping out the purple gradient and getting it in, what I consider, a “blank slate state”. The other change I’ve wanted to make to the out-the-box look is one of those deluxe collapsible menus that leave just the icons showing. Anyone that’s used Azure DevOps will know what I’m talking about. I’ve included a picture to show DevOps example of what I’d like to see in my Blazor app. It gives a load of extra screen real estate which is always a priority for me in business applications particularly with complex or intensive workflows. Plus it gives the user the option to remove the text prompts once they are familiar with the system which is supported with carefully selected icon choices. As with most tasks that I assume will be an obvious solution I hit my search engine of choice and looked to avoid reinventing the wheel. However I found no source of pre-written changes to achieve this and was directed to fairly expensive third party controls to solve this one for me, which, being tight fisted, pushed me to do it for myself. Here I hope you save you the trouble of paying a pretty penny or having to wrestle the CSS into submission and provide a guide for producing a nice collapsible icon navigation menu by altering the existing out of the box menu in Blazor. In the following example I have left all the standard styling as is with the menu and just done the changes required to make the collapsible menu. The three files that require changes are MainLayout.razor, NavMenu.razor and NavMenu.razor.css. The code changes are shown below: Firstly the NavMenu.razor requires a bool value (IconMenuActive) to indicate whether the icon menu is showing or not, then wrap the text of the each NavItem in an if statement dependent on this bool. Then a method for toggling this bool and EventCalBack to send a bool to the MainLayout.razor for shrinking the width of the sidebar. Lastly there needs to be the control for switching menu views (I used the standard io icon arrows). NavMenu.razor <div class="top-row ps-3 navbar navbar-dark"> <div class="container-fluid"> <span class="oi oi-monitor" style="color:white;" aria-hidden="true"></span> @if (!@IconMenuActive) { <a class="navbar-brand" href="">The Menu Title Here</a> } <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu"> <span class="navbar-toggler-icon"></span> </button> </div> </div> <div class="@NavMenuCssClass" @onclick="ToggleNavMenu"> <nav class="flex-column"> <div class="nav-item px-3"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> <span class="oi oi-home" aria-hidden="true"></span> @if (!@IconMenuActive) { <label>Home</label> } </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link" href="counter"> <span class="oi oi-plus" aria-hidden="true"></span> @if (!@IconMenuActive) { <label>Counter</label> } </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link" href="fetchdata"> <span class="oi oi-list-rich" aria-hidden="true"></span> @if (!@IconMenuActive) { <label>Fetch data</label> } </NavLink> </div> </nav> </div> <div class="bottom-row"> <div class="icon-menu-arrow"> @if (!@IconMenuActive) { <span class="oi oi-arrow-left" style="color: white;" @onclick="ToggleIconMenu"></span> } else { <span class="oi oi-arrow-right" style="color: white;" @onclick="ToggleIconMenu"></span> } </div> </div> @code { //bool to send to MainLayout for shrinking sidebar and showing/hide menu text private bool IconMenuActive { get; set; } = false; //EventCallback for sending bool to MainLayout [Parameter] public EventCallback<bool> ShowIconMenu { get; set; } private bool collapseNavMenu = true; private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; } //Method to toggle IconMenuActive bool and send bool via EventCallback private async Task ToggleIconMenu() { IconMenuActive = !IconMenuActive; await ShowIconMenu.InvokeAsync(IconMenuActive); } } Next I add in a bit of CSS in to NavMenu.razor.css to put the arrow for toggling the menu at the bottom of the sidebar and a media query to make sure it doesn't show up in mobile view. The CSS classes added are .bottom-row and .icon-menu-arrow. NavMenu.razor.css .navbar-toggler { background-color: rgba(255, 255, 255, 0.1); } .top-row { height: 3.5rem; background-color: rgba(0,0,0,0.4); } .bottom-row { position: absolute; bottom: 0; padding-bottom: 10px; text-align: right; width: 100%; padding-right: 28px; } .icon-menu-arrow { text-align: right; } .navbar-brand { font-size: 1.1rem; } .oi { width: 2rem; font-size: 1.1rem; vertical-align: text-top; top: -2px; } .nav-item { font-size: 0.9rem; padding-bottom: 0.5rem; } .nav-item:first-of-type { padding-top: 1rem; } .nav-item:last-of-type { padding-bottom: 1rem; } .nav-item ::deep a { color: #d7d7d7; border-radius: 4px; height: 3rem; display: flex; align-items: center; line-height: 3rem; } .nav-item ::deep a.active { background-color: rgba(255,255,255,0.25); color: white; } .nav-item ::deep a:hover { background-color: rgba(255,255,255,0.1); color: white; } @media (min-width: 641px) { .navbar-toggler { display: none; } .collapse { /* Never collapse the sidebar for wide screens */ display: block; } } @media (max-width: 640px) { .bottom-row { display: block; } } Finally I add in the handler for the EventCallback to MainLayout.razor and a method to alter the width of the sidebar. MainLayout.razor @inherits LayoutComponentBase <div class="page"> <div class="sidebar" style="@IconMenuCssClass"> <NavMenu ShowIconMenu="ToggleIconMenu"/> </div> <main> <div class="top-row px-4"> <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> </div> <article class="content px-4"> @Body </article> </main> </div> @code{ private bool _iconMenuActive { get; set; } private string? IconMenuCssClass => _iconMenuActive ? "width: 80px;" : null; protected void ToggleIconMenu(bool iconMenuActive) { _iconMenuActive = iconMenuActive; } } The final product of these little changes are shown in the pictures below: I'd love to hear if anyone has tackled this in a different way to me and if they've got any ideas on making it cleaner. Have yourselves a wonderful day, Gav
How many of you want Microsoft to support office/excel web add-ins using Blazor WASM?
Hello everyone, I would like the Blazor team to support creating excel/office web add-in using Blazor WASM. They only support REACT at the moment. I think supporting Blazor can make a big impact with .net developers and has a huge potential.Upgrading ASP.NET Core to .NET 6 & C# 10
Check out my series of videos where I try upgrading an ASP.NET Core project template to .NET 6 & C# 10. We looked at the following new features: - Source generated Log messages. - Hot reload. - New launchSettings.json settings. - Validating configuration on startup. - New Strongly typed HTTP header properties. https://www.youtube.com/watch?v=T6iP7QPWmPI In part two, I continue upgrading an ASP.NET Core project template to .NET 6 & C# 10. In this show we looked at: - Open Telemetry in ASP.NET Core. - New hidden features in ASP.NET Core hosting. - New DI method CreateAsyncScope. - New Configuration method GetRequiredSection. - New ArgumentNullException.ThrowIfNull API. - Record classes. https://www.youtube.com/watch?v=mcC9jFLoOlMServer-side Blazor state management
One of the more interesting things about server-side Blazor is that, unlike all previous UI frameworks, it maintains all per-user state (including the user's identity) in a dependency injection scope. Windows Forms, WPF, and UWP use the current thread. ASP.NET normally uses HttpContext. Blazor WebAssembly is similar to WinForms/WPF - a single process space for the user and app. But server-side Blazor is stateful on the server, so it can't rely on HttpContext, or any specific thread. So the way they implemented management of things like the current user's principal/identity is via DI scope. Each server-side Blazor app is hosted in its own DI scope, and so a service added as a scoped service is exactly what is necessary to maintain any per-user information. The downside to this, is that if you (like me) have any static methods that, for example, check the user's permissions based on user identity - well, that's impossible. It is impossible because the user's identity isn't "ambient" like in all other UI frameworks. The user's identity is only available in an _instance_ of a type, and only if a service that has the user identity was injected into your instance! As a result, I've spent many, many hours over the past couple weeks rewriting the #cslanet framework so it gets the user identity via DI, and then passes the identity around to all objects that need it (which is a lot - CSLA is primarily a rules engine, so the user identity is necessary all over the place). It turns out that DI, like async/await, is like a virus. Once you start using it a little, pretty soon you find that you've had to rewrite nearly all your code to rely on the concept.Managing web client assets ... and how Snowpack can help
Hello there. I've been wondering what tooling and workflow everyone is using to manage client assets JS/CSS/images etc especially for Blazor and perhaps provide some inspiration in the process (not writing a complete guide, merely a pointer). When trying tools like Libman, Gulp, Webpack, MSBuild it turned out to be either insufficient or too convoluted with lot of complexity and JS code for even basic tasks. My needs were somewhat simple in the head, yet hard to execute: 🟢 Needs to work with CLI/Visual Studio Code ecosystem 🟢 Manage packages with PNPM (faster and more efficient alternative to NPM) 🟢 Self-contained TypeScript source files that would produce fully optimized unbundled importable ESM modules with treeshaking, splitting, minification 🟢 PostCSS with support for nesting, variables, imports. Coupled with TailwindCSS JIT that would automatically generate on-demand minimal CSS styles depending on what is in .razor or even .cshtml & .cs template files. 🟢 All of this would need to happen fast, watcher should rebuild only what is needed every time relevant file is changed and output has to be hot reloaded into running application so work can be done in real-time with current application state. 🟢 Everything must be minimal, automatic, no extraneous declarations and relevant things should sit side-by-side. Only tool that managed to do all this pretty much out of the box is Snowpack lightning-fast frontend build tool, designed for the modern web. Configuration is very simple compared to other tools /* snowpack.config.js */ /** @type {import("snowpack").SnowpackUserConfig } */ module.exports = { mount: { assets: "/", //"assets" folder holds source files for our wwwroot pages: "/pages", //tells snowpack to watch for changes in this folder shared: "/shared", //tells snowpack to watch for changes in this folder "../../node_modules/@fontsource/poppins/files": { //Copy some extra files from node_modules to wwwroot/css/files //Snowpack doesn't resolve font imports "yet" url: "/css/files", static: true, }, }, exclude: ["**/*.cs"], //Don't watch or include C# files in the wwwroot, we'd comment this out if they contained classes for TailwindCSS JIT to pick up plugins: [ "@snowpack/plugin-postcss", //Support for PostCSS ideally in `.pcss` files, needs to be installed separately with PNPM [ "@jadex/snowpack-plugin-exclude", //This plugin makes sure these files are watched for changes, but not included in the final wwwroot { paths: ["**/*.razor", "**/*.pcss"], }, ], ], buildOptions: { clean: process.env.NODE_ENV === "production", //Production build should be cleaned up out: "wwwroot", }, optimize: { minify: true, bundle: false, treeshake: true, splitting: true, target: "es2020", }, }; And that's all you need to do with Snowpack, all your assets will build up nicely in the wwwroot, ready to be consumed by the browser. ------------------------------------------------------ Couple notes how things need to be organized CSS Create folder assets/css and put there your css files you want to act as bundles to be placed in wwwroot. In them import individual .pcss files or globs with postcss-import & postcss-import-ext-glob plugins. /* assets/css/app.css */ @import "tailwindcss/base.css"; @import "tailwindcss/components.css"; @import-glob "./**/_components/**/*.pcss"; @import-glob "../../{Pages,Shared}/**/*.pcss"; @import "../../App.razor.pcss"; @import "tailwindcss/utilities.css"; In your index.html or _Layout.cshtml include as normal <link href="css/app.css" rel="stylesheet" /> Snowpack watcher will know when imported pcss is changed and will rebuild the css that imports it. TypeScript Create folder assets/js and put your ts files there /* assets/js/map.ts */ import mapboxgl from "mapbox-gl"; import "mapbox-gl/dist/mapbox-gl.css"; export function initMap(accessToken: string) { mapboxgl.accessToken = accessToken; const map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v11", center: [19.62915, 45.3701] zoom: 15, }); map.addControl(new mapboxgl.FullscreenControl()); map.scrollZoom.disable(); } Don't include in index.html or _Layout.cshtml. Import modules as needed on your pages/layouts. var mapModule = await this.Runtime.InvokeAsync<IJSObjectReference>("import", "./js/map.js"); await this.mapModule.InvokeVoidAsync("initMap", "accessToken"); Other files like Images/Manifests/Favicons Just include in the root of the assets folder or subfolders assets/img etc. It's possible to use plugins to optimize these files too. For example Sharp can be used to optimize, resize images or generate avif/webp variants. Hope someone finds this helpful, should work for MVC and RCL too. Feel free to share your way to tackle the issue or ask questions.How to stop "A potentially dangerous Request.Path" with "<"
Hello, I've been getting "A potentially dangerous Request.Path value was detected from the client (<)." recently and it is causing the application pools in IIS to stop working. The url they are trying to pass through is similar to this: https://test.com:443/cds/pubs/bib/<my_tag_9ac1214b650a30718aced57527fd64c4/> If users can past this URL at any point on my site, how can I stop it from constantly stopping my site and still being safe from SQL injection, Cross Site Scripting or some other vulnerability? Can I encode it before the page is processed so "<" becomes "<"? That way this will not be considered a dangerous Request.Path. Thank you
Open Source Materio Asp.NET Core MVC Admin Dashboard Template
Hi All, Sharing here Materio Free Asp.NET Core MVC Admin Template. If you’re a developer looking for the latest Free ASP.NET Core 8, MVC 5 Admin Panel Template that is developer-friendly, rich with features, and highly customizable look no further than Sneat. Incredibly versatile, this Free ASP.NET Dashboard also allows you to build any type of web application. For instance, you can create: SaaS platforms Project management apps E-commerce backends CRM systems Analytics apps Banking apps Education apps Fitness apps & many more. Features: Based on ASP.NET Core 8, MVC 5 UI Framework Bootstrap 5 Vertical layout 1 Unique Dashboard 1 Chart library SASS Powered Authentication Pages Fully Responsive Layout Organized Folder Structure Clean & Commented Code Well Documented You can check the GitHub repo as well: https://github.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free
Open Source ASP.NET 8 MVC 5 Admin Template - Sneat
Hi All, Sharing here Sneat Free Asp.NET Core MVC Admin Template. If you’re a developer looking for the latest Free ASP.NET Core 8, MVC 5 Admin Panel Template that is developer-friendly, rich with features, and highly customizable look no further than Sneat. Incredibly versatile, this Free ASP.NET Dashboard also allows you to build any type of web application. For instance, you can create: SaaS platforms Project management apps E-commerce backends CRM systems Analytics apps Banking apps Education apps Fitness apps & many more. Features: Based on ASP.NET Core 8, MVC 5 UI Framework Bootstrap 5 Vertical layout 1 Unique Dashboard 1 Chart library SASS Powered Authentication Pages Fully Responsive Layout Organized Folder Structure Clean & Commented Code Well Documented You can check the GitHub repo as well: https://github.com/themeselection/sneat-bootstrap-html-aspnet-core-mvc-admin-template-free Hope you all like it.
Resouces / Samples / Ideas for CRUD operations for nested forms (3 or more layers down)
Does anyone know any resources / sample projects / templates for creating, reading, updating and deleting nested forms in Blazor? Preferably using Dapper but even some inspirations for UI would be really helpful. An example would be creating a quote. A quote (id, customer name, etc) can have one have one or more options. Each option (id,option name, total price, etc) can have one or more products (id, name, quantity, price, etc)
