locked
Blazor - Collapse Sidebar RRS feed

  • Question

  • User135423268 posted

    Good Day Everyone

    I'm trying to create my first Blazor project, I came from using ASP.NET MVC and every animations are made in javascript, I want to create a collapsed sidebar, I saw a sample on w3schools here's the link:

    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapse_sidebar

    I have no problem doing this on my MVC sites, but I'm having a hard time to convert it to C#, if I apply this on the _Host.chtml, I'm getting trouble on the navmenu as the .razor page is not allowed to put a javascript on it.  does anyone have done this or knowledge on this? and if ever can you keep it simple? I'm still between to a beginner to mid experience programmer, I want to use blazor because I'm having trouble understanding REACT JS.

    Thanks everyone and regards

    amendoza29

    Thursday, August 6, 2020 12:17 AM

Answers

All replies

  • User1535942433 posted

    Hi amendoza29,

    Accroding to your description,as far as I think,you could call javascription to implement your reqiurment.You need to download jsruntime and write the javascript into wwwroot / index.html.

    More details,you could refer to below articles:

    https://www.freecodecamp.org/news/how-to-implement-javascript-interop-in-blazor-9f91d263ec51/

    https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-3.1

    Another,if you don't care of money,you could use Blazor Components.

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 6, 2020 6:48 AM
  • User-474980206 posted

    The blazor component tree is similar the react tree. The component render just returns the html to a virtual dom from which the real dom is updated. Unlike a react component, blazor components can not access the dom directly, they must use JavaScript interop. This because blazor is running on the server or WSAM, and can not access the real dom, the blazor JavaScript framework does this.

    Because blazor cannot have a reference to a true dom node, you will need to be sure each node has a unique Id that you want to access via JavaScript, blazor similar to react has lifecycle events you can use to call the interop routines.

    you will do best to use css animations as much as possible.

    Thursday, August 6, 2020 3:05 PM