Blazor Puns

I have the following code below that onmouseover I would like my css animation to stop. This for whatever reason doesn't work and I have looked up solutions everywhere and haven't been able to fix it. Anyone know why it doesn't work?

<div @onmouseover="HandleMouseOver" class="div1 float-right mt-5 shadow pt-2 pl-2 pb-2 pr-2 sticky-top @(AnimationCSS)">
</div>
    @code
    {
        public string AnimationCSS = "anim1";

        void HandleMouseOver() { AnimationCSS = string.Empty; }
    }

I wanted to dabble with Blazor a little bit so I made a sorting algorithm viewer. Thought the animations looked pretty cool, just wanted to share not looking for feedback or anything. Will probably add quick sort and maybe dfs/bfs in the future, as well as a speed slider and # of bars slider.

https://algoview.netlify.app/

Also, not really sure why routing breaks (404) when navigating to urls directly like https://algoview.netlify.app/heap-sort. Maybe it's a netlify thing?

My team and I are creating a new web app. The database, backend, and API are all written. Only thing left is the UI.

We are considering Blazor, but we don’t know what we don’t know. I’d love to hear from someone(s) who has experience with it.

In terms of speed of development, ease of development, performance, etc... how does it compare to options such as Angular, or Vue?

Are you glad you used Blazor? Or do you regret it? Why?

And a more technical/practical question... does Blazor require an API like JavaScript platforms? Or can it go straight to the sever-side/business logic? But... even if it can bypass the API, is having that layer still considered best practice?

Is there anything you know now that you wish you had known about Blazor before you started?

And last... I know you don’t have a crystal ball, but is Blazor here to stay? Or will it go the way of SilverLight?

Thanks!

I have done some preliminary searches to find how to wrap existing JavaScript libraries in Blazor WebAssembly, but I have yet to find an example that would fit this particular library.

I am trying to wrap Konva, a very rich library for working with the HTML5 canvas.

The two blog entries which at least get me started on how I am going to structure the framework start here with wrapping libraries and is followed up with this which is getting closer to where I want to be. Note: I want to target .NET 5.0, so the second blog post is where I'm gravitating.

The examples in the blog post wrap a library called "Popper", which provides a method to create the Popper class. That's fine, but in my case, the Konva library has a 'global' Konva object that is used to create several other objects.

In the Konva overview, one creates a 'stage' object using something like the following:

var stage = new Konva.Stage({
    container: 'container',   // id of container <div>
    width: 500,
    height: 500
});

The full example of the use of the library (creating a stage, creating a layer, adding a circle to the layer, adding the layer to the stage, and drawing the layer can be found here).

My initial thought was to somehow use the IJSObjectReference to return the exported Konva instance; however, I want to wrap all of the objects Konva can create with C# classes that represent both the options passed when creating those objects as well as methods that delegate to the JavaScript class.

In the Blog post, it seems to suggest that they create and export it as a service to the application in the case of the Popper library. However, I would like to avoid having to create services that inject all of the possible objects that Konva can create.

Instead, I would like to have the main 'Konva' object wrapped in C#, then in my C# code, have methods that will create these new objects and return them as a strongly typed C# class that somehow wraps the IJSObjectReference.

I am having difficulty adapting the code that uses a simple library to this more complex example I describe.

Is there a good reference article that describes how this can be done, or better yet, is there a repo of a comparable Blazor Wasm wrapper for an ex

Hello Everyone,

I am fairly new to Blazor framework so please forgive lack of obvious knowledge.

I am looking to develop a cross platform desktop app. The app needs to communicate with a LiteDB or Sqlite database locally. I don't need cloud access.

I understand the part about building the UI in Blazor WASM that can be hosted inside a WebView2. I am trying to figure out the 'back end' service. Any recommendations for accomplishing the backend? I know how to write a Web api that can provide the data, but that would need to be hosted in the cloud.

I would like to stay on the .Net Core (.Net 5 or 6) stack.

Thanks in advance for any advice.

Mike

