Closed angelotrivelli closed 3 years ago
Hello @angelotrivelli ...
Generally, avoid the use of JS in favor of Blazor/C# when working with the DOM. Keep in mind when using JS directly with the DOM that Blazor's diff engine is also interacting with the DOM at the same time. If you mutate an element that Blazor is also interacting with, it can have unpredictable consequences for the behavior of the app ... even to the point of creating š security risks š.
Having said that, JS interaction with the DOM isn't ruled out in cases where there's no potential conflict between what a JS lib does and Blazor's work with the DOM. Consider the example in ...
... Blazor doesn't work with the <div>
for the map. There's no conflict between the Mapbox/JS interop and Blazor's diff engine, so that's a supported scenario.
WRT your second question: Yes, you can work with Blazor/C# and your own styles. In fact, some devs are very annoyed by various Bootstrap conventions and refuse to use it. I would expect that group of devs to absolutely yank it in favor of some other styles by using a 3rd party framework or their own bits.
btw WRT ...
That doc is really complex
I agree, and I'm working on that doc at this very instant (the PR will be up on Friday or early next week) as part of https://github.com/dotnet/AspNetCore.Docs/issues/19286. I'm performing set of UE passes ("user experience" passes ... i.e., total overhauls) on most of the Blazor topics. They were nice topics when there were fewer features and less content. Over the last few years, most of the Blazor topics became rather messy ... hacked to death with new bits and updates. The first of the two JS interop topics, the one that deals with calling JS from .NET, will be updated by the end of next week. The other JS interop topic, calling .NET from JS, will receive updates a week or so after that. Check back in a couple of weeks for better docs :+1:.
I've also added a note to that UE pass tracking issue about your ask. I think we need a little more guidance on this scenario with Bootstrap given, as you say, that Blazor uses Bootstrap styling. It's a good question that we don't directly address. I'll take a look at where and how to cover it when I get to that entry on the UE tracking issue. I'll work with the PU ("product unit") on it to make sure that we have the best coverage. Thanks for asking about this.
I'd be remiss here, too, if I didn't mention the community support channels that we recommend. If you need to chat with other devs about this ... or anything really, try the following. I know ur probably aware of at least one or two of these, but just in case ...
Thank you very much for the thorough answer, I appreciate it!
Just need some guidance here about working with the "javascript parts" of bootstrap.
I've been studying the bootstrap 4.3.1 docs so that I can figure out layout and styling for a blazor webassembly application idea. The bootstrap docs recommend using their "Starter Template" which includes not only bootstrap.css, but also jquery.js, popper.js, and bootstrap.js. I've been able to make some progress in the layout/styling I want to have by burying my face in the bootstrap docs and trying stuff out on vs-code LiveServer. It works.
More recently, I've tried to start on the actual Blazor wasm pages. Right off the bat, I notice that the default project does not include bootstrap.js/jquery/popper. It just includes bootstrap.css and of course the blazor.webassembly.js. The top of the page just has the usual hamburger button (navbar-toggler-icon) which displays/hides nav-items when the window is narrow enough. Since there's no bootstrap.js the collapsing toggle needs to be implemented in a c#
@Code
block. Like this (it's literally just theNavMenu.razor
file for the default Blazor Webassemby project)...That's nice and it works, but I would prefer to use bootstrap javascript functionality for something that low-level.
So, I modified the
index.html
to include jquery, popper, boostrap.js just like in the bootstrap starter template. Like this...I then modified the
NavMenu.razor
file, getting rid of the@Code
block and tried using only the bootstrap stuff (egdata-toggle
anddata-target
) for collapse functionality. Like this...When I do that, the nav-items dissapear and hamburger appears when the window is narrow-enough (as expected). But the hamburger button does not toggle visibility of the nav items! Not sure if I just messed it up or if there's something else going on.
Questions
Assuming I didn't just botch something dumb in the previous code block, at this point I just need a little guidance.
Is it OK to use the javascript parts of bootstrap? I understand that there's something called "JS interop", does that apply to the above situation? That doc is really complex, but it seems that since I am not trying to call javascript functions from inside a
@Code
block, I don't need to use JS interop, right?Do I even need to use Bootstrap with Blazor Webassembly? I've seen CSS grid produces some really nice cogent layouts. Would I be setting myself up for disaster if I just yanked out bootstrap and just used CSS grid for layout and basic "homemade" css for the rest of the styling?
Document Details
ā Do not edit this section. It is required for docs.microsoft.com ā GitHub issue linking.