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
Debugging Java script in old asp core app
Hy, I need to modify an asp.net.core app witch I made years ago. in version 2.2. I do succeed to alter C# code in visual studio (2022), but I need to alter also some Java script. The problem is that if I try to do so and I want to debug it it seems that the script in my browser (MS Edge) is not changing. I have enabled Java script debugging in VS. I emptied the browsers cache but nothing seems to help. When I run the application in debugging mode and hit F12 I still see the old script. Please help!When should I use SQL Server, MySQL, or PostgreSQL?
I'm working on a web application (using C#/.NET backend), and I need to choose a relational database. I'm considering three options: Microsoft SQL Server MySQL PostgreSQL I want to understand: What are the strengths and weaknesses of each? Which database is better suited for: Transactional performance Advanced querying / analytics Ease of use with .NET Cross-platform support Are there any licensing or hosting concerns I should consider? My use case involves: Moderate traffic Complex queries with joins APIs and background jobs Deployment to cloud (Azure) I’d appreciate any recommendations or real-world experience comparing these databases.
Is Native RDLC Report Support Planned for Future .NET Versions?
Good day Team, Given the demand for cross-platform reporting solutions, is there any plan to provide native RDLC (Report Definition Language Client-side) support for .NET Core or upcoming .NET releases (e.g., .NET 9 and beyond)? Many enterprise applications rely on RDLC, and the current lack of official support limits modernization efforts and forces continued reliance on the legacy .NET Framework or Windows-only workarounds. Is RDLC on the roadmap for future .NET versions, or should we consider alternative technologies for long-term reporting requirements? Any official guidance or updates would be greatly appreciated.Creating a pooled resource for Dependency Injection
Currently, we have AddSingleton(), AddScoped(), and AddTransient() to generate resources in DI. Is there a way to request a new feature for an AddPooled() which will allow us to create and reuse unused instances from a pool? I have a class that has an expensive creation (a little over 5 seconds) that cannot be instantiated as a singleton. I don't need it to maintain any state, so it would be an ideal candidate for a pooled resource in DI.
Open Source Materio Asp.NET Core MVC Admin Dashboard Template
https://themeselection.com/item/materio-free-aspnet-core-mvc-admin-template/ Hi All, Sharing here https://themeselection.com/item/materio-free-aspnet-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 https://themeselection.com/item/category/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
Build Scalable Web Apps and APIs with ASP.NET Core, Blazor, Angular for Modern Web Apps
I’m starting this discussion because many developers today need guidance on how to build modern, scalable web applications and APIs by combining ASP.NET Core, Blazor, and Angular—three powerful technologies within the .NET ecosystem. Whether you're focused on server-side development, creating dynamic client-side apps, or integrating both, these frameworks provide incredible capabilities to enhance your projects ASP.NET Core for API Development: ASP.NET Core is a robust, high-performance framework that allows you to create powerful APIs. Some of the best practices we’ll cover include: - Designing RESTful APIs with ASP.NET Core - Utilizing Entity Framework Core for efficient database access - Securing APIs with JWT and OAuth - Handling asynchronous requests for optimal performance - Implementing API versioning and changes over time Building Dynamic Web Apps with Blazor: Blazor enables you to create interactive web applications using C# instead of JavaScript. We will discuss: - Blazor Web Assembly vs. Blazor Server: Differences and use cases - Creating reusable Blazor components for UI - Integrating third-party JavaScript libraries with Blazor - Using SignalR for real-time features - Optimizing Blazor for performance Angular for Full-Featured Client-Side Development: Angular is a powerful, full-featured front-end framework that excels in creating dynamic and complex user interfaces. In this section, we'll dive into: - Why you might choose Angular over Blazor in certain cases - Using Angular CLI to scaffold, build, and maintain apps - Managing state in Angular with NgRx or RxJS - Connecting Angular with ASP.NET Core APIs for data handling - Working with Angular components, services, and routing for a seamless user experience Combining Angular and Blazor in a Single Application: You may have use cases where you want to combine both Blazor and Angular in one application to leverage the strengths of each framework: - When to use Angular for complex frontend features (e.g., dynamic forms, complex data visualization) and Blazor for simpler components or backend-heavy apps. - Managing communication between Angular and Blazor components in a single page (e.g., using - JavaScript Interop to pass data between the two). - Handling authentication and state management across both frameworks. Integration between Frontend (Blazor/Angular) and Backend (ASP.NET Core): No matter whether you're using Angular or Blazor for the frontend, integrating these with your backend API is key. We'll discuss: - Setting up HttpClient for making API calls from both Blazor and Angular - Working with SignalR to enable real-time features in both frontends - Managing authentication and authorization across both Angular and Blazor (JWT, OAuth) - Best practices for passing data and sharing state between the frontend and backend Scalable and Maintainable Web Apps: When building full-stack web applications, it's important to focus on scalability and maintainability. Here are some practices for achieving this: - Structuring your application code to separate concerns (e.g., services, components, repositories) - Utilizing Dependency Injection for flexible and testable code - Modularizing your codebase for easier updates and maintenance - Using Lazy Loading for Angular and Blazor components to improve performance - Leveraging Caching strategies to enhance response times Testing and Continuous Deployment: For any modern application, testing and deployment are crucial. We’ll discuss: - Unit and integration testing in ASP.NET Core, Blazor, and Angular - Automated end-to-end testing (e.g., with Cypress for Angular, bUnit for Blazor) - Continuous Integration/Continuous Deployment (CI/CD) strategies for seamless deployment to cloud platforms like Azure or AWS When to Choose Angular, Blazor, or Both: It’s essential and interesting to know when to use each of these frameworks depending on your project’s needs. Some scenarios we’ll explore: - When to go for Blazor for a unified C# experience in both frontend and backend - Why you might opt for Angular when building highly interactive, feature-rich web applications - Hybrid approaches where you can use Blazor and Angular together for a robust full-stack solution SO: Combining ASP.NET Core, Blazor, and Angular allows developers to choose the right tool for the right job, creating flexible, scalable, and maintainable web applications. Whether you’re leveraging Blazor for its deep integration with .NET or Angular for its powerful frontend capabilities, these technologies offer a powerful suite of tools to build modern web applications. What are your thoughts? How have you integrated Angular or Blazor with ASP.NET Core in your projects? Share your experiences and challenges, and let's collaborate on solutions!Add AWS Cognito authentication to a Blazor WebAssembly standalone app
I cannot find a step by step guide for using AWS Cognito in a Blazor WebAssembly standalone app for net 8 Microsoft did produce a https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-authentication-library?view=aspnetcore-8.0&tabs=visual-studiobut not for Cognito. I did find a very good https://danieldonbavand.com/2024/04/10/securing-digital-identities-streamlining-authentication-with-aws-cognito-in-blazor-net-8-applications/comment-page-1/?unapproved=1695&moderation-hash=19e62c931277bbedb6ae1de7fa29b4d1#respond for adding Cognito but to a Blazor web app which does require a server.Blazor has turned out to be a massive disappointment, will it ever get Windows Authentication?
Blazor is a technology I've been hearing about for a couple of years. It sounds like it would be great, especially for not having to write any JavaScript code, unless it is absolutely necessary. I maintain a very old classic ASP.NET WebForms application which has a lot of issues that greatly add technical debt. I have finally convinced my management to let me rewrite this application, and it was my intention to use Blazor in .NET 8. I started a few weeks back. The number one thing is this app MUST use Windows Authentication as it is an Intranet app, working within our corporate firewall. No exceptions!!! I thought at one point that I had found a solution, but then I discovered that when creating the project and selecting Windows Authentication, Visual Studio was changing it from .NET 8 to .NET 6. That took me more than a week to discover that had happened. I have tried, multiple ways of getting Windows Authentication with IIS to work with a Blazor Server App and .NET 8. However, today I realized that is a broken dream. That I am wasting my time and need to give it up. Perhaps someday Microsoft will get around to bringing that back to a current version of .NET, but I need a solution today, not in November when .NET 9 comes out and hope that it brings Windows Authentication with Blazor Server, or some year in the future. This is very disappointing. So, I think the only choice I have at this point, is to go back to ASP.NET Core with .NET 8. I have heard that it is possible to embed Blazor components into ASP.NET Core/Razor pages, so that is an option, I hope. That way I can have ASP.NET Core MVC do the Windows Authentication and use Blazor components here and there. But I don't know how to do that and trying to find some training on how to do that is difficult. I am asking for recommendations/guidance to training either on Microsoft Learn, Pluralsight, or YouTube so I can learn how to do this and move forward. Thank you very much in advance, for your help.
Help with my ASP.NET API Application
I have been developing API for a full stack application with React FrontEnd in ASP.NET for my Internship project which is an Asset Management System. I have successfully implemented API Endpoints for CRUD with Authentication with JWT. What topic should I learn next ? Should I start providing API Documentation or is there something else I need to learn ? I have also uploaded the Schema the project is using. I am using ADO.NET instead of Entity Framework for quering with the database. The link to my Repository Source Code: https://github.com/bibashmanjusubedi/Internship