Here is an article I wrote about various gotchas Blazor developers need to be aware off when starting out. These gave me quite a bit of a headache when I was starting out with Blazor.

https://startblazoring.com/Blog/Gotchas

I am thinking about upgrading my WPF desktop app to a cross-platform app. I love Blazor and hate XAML. I wish XAML had a way to use for each loop if-else code within XAML instead of converters, triggers, data template, etc. But, also, I hate Electron Apps. Especially when I see Skype or Microsoft Team so sluggish and laggy. So, I am confused, should I plan to take a direct MAUI path or a Blazor Desktop path. Blazor Desktop development will be so comforting for me, but after spending all the time and money, I don't want to be surprised by seeing that I just made a sluggish and laggy app same as the Electron Skype app.

So, what do you think? Possibly Blazor Desktop will be more responsive than the electron Skype app? or not?

In Blazor, certain things like injected objects and parameters must use properties, that part is clear.

But what about those page-specific variables, such as data/DTOs and misc strings/booleans etc used to control the page content and flow?

Is it better to use automatic properties with these all the way (public or private?) or private fields?

I'm asking this because in the various examples, tutorials and documentations related to Blazor, use of both properties and fields are all over the place. I cannot seem to find any official best-practice guides or patterns on this.

I've looked at various templating engines and Scala.js frameworks/APIs, Twirl etc., but all of them appear to be either purely client-side or server-side. Does anything like this exist on the JVM?

In some ways it feels like using a template engine, but the end-user experience is much nicer, because data is streamed from the server and everything is written on/for the backend. Almost, like a hybrid between, say, Twirl and Scala.JS/Laminar, except that client-server communication appears to be entirely transparent to the developer.

https://www.youtube.com/watch?v=8DNgdphLvag&t=30s&ab_channel=IAmTimCorey

Looking to connect with local devs in the area as there are currently lack of meetup groups etc. say hi if you’re in the DFW! Uptown Dallas here.

Hi everybody!

We are building some enterprise web apps using Blazor (mostly ERP modules). We are interested in hiring by project. Is there any people here interested? If so, DM me your CV and rates please and we can continue the conversation there.

Thanks!

Blazor WASM doesn't seem to run very quickly currently, certain things such as JSON deserializing, JS interop, seem to run a bit slower than one might want or expect.

I've heard .NET 6 speeds up Blazor WASM significantly, is this the case? Is Blazor's performance something currently being worked on at all?

Hi everyone,

I am the creator of Blazor School - https://blazorschool.com

Blazor tutorial for beginners, developers, students and for everyone interested. Step by step walk through with sample codes for each step and free downloadable example projects to demonstrate the whole walk through. All example codes are updated to .NET 5.

There is also an app on Google Play with no ads and free content. You can check it out at https://play.google.com/store/apps/details?id=com.blazorschool

Blazor School is still in the initial stage and having more and more content coming. I always have a warm welcome for feedbacks at dotnetprotech@gmail.com. Let's make the best Blazor tutorial resource for everyone!

I'm working on a simple website with Blazor WASM, I use VSCode. Recently the intelisense just went bananas and does whatever it pleases.

Sounds kinda random and undirected, but that's how it is. It can't see custom components in the same namespaces and/or folder (definitely not the ones outside), sometimes not even build in Components (EditForm etc.). When I move file from folder to folder it MAY fix stuff, but for several minutes (It finds build in stuff thou).

The most bizzare thing, is that it doesn't even recognizes App in Program.cs. In general the problem is mostly limited to .razor files, I guess some Update to razor, c#, blazor WASM, VSCode. The other option is that I messed sumething up in file structure and/or declaration (see. screenshots)

Has anybody encountered such an Issue? And if my assumption is right, how can I rollback "the" (whenever it is) update.

Hi guys!

I have a synology NAS that doesn't support docker (ds218).

I would like to host a blazor app on it (it doesn't matter if it's webassembly, or blazor server but I think both should be possible if .NET core is truly cross platform).

I could not get it working for the life of me.

