I added a NavLink inline and the default css gives it left and right padding.

I found the class name and tried overriding it (in both css isolation and <style> tags, but it ignores my modifications).

I tried this:

<h7>You can log back in at any time <span style="display: inline-block;"><NavLink class="nav-link-nopadding" href="/register">HERE</NavLink></span>.</h7>

and it returns the link to html default (blue with underline). It ignores all my formatting in the custom class.

Anyone know how to customize the css for NavLink?

Good Day Fellow Developers,

I've been working on some small projects in Blazor Serverside for the last few months and now I have a real project I am considering Blazor WebAssembly for. I have a couple questions about the capability of the WebAssembly side of things:

1. Need to be able to have 3+ devices that are offline but on a local network interact with each other. 1 will be the "host" per say and the other 2 are clients. All 3 are running the same WebAssembly just in different modes. Can WebAssembly access the local network and can I have these 3 devices talk to each other if they know each other exist and their local IP's? (Devices might be a combination of iOS, Android, and PC)

2. I need to be able to have small images (thumbnails), product data, and some other things downloaded to the host when it is online to sync from the main server. I know I can have a localDB. How would that work with images and what is the persistence of that data store over time?

Thanks!

I’ve been using blazor server for a few years and I haven’t once had a project use the ‘ServerPrerendered’ option. The double load just is very uncomfortable and I don’t notice a huge improvement in speed or performance. All my projects are using ‘Server’

Anyone else have a different experience?

Is there a good way to use a React component in Blazor WebAssembly?

I discovered that Blazor Webassembly has a native dependency functionality. I could only find something about how to import something form C. So i went to look for other ways. I saw some other ways to import react components but they were posts from 2 or 3 years ago so i wasnt really sure if there is not a newer way since blazor got a good amount of changes.

Hey guys, would really appreciate the help if somene can guide me what I am missing here.

I have a file upload control with multiple attribute in a blazor server app. I post the files to a backend API using httpclient and I can always submit 4-5 files when each file size is in KBs (less than 1 MB). I can also upload a single file of up to 10 MB without any issues. The problem happens when I select and upload 3 or more files, each of 2MB or more. The blazor app either times out (which is time out of Http Client which I have tried setting to 10 mins) or the request never reaches the API.

Here is the code:

Index.Razor

@page "/"
@using System.Net.Http.Headers
@inject HttpClient _httpClient

<PageTitle>Index</PageTitle>

<InputFile class="custom-file-input" OnChange="@LoadFiles" multiple="multiple" />
<button class="btn btn-primary" type="button" @onclick="UploadFiles">Upload</button>

@code{
    private IReadOnlyList<IBrowserFile>? _images;

    private async Task LoadFiles(InputFileChangeEventArgs e)
    {
        _images = e.GetMultipleFiles();
    }

    private async Task UploadFiles()
    {
        const long maxFileSize = 1024 * 1024 * 300;
        var uri = "https://localhost:7112/Files";
        using var content = new MultipartFormDataContent();

        foreach (var file in _images)
        {
            var fileContent = new StreamContent(file.OpenReadStream(maxFileSize));
            fileContent.Headers.ContentType = new MediaTypeHeaderValue(file.ContentType);
            content.Add(fileContent, "files", file.Name);
        }

        var response = await _httpClient.PostAsync(uri, content);

    }

}

and here is the API controller

        [HttpPost]
        public void Upload([FromForm] IEnumerable<IFormFile> files)
        {
            var count = files.Count();
            //Do something with files
        }

What am I missing here? Is there something special I need to do in blazor to increase request size? If yes, then why I can upload a 10MB files when 2-3 files of total size 6MB arent reaching the API?

Edit: To pin point exactly where the blazor app hangs, it is the foreach loop in second iteration. It will copy first image, irrespective of its size to the stream but as soon as it tries to copy the second image, the control never comes back.

Parameter is a feature for transmitting data from a parent component to its direct child components.

• Passing parameters with Parameter.
• Capture unmatches values.
• Common mistake.
• Detect changes.

Check it out: https://blazorschool.com/tutorial/blazor-wasm/dotnet7/parameter-173533

For more information and resources, see:

• Open Collective: https://opencollective.com/blazor-school-docs
• Master Blazor .NET 6 Bundle Ebooks ($105 now only $49 - 55% off): https://opencollective.com/blazor-school-docs/contribute/ebooks-47824
• Discord Community: https://discord.com/invite/HsTu2Emqsd

Hello all,

I have a MudDateRangePicker in my project which is binded to a variable with

@bind-DateRange="DateRange"

It works fine but on changing the date range an Event triggern. Is it possible to remove the Event or disable it? I want to create a list on Button click but it already creates the list after changing the daterange.

