Blazor
121 TopicsDynamic form generation from dictionary
ASP.NET Blazor app brand spanking new to the stuff here. Trying a move from Apache PHP. Trying to create a dynamic form from a dictionary generated from a separate class I've banged my head against the wall for hours and can't get past this point. This makes everything a text box.. and When its done this way I can see the data change from the submit method. Any time I try to create a bool (checkbox) or number field I get conversion errors or worse. That dictionary _registry.Fields.FieldsData looks like. (converted to JSON to use here) { "ID": { "ID": "47", "fld_app": "5", "fld_human": "ID", "fld_column": "ID", "fld_enable": "True", "fld_type": "int", "fld_pdotype": "", "fld_length": "NULL", "fld_precision": "", "fld_pass": "", "fld_opt": "False", "fld_opt_table": "", "fld_opt_column": "", "fld_icon_set": "", "fld_regex": "", "fld_uom": "", "fld_placeholder": "", "fld_usr_ID": "False", "fld_link": "", "fld_index": "True", "fld_detail": "True", "fld_form": "True", "fld_order": "1", "fld_title": "False", "fld_required": "False", "fld_double": "False", "fld_encrypt": "False", "fld_time": "False", "fld_image": "False", "fld_unique": "False", "fld_json": "False" }, "Column1": { "ID": "48", "fld_app": "5", "fld_human": "Column1", "fld_column": "Column1", "fld_enable": "True", "fld_type": "nvarchar", "fld_pdotype": "", "fld_length": "50", "fld_precision": "", "fld_pass": "", "fld_opt": "False", "fld_opt_table": "", "fld_opt_column": "", "fld_icon_set": "", "fld_regex": "", "fld_uom": "", "fld_placeholder": "", "fld_usr_ID": "False", "fld_link": "", "fld_index": "True", "fld_detail": "True", "fld_form": "True", "fld_order": "2", "fld_title": "False", "fld_required": "False", "fld_double": "False", "fld_encrypt": "False", "fld_time": "False", "fld_image": "False", "fld_unique": "False", "fld_json": "False" }, "Column2": { "ID": "49", "fld_app": "5", "fld_human": "Column2", "fld_column": "Column2", "fld_enable": "True", "fld_type": "nvarchar", "fld_pdotype": "", "fld_length": "50", "fld_precision": "", "fld_pass": "", "fld_opt": "False", "fld_opt_table": "", "fld_opt_column": "", "fld_icon_set": "", "fld_regex": "", "fld_uom": "", "fld_placeholder": "", "fld_usr_ID": "False", "fld_link": "", "fld_index": "True", "fld_detail": "True", "fld_form": "True", "fld_order": "3", "fld_title": "False", "fld_required": "False", "fld_double": "False", "fld_encrypt": "False", "fld_time": "False", "fld_image": "False", "fld_unique": "False", "fld_json": "False" }, "Column3": { "ID": "50", "fld_app": "5", "fld_human": "Column3", "fld_column": "Column3", "fld_enable": "True", "fld_type": "nvarchar", "fld_pdotype": "", "fld_length": "50", "fld_precision": "", "fld_pass": "", "fld_opt": "False", "fld_opt_table": "", "fld_opt_column": "", "fld_icon_set": "", "fld_regex": "", "fld_uom": "", "fld_placeholder": "", "fld_usr_ID": "False", "fld_link": "", "fld_index": "True", "fld_detail": "True", "fld_form": "True", "fld_order": "4", "fld_title": "False", "fld_required": "False", "fld_double": "False", "fld_encrypt": "False", "fld_time": "False", "fld_image": "False", "fld_unique": "False", "fld_json": "False" }, "Column4": { "ID": "51", "fld_app": "5", "fld_human": "Column4", "fld_column": "Column4", "fld_enable": "True", "fld_type": "nvarchar", "fld_pdotype": "", "fld_length": "50", "fld_precision": "", "fld_pass": "", "fld_opt": "False", "fld_opt_table": "", "fld_opt_column": "", "fld_icon_set": "", "fld_regex": "", "fld_uom": "", "fld_placeholder": "", "fld_usr_ID": "False", "fld_link": "", "fld_index": "True", "fld_detail": "True", "fld_form": "True", "fld_order": "5", "fld_title": "False", "fld_required": "False", "fld_double": "False", "fld_encrypt": "False", "fld_time": "False", "fld_image": "False", "fld_unique": "False", "fld_json": "False" }, "Column5": { "ID": "52", "fld_app": "5", "fld_human": "Column5", "fld_column": "Column5", "fld_enable": "True", "fld_type": "nvarchar", "fld_pdotype": "", "fld_length": "50", "fld_precision": "", "fld_pass": "", "fld_opt": "False", "fld_opt_table": "", "fld_opt_column": "", "fld_icon_set": "", "fld_regex": "", "fld_uom": "", "fld_placeholder": "", "fld_usr_ID": "False", "fld_link": "", "fld_index": "True", "fld_detail": "True", "fld_form": "True", "fld_order": "6", "fld_title": "False", "fld_required": "False", "fld_double": "False", "fld_encrypt": "False", "fld_time": "False", "fld_image": "False", "fld_unique": "False", "fld_json": "False" }, "Column6": { "ID": "53", "fld_app": "5", "fld_human": "Column6", "fld_column": "Column6", "fld_enable": "True", "fld_type": "nvarchar", "fld_pdotype": "", "fld_length": "50", "fld_precision": "", "fld_pass": "", "fld_opt": "False", "fld_opt_table": "", "fld_opt_column": "", "fld_icon_set": "", "fld_regex": "", "fld_uom": "", "fld_placeholder": "", "fld_usr_ID": "False", "fld_link": "", "fld_index": "True", "fld_detail": "True", "fld_form": "True", "fld_order": "7", "fld_title": "False", "fld_required": "False", "fld_double": "False", "fld_encrypt": "False", "fld_time": "False", "fld_image": "False", "fld_unique": "False", "fld_json": "False" } } The .razor component PAGE "/FieldsAdmin" @inject ILogger<FieldsAdmin> Logger @inject portalx.Classes.Main.DBO Database @using System.Data @using System.Collections.Generic @inject portalx.Classes.Main._reg _registry @using System.Text.Json <form method="post" @onsubmit="Submit" @formname="FieldsAdmin"> <AntiforgeryToken /> @if (_registry.Fields.FieldsData != null) { @foreach (var row in _registry.Fields.FieldsData) { <div class="form-row"> @foreach (var field in row.Value) { <div class="form-group col-md-6"> <label>@field.Key</label> @{ var key = $"{row.Key}-{field.Key}"; if (!Model!.DynamicFields.ContainsKey(key)) { Model!.DynamicFields[key] = field.Value?.ToString() ?? string.Empty; } } <InputText @bind-Value="Model!.DynamicFields[key]" /> </div> } </div> } } <div> <button type="submit">Submit</button> </div> </form> <div> <h3>Fields Data (JSON)</h3> <pre>@jsonString</pre> </div> @code { [SupplyParameterFromForm] private ModelFieldsAdmin? Model { get; set; } private Dictionary<string, string> dataDict { get; set; } private string jsonString { get; set; } protected override void OnInitialized() { Model ??= new(); dataDict = new Dictionary<string, string> { { "ID", "hidden" }, { "fld_app", "skip me" }, { "fld_human", "text" }, { "fld_column", "skip me" }, { "fld_enable", "bool" }, { "fld_type", "skip me" }, { "fld_pdotype", "skip me" }, { "fld_length", "skip me" }, { "fld_precision", "skip me" }, { "fld_pass", "bool" }, { "fld_opt", "bool" }, { "fld_opt_table", "text" }, { "fld_opt_column", "text" }, { "fld_icon_set", "text" }, { "fld_regex", "text" }, { "fld_uom", "text" }, { "fld_placeholder", "text" }, { "fld_usr_ID", "bool" }, { "fld_link", "bool" }, { "fld_index", "bool" }, { "fld_detail", "bool" }, { "fld_form", "bool" }, { "fld_order", "number" }, { "fld_title", "bool" }, { "fld_required", "bool" }, { "fld_double", "bool" }, { "fld_encrypt", "bool" }, { "fld_time", "bool" }, { "fld_image", "bool" }, { "fld_unique", "bool" }, { "fld_json", "bool" } }; jsonString = JsonSerializer.Serialize(_registry.Fields.FieldsData, new JsonSerializerOptions { WriteIndented = true }); } private void Submit() { foreach (var kvp in Model!.DynamicFields) { Logger.LogInformation("Field Key: {Key}, Value: {Value}", kvp.Key, kvp.Value); } } public class ModelFieldsAdmin { public string? Id { get; set; } public Dictionary<string, string> DynamicFields { get; set; } = new Dictionary<string, string>(); } }Solved34Views0likes1CommentUse background Service With SignlarR In Blazor
i use blazor webassemly .net 8 i want every 5 sec send time to all clients this is my project https://github.com/jones1995wm/SendTime but when i navigate to /chat page component this code send time to all users await _clockHub.Clients.All.ShowTime(DateTime.Now); but not called the hubConnection.On("ShowTime") and dont update ui (foreach) why ? i use thishttps://learn.microsoft.com/en-us/aspnet/core/signalr/background-services?view=aspnetcore-8.0 how to use timer or background service with signalR in blazor to send time every 10 second6Views0likes0CommentsHow to trigger modal in blazer web server using c#?
Hi Team I have a blazer web server, want to understand something regarding my code. The suppose when clicking add operation it triggers modal, currently its not doing so and checked by debuging there are no any js errors. How do i improve this logic so it can work as expected? PAGE "/main" @using OperationApp.Models @using OperationApp.Components @using Blazored.Modal <h1>Operation Manager</h1> <!-- Button to open modal for adding a device --> <button class="btn btn-primary mb-3" @onclick="OpenAddDeviceModal">Add Device</button> <!-- Listing of operations --> @if (operations.Any()) { <ul class="list-group"> @foreach (var operation in operations) { <li class="list-group-item d-flex justify-content-between align-items-center"> <span>@operation.Name</span> <span> <!-- Button to remove the operation --> <button class="btn btn-danger" @onclick="() => RemoveOperation(operation.OperationID)">Remove</button> </span> </li> } </ul> } else { <p>No operations available.</p> } <!-- AddDeviceModal component --> <AddDeviceModal @ref="addDeviceModal" /> @code { private List<Operation> operations = new List<Operation>(); private AddDeviceModal addDeviceModal; private void OpenAddDeviceModal() { addDeviceModal.Open(); // Open the modal } private void RemoveOperation(int operationID) { var operationToRemove = operations.FirstOrDefault(op => op.OperationID == operationID); if (operationToRemove != null) { operations.Remove(operationToRemove); } } }122Views0likes0CommentsFile selector-Box for getting links to files in Intranet-Filesystems
Hello, i develop a blazor server-application with following requirements: The user wants to to save links to files (e.g. d:\temp\test.doc or \\shareserver\share\test.doc) or directories (e.g. d:\temp or \\shareserver\share) to a database. The user should be able to select those files and directories in the file-system with a file-selector box and get the path to them. The standard html <input type=file>-Element is not working because it is not publishing the path to the selected file. Is there any solution for this? best regards Volkhard103Views0likes0CommentsBlazor 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.347Views0likes0CommentsProblems running application in .Net MAUI after upgrade from .Net 6 to .Net 8
Good morning, The organization I work for has been developing a Maui-Blazor hybrid application. We were able to install it and it was working through our deployment process when we were using .Net 6.0. After the upgrade to .Net 8.0, it will no longer run on some of the machines. We are using Panasonic CF-33 toughbooks with the same clones on them. They have the same hardware specs. We have tried completely uninstalling the application, we've removed any runtimes from .Net and then did complete reinstalls of the runtimes. We've installed .Net Desktop Runtime and the .Net 8 runtime. We've reinstalled the application. There are no errors in the event viewer when we launch the application. When the application is launched from the start menu (either as admin or regular) the cursor spins for a moment and nothing happens. We've added logging in the startup pipeline of the application after we initially documented this behavior and deployed that and it's not even getting to the logging to log anything. Occassionally we get a kernelbase.dll error in the event viewer when launching but it's not consistently there. Some of the machines it opens on and some it doesn't. We are unable to find any discrepancies between the devices ie, same release of windows 10, same runtimes, etc. I would appreciate if anyone could comment on this for some tips or maybe something we could try. I have noticed that through the various installs (incrementing version/release) there are several folders created in the WindowsApps folder that are for the previous versions even if we have uninstalled them. We thought maybe that could be causing a problem. Thanks for your time and hope to hear from someone soon. Have a great day!589Views0likes2CommentsConvert 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 manoeuvreI 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, Gav66KViews10likes14CommentsMoved auth db from localdb to mssql now I get a cert error
here is the error SqlException: A connection was successfully established with the server, but then an error occurred during the login process. (provider: SSL Provider, error: 0 - The certificate chain was issued by an authority that is not trusted.) I did an export in ssms from localdb to the new sql databasse then changed the default connection304Views0likes3Comments