Does anyone have some experience in this regard? Did anyone manage to get it running on this particular machine?

For example, the template counter component will be reset if you navigate away and back. Is there anyway to preserve the state of different pages?

I have a standalone (not ASP.NET Core hosted) Blazor wasm app secured by Azure Active Directory (AAD is required and cannot change); all of it is working. I can log into the Blazor app, which makes calls to some random webapi that's secured by Auth0 (machine to machine). In order to make the restful call to the webapi, I need a (bearer) access token from Auth0, which I have the client id, secret, etc. to successfully do so but I don't want to store these sensitive data in the standalone Blazor wasm app.

Is there a way to still do this securely with a standalone setup (I am trying to avoid bundling it with the ASP.NET Core hosted server which all it would be is a delegate/proxy to the webapi)? I believe I can store the sensitive data in AAD custom claims or so which will come down once a user logs in but I'm new to AAD and not sure if that is the correct approach or if there is a cleaner approach out there.

This might be obvious for some, but I struggled for a couple of hours trying to figure out how to get hotReload working in VS2019 Preview. For some reason the Blazor Project templates come with the "hotReloadProfile" setting in launchSettings.json, but not a profile that will actually work with it. You can just run dotnet watch run from a command window, but I just wanted to use F5/Ctrl+F5. Here is the profile you need to add to launchSettings.json:

"HotReloadProfileName": {
"commandName": "Executable",
"executablePath": "dotnet.exe",
"commandLineArgs": "watch run",
"workingDirectory": "$(ProjectDir)"
    },

Hopefully this saves someone a little time and frustration.