My code: https://try.mudblazor.com/snippet/ckQdEHFrzTfYTvAQ

Thanks in advance!

Like title says. My Blazor Server side app is using AD and OpenID for authentication. Logging in works fine but logging out does not. I used every combination from every tutorial for the anchor tag href and none of it actually deletes the cookie and logs me out. I feel like I am missing a step or must have configured something wrong on Azure? Any pointers would help!

By default, the blazor webassembly listens to two (randomly assigned) ports on localhost, one for http and one for https. I'd like to configure the application to listen to a hostname (pointing to 127.0.0.1 using the hosts file) and configure a certificate.

Kestrel provides functionality to configure the endpoints using WehbHostBuilder.WebHost.ConfigureKestrel(). However, the WebAssemblyHostBuilder contains no such method. From the log files it appears Microsoft.AspNetCore.Components.WebAssembly.DevServer uses Kestrel under the hood. So I added a Kestrel section to the appSettingsDevelopment.json file. But it looks like it is being ignored.

How can I configure the blazor webassembly dev server?

Hi I have a BlazorServer app that currently pulls data from our Azure SQL DB. But I'm sure this is not the best way to code this... it is currently like

// ConnectionManager.cs
    public class ConnectionManager : IConnectionManager
    {
        private readonly IConfiguration _configuration;
        private readonly string _connectionString;

        public ConnectionManager(IConfiguration configuration)
        {
            _configuration = configuration;
            _connectionString = _configuration.GetConnectionString("DefaultConnection");
        }

        public IDbConnection CreateConnection()
        {
            SqlConnection? connection;
            connection = new SqlConnection(_connectionString);
            var credential = new DefaultAzureCredential();
            var token = credential.GetTokenAsync(new Azure.Core.TokenRequestContext(new[] { "https://database.windows.net/.default" }));
            connection.AccessToken = token.Result.Token;
            return connection;
        }
    }

... //IConnectionManager.cs
    public interface IConnectionManager
    {
        IDbConnection CreateConnection();
    }

... //In Program.cs
    builder.Services.AddSingleton<IConnectionManager, ConnectionManager>();

... //In a RazorPage.razor.cs
        [Inject]
        private IConnectionManager _connectionManager { get; set; } = null!;
        ...
        using var con = _connectionManager.CreateConnection();
        ...
        var caseData = await con.QueryAsync<SomeModel>(query);
        cases = caseData .ToList<SomeModel>();

Does not have articlesexamples to point out using the new DefaultAzureCredential(). I see many articles still using the old deprecated AzureTokenServiceProvider

Hey guys,

I just wanted to ask you how do you handle multiple loading states? Typically, you have a loading bool that will be glued into your code. As it seems straightforward, the struggle begins when you have multiple flags that controls the behaviour of your view. I find it very annoying to have a „isLoading“ flag in literally every component. Are there alternatives?

Today, I released the "Blazing Story" preview 1, the clone of "Storybook" for Blazor! 🎉

https://github.com/jsakamoto/BlazingStory/

The "Blazing Story" is built on almost 100% Blazor native (except only a few JavaScript helper codes), so you don't have to care about npm, package.json, webpack, and any JavaScript/TypeScript code. You can create a UI catalog application on the Blazor way!
It is the first preview, will not be stable, and lacks many features, but an important milestone for me.

https://i.redd.it/r92k889zcwna1.gif

A new .Net 7 server-hosted WASM solution runs fine out of the box. However, changing the server project ASPNETCORE_ENVIRONMENT variable to anything other than "Development" in launchsettings.json will cause an empty about:blank page to be displayed in the browser. Changing the client project variable to match has no effect.

For extra reference, I've been playing with integrating Blazor components into an existing .Net 7 MVC app and am having similar issues. Components render and work just fine when the MVC environment is "Development", but fail when changing the environment to "Local". The MVC page loads and renders the component, but DevTools shows a 404 trying to load _framework/blazor.webassembly.js. Could the server environment be altering the path where the blazor static files are deployed/loaded from?

TBH I don't know a lot about service busses. I've been having this curiosity if with Blazor WASM if you could have a service bus running on the server and have the client send requests, or is there not generally a built-in way to send a request to a remote service bus, and you would have to wire that part up separately? I'm guessing that this is the case, but wanted to check with someone a little more knowledgeable about it than I am.

Hello all,

I want to add some donut and bar charts to my app and I am using MudBlazor. Now I want to change the size of the donut circle lines or the lines in a line chart but I did not find anything on google or the documentation. Just resizing the chart itself.

Is it possible? If it is possible, how?