feat(examples): add blazor example #4024
Conversation
EisenbergEffect
requested review from
awentzel,
chrisdholt,
Falkicon,
janechu and
nicholasrice
as code owners
|
@danroth27 Here's the PR that shows the basic Blazor usage with our Fluent UI Web Components. I'm sure a number of things can be improved and expanded in the future, but hopefully this is a good start. Feedback welcome. |
|
Looks good to me, though I admittedly don't know much about Blazor so take my sign-off with a grain of salt. |
| // Use hover for the description of the existing attributes | ||
| // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md | ||
| "version": "0.2.0", | ||
| "configurations": [ |
There was a problem hiding this comment.
You can try using the blazorwasm configuration type here. Should clean up this config file a fair bit.
You can check out the docs at https://docs.microsoft.com/en-us/aspnet/core/blazor/debug?view=aspnetcore-3.1&tabs=visual-studio-code.
Let me know if you have trouble getting this working.
There was a problem hiding this comment.
I updated the configuration and some issues were resolved (and json much improved) but there are a couple of issues I wanted to ask you about. Bear in mind that I'm using VSCode on a Mac:
- The configuration doesn't appear to work at all with "browser" set to "edge". I get all sorts of errors. Has that been tested with this new blazorwasm configuration? Are there additional settings when configuring the browser?
- Whenever I edit a razor file I have to completely stop and restart the app to see any sort of change. That's rather painful for development. Is there some configuration that can be added so that when running in debug mode it watches for changes, rebuilds, and refreshes automatically?
There was a problem hiding this comment.
Whenever I edit a razor file I have to completely stop and restart the app to see any sort of change
If you're not using VS for Windows, the recommended way to run is via dotnet watch run on the command line. That will automatically recompile on each change. It doesn't auto-refresh your browser window but whenever you "reload" the page you'll get the latest build of your app.
There was a problem hiding this comment.
Interestingly, my browser does seem to autorefresh. It's using my system default browser which is Edge, so that's nice too. However, looks like I probably need to handle debugging differently when running that way. Probably need another launch task for attaching to an existing process...
There was a problem hiding this comment.
The configuration doesn't appear to work at all with "browser" set to "edge". I get all sorts of errors. Has that been tested with this new blazorwasm configuration? Are there additional settings when configuring the browser?
Can you share what the errors are? The browser configuration is passed down to the JavaScript debugger on VS Code which launches the browser. The logs will help sort out what where the issue is.
There was a problem hiding this comment.
Looks like you have to run it one way for auto-refresh and another way for debugging. Does that sound right?
There was a problem hiding this comment.
Correct -- it's not ideal but it's something we'll be making better in .NET 6.
examples/blazor/Pages/Index.razor
Outdated
| <h4 class="mb-3">Contact</h4> | ||
| <form> | ||
| <div class="row"> | ||
| <fluent-text-field @bind-value="FirstName" @bind-value:event="onchange">First Name</fluent-text-field> |
There was a problem hiding this comment.
The syntax here looks more verbose than I'd have expected.
- Does
@bind-value:event="onchange"make any difference? I'd expect that to be the default anyway. - Can
@bind-value="FirstName"be reduced to@bind="FirstName"? I'd expect that to be the same.
There was a problem hiding this comment.
Actually, it doesn't work with a straight up @bind. I think we explored this before and we might need to add some additional configuration to tell Blazor how to apply bind on custom elements. I could look into that as a follow up PR.
|
I posted a few suggestions, but besides that, this looks very cool! |
Description
This is a Blazor example showing basic use of our Fluent Web Components from CDN along with various forms of Blazor bindings, both one way and two way.
The example is based off of what I put together for the ASP.NET Standup a little while back.