Source (https://stackoverflow.com/a/53225064/8436663)

Hi Everyone

Im currently struggling to set up a Blazor Project with Identity for authorisazion and MongoDB as my database. However I cant find any guide or help or anything to set that up. The problem is, I dont have the time to deep dive into Identity to customise all the links and routes that need to be set in order for this to work.
I know it must me possible, but i just couldnt find it yet. Does anybody have some experience with this setup? I have so many questions and desperatly need help xD

Hi,

I am currently developing a blazor application for a radiopharmaceutical company and some of the screens mock-up created by the designer implement swipe behaviour (it is intended to be displayed on a touch screen).

I looked on the web and I did not manage to find a lot of informations about it and I don't know if Microsoft plan to implement it or if there is already a "community" library handling it?

I ended up translating https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android/23230280#23230280 to blazor but I would have liked to know if something else existed to handle the swipe or if something was coming up soon?

Thanks in advance,

Have all a great day !

I am sorry in advance if this isn't the place to ask for coding help, if it isn't just let me know and I will take it down. So for some background I have done a lot of web dev with HTML CSS and JS mainly using JS for making a pre-loader, telling when the page is fully loaded and making buttons intractable on the site.

I have just recently started trying to move a website I made over to Blazor server. Now I feel like adding JS would just be a waste because I have C# that I should be able to use to perform the same tasks at least that's how I see it. As an example I was looking for someone to explain how I would or show me how I would make this situation work, I have a widget that's made using bootstrap and has an X button in the top corner an image will be posted below of the widget. It is sticky to the right side of the screen and scrolls with the user. Using C# I would like to do two things when the user mouses over the widget the pulsing animation no longs plays, meaning even after they remove the mouse from the widget. The last thing is making the button actually animate and close the div tag by sliding it closed.

I assumed this could be done with C# as its bundled right there and ready to go but I just don't know how fully.

Any Help would be great!

img: https://imgur.com/a/Q3uAWdK

Hi r/Blazor! Want to work on the next-gen of business apps that integrate AI and human compute? We have 10 openings at Microsoft Atlanta at all levels. We are looking for devs with a mix of start-up energy and Microsoft smarts for scale. This is a chance to get in on the ground floor of the next set of killer business apps using the latest C# / .Net tech

https://careers.microsoft.com/us/en/job/1065096/Blazor-Full-Stack-Engineer

https://careers.microsoft.com/us/en/job/1065100/Blazor-Full-Stack-Senior-Engineer

Hi guys,

I have been working for the last 3 months on a UI library to use with Tailwind CSS. It's called Windy UI.

Windy UI is strongly inspired in Tailwind UI. There is no publicly available Nuget package yet, but there will be soon. For now, you can look at it here.

The idea that inspired Windy UI was also not the idea of making one UI library that rules them all, but instead an example that can easily be copied and adapted with Tailwind CSS for those that want to give a unique flair to their application and not be forced to use the stock looking "Tailwind" look.

The Nuget package will be available in the future for those that want it as-is and aren't looking to heavily customize that look and feel.

Introducing Windy UI (techgems.net)

I also plan make a series of posts about the making of the library step by step. Please look forward to it!

Anyone found any good libraries or approaches to theming in Blazor? I'm looking to provide options for different colour schemes for my app (http://damselfly.info) - as some people don't like the green. 😁

I'm not a CSS expert, but it seems like I could use Less etc to template my CSS and either generate multiple themed CSS files, or even change them at runtime. I'm wondering about having a controller which returns a CSS file dynamically, after replacing the primary colours with something that the user chooses (e.g., user chooses red, colour.css is rendered with appropriate different shades of red - something like that.

But are there any theming libraries or approaches that people have found work well?

Edit: Thanks to u/ivanjxx who suggested CSS variables. This is exactly what I want - I can define variables for all my colours to extract them out like this, and then just switch the colours.css at runtime if required. Works a treat.

Checkout this week Blazor Weekly Newsletter which includes

☑️ Release Updates
☑️ Tutorial Websites
☑️ Blogs/Articles
☑️ Tutorial Videos
☑️ Podcasts
☑️ Blazor Books - New Arrivals

https://bestofblazor.blog/blazor-weekly-newsletter-18

#blazor #newsletter #webdev #dotnetcore #webdevelopment

I'm working on a freelance project and need to branch out from my usual usage of IIS. I need to serve a blazor wasm site with a simple .net core background connecting to SQL Server. Azure's App service pricing is confusing and seems to indicate that it would cost $70/month for an app on their lowest standard tier. That's before a sql db too. Is this right? Or can I realistically use their dev option for a low traffic site?

I really want to use Azure App Service but their pricing seems very steep...

https://azure.microsoft.com/en-us/pricing/details/app-service/linux/

Sorry, that is not true and also wrong. The framework calls StateHasChanged at the end of eachs EventCallback. Generally, InvokeAsync is used for mashalling updates to the correct thread - for instance if you like to update the Blazor component from another thread in a real-time application - and in the InvokeAsync you can use a StateHasChanged to indicate re-rendering is necessary.

You generally only use StateHasChanged in that case, or in a OnParametersSetAsync/OnInitializedAsync where you need to update the user interface between async calls:

protected override OnParametersSetAsync() {
    await DoStep1();
    this.ProgressText = "Step 1 complete...";
    StateHasChanged();

    await DoStep2();
    this.ProgressText = "Step 2 complete...";
    StateHasChanged();
    
    await DoStep3();
    this.ProgressText = "Done...";
}

In this third post of the Series we'll see how we can handle uploads of large files
Read the full article here: https://www.davidguida.net/blazor-file-upload-azure-blob-storage-part-3/

Hi guys,

I have been working for the last 3 months on a UI library to use with Tailwind CSS. It's called Windy UI.

Windy UI is strongly inspired in Tailwind UI. There is no publicly available Nuget package yet, but there will be soon. For now, you can look at it here.

The idea that inspired Windy UI was also not the idea of making one UI library that rules them all, but instead an example that can easily be copied and adapted with Tailwind CSS for those that want to give a unique flair to their application and not be forced to use the stock looking "Tailwind" look.

The Nuget package will be available in the future for those that want it as-is and aren't looking to heavily customize that look and feel.

Introducing Windy UI (techgems.net)

I also plan make a series of posts about the making of the library step by step. Please look forward to it!