Blazorise icon indicating copy to clipboard operation
Blazorise copied to clipboard

Create template similar to .NET 8.0 project structure

Open AlexNek opened this issue 1 year ago • 9 comments

Is your feature request related to a problem? Please describe. I am trying to use standard .NET 8.0 blazor template with identity (server side selection), then I am trying to merge project created with blazorise template. But at the end, all I can see is the top menu without any interaction.

Describe the solution you'd like I need blazorise template to follow .NET 8.0 project structure not the old project structure.

AlexNek avatar Jan 17 '24 22:01 AlexNek

Hello @AlexNek Please refer to https://github.com/Megabit/Blazorise/issues/5166 We only support interactive mode.

David-Moreira avatar Jan 18 '24 09:01 David-Moreira

We must also update the startup docs to mention the new App.razor. Not sure if we still need to bother with .NET6 and .NET7 in the startup guides. @David-Moreira ?

stsrki avatar Jan 18 '24 12:01 stsrki

Yes update documentation is desirable too. Thanks for the tip: @rendermode InteractiveAuto working well. But into AccountLayout.razor HttpContext is always null. /I was looged-in with MS version/. Try to find reason. BlazoriseNet8Server.zip

Will try Blazor Identity with Global RenderMode #51476

AlexNek avatar Jan 18 '24 12:01 AlexNek

Yes, you should use the HttpContextAcessor and the proper DI method, but even that has a few quirks I believe, so be on the lookout for that.

https://learn.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-8.0

Let's use this issue as an action to update the docs with a note for InteractiveAuto. Thanks for the suggestion.

David-Moreira avatar Jan 18 '24 13:01 David-Moreira

.NET6

hmm I'd keep it until they are oficially discontinued from Blazorise multi target? Maybe with the .NET9 release? Remove both .NET 6 / .NET7 and corresponding particular docs?

David-Moreira avatar Jan 18 '24 13:01 David-Moreira

Thanks David, I did it. The last problem - I cannot convert it to blazorise. I can't find any documentation for the Form component. All examples used only Form tag. In any case new template will be very helpful.

<form action="Account/Logout" method="post">
    <AntiforgeryToken />
    <input type="hidden" name="ReturnUrl" value="@currentUrl" />
    <button type="submit" class="nav-link">
        <span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout
    </button>
</form>

AlexNek avatar Jan 18 '24 14:01 AlexNek

Thanks David, I did it. The last problem - I cannot convert it to blazorise. I can't find any documentation for the Form component. All examples used only Form tag. In any case new template will be very helpful.

<form action="Account/Logout" method="post">
    <AntiforgeryToken />
    <input type="hidden" name="ReturnUrl" value="@currentUrl" />
    <button type="submit" class="nav-link">
        <span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout
    </button>
</form>

We do not provide a form component as we run our validations independently of the form. So we have no real features tied to the form, (correct me if wrong @stsrki)

As such I'd just be pragmatic about it, and leave it working just like it is. Maybe just add in the Blazorise TextEdit and Button for the default styling.


As for the template, we did indeed thought about both the cases:

  • Adding identity support to the templates
  • Adding support to the new .NET 8 blazor templates with Blazorise working correctly.

But as you know, there's always so much to work on... hopefully we'll get into it in the near future. 👍

David-Moreira avatar Jan 18 '24 15:01 David-Moreira

We do not provide a form component as we run our validations independently of the form. So we have no real features tied to the form, (correct me if wrong @stsrki)

Indeed. We don't validate on Form. Historically, we had our own validation before the Blazor team did their own thing. But I believe our validation system is much easier so I kept it and then we further improved it.

stsrki avatar Jan 18 '24 15:01 stsrki

We do not provide a form component

Thanks, I found the code for it

namespace Blazorise;

/// <summary>
/// Wrapper for a regular html form element.
/// </summary>
public partial class Form : BaseComponent
{

Blazorise Create Forms (CRUD)

But I believe our validation system is much easier

I need form data for minimal API logout or I need to create my own button handler

AlexNek avatar Jan 18 '24 15:01 AlexNek

Released Blazorise Templates v1.4.1 with support for the new .dotnet 8 WebApp project structure with interactivity set to what Blazorise would expect. image image

David-Moreira avatar Mar 18 '24 15:03 David-Moreira

Thanks, it works in most cases but how can I use "Blazor Web App" with login (as into MS template Auto render mode) then Layout must be into server side. I have tried to move it from the client to the server but the interaction is missing and the sidebar too. When I set RenderModeForPage => InteractiveServer then I have interactivity but sidebar showing on the top and body on the bottom <HeadOutlet @rendermode="@RenderModeForPage" /> <Routes @rendermode="@RenderModeForPage" />

AlexNek avatar Jun 22 '24 18:06 AlexNek

Hello @AlexNek What do you mean most cases? The template provided should work out of the box.

  1. Are you using any template configuration that does not work out of the box? 1.1 If so, can you tell us what template configuration is not working?

  2. Or is it only after you making your own changes that it is not working? 2.1 A reminder that Blazorise is only supported in InteractiveMode. As Blazorise components were designed for interactivity.

We'll need a reproducible of your specific issue. Please go ahead and open a new issue with a repro with the code and steps to reproduce your issue, thanks!

David-Moreira avatar Jun 22 '24 18:06 David-Moreira

The problem in your template it doesn't allow to switch layout page placement. Layout page placed only into client side so I cannot call any server side pages with layout on client side. That what I mean under "most cases" - when all pages on client side.

For reproduce, try to use template "Blazor Web App" with Individual Accounts and Render mode Auto then try to add blazorise to this project that login working. I tried to mix Microsoft generated project with blazorise generated project and all work fine as long as I use pages on client. But I cannot use pages placed in server side as layout placed on client side. Then I try to move layout from client side to the server, then I have described problem.

AlexNek avatar Jun 22 '24 18:06 AlexNek

The problem in your template it doesn't allow to switch layout page placement. Layout page placed only into client side so I cannot call any server side pages with layout on client side. That what I mean under "most cases" - when all pages on client side.

For reproduce, try to use template "Blazor Web App" with Individual Accounts and Render mode Auto then try to add blazorise to this project that login working. I tried to mix Microsoft generated project with blazorise generated project and all work fine as long as I use pages on client. But I cannot use pages placed in server side as layout placed on client side. Then I try to move layout from client side to the server, then I have described problem.

If I remember correctly, the template has been configured to allow Interactive Auto mode, as such the pages are allocated in the client side project in order to be able to be brought in by wasm, otherwise they would not be pulled in. You should still be able to place them in the client project but still render in the Server if that's what you wish. Is this not correct?

The problem with this "new framework" is that you have to adhere to specific rules in order to get stuff rendered properly. If you only need to use Blazor Server, I'd use the old template for Blazor Server as that is most straightforward and simpler. (Our templates still bootstrap Blazor Server if you choose so)

David-Moreira avatar Jun 22 '24 19:06 David-Moreira

I would like to have auto mode as in server mode you cannot open page forever. Here is the sample with all steps ActionManager.zip In addition, some components will require JS script later. And login must be server-side.

AlexNek avatar Jun 22 '24 19:06 AlexNek

With FluentUI all working well ActionManagerMs.zip

AlexNek avatar Jun 23 '24 10:06 AlexNek

Hello @AlexNek Your Blazorise example is quite confusing as it's not clear to me what is your decision on how you want to run your app. You have our app configured as InteractiveServer, but the FluentUI example you sent us, does not use InteractiveServer solely. So we're not fully comparing apples to apples.

What I guess is your main complain, is that the identity login page keeps reloading

So If I understand correctly what you were trying to do. Try the following :

App.razor Modify <Routes /> and remove the @rendermode="InteractiveAuto" if you want to render static pages, like the one's from identity, otherwise the page kept reloading, there must be some incompatible code with Blazor Server in there. The FluentUI example you sent us, also renders the identity page as static not Blazor Server.

Routes.razor Modify the DefaultLayout to DefaultLayout="typeof(Layout.MainLayoutServer)"

This should get the identity working.

For the Layouts.MainLayout you should include @using Blazorise at the top, or in an _Imports file at the root as you are not correctly identifying the components. image image

As a reminder any Blazorise usage is only supported with interactivity enabled, this means that you cannot use the Blazorise Layout and render static pages, like it seems like the identity pages are configured to do so, so you would have to refactor those pages to work properly with Blazorise, but I have to say, making identity pages work properly with Blazor can be challenging at times.

I have to ask again if you need all this complexity and whether you'd be better off with a Blazor Webassembly or Blazor server regular project as that might be less complex? Blazor SSR introduced alot of power, but also seems like it's alot more complexity to setup projects properly. A good grasp of how everything works and the limitations of each mode is important.

Anyway it seems like you might be in the right path? Let us know if this helps.

David-Moreira avatar Jun 25 '24 22:06 David-Moreira

Thanks for your notice. But layout is working only for one mode as before

I have to ask again if you need all this complexity...

Of course, you know some of the drawbacks:

  • WASM have too big initial download, not good speed without AOT, not possible to use crypto algorithms out of the box.

  • Server has SignalR connection. Users cannot leave page open for the long time and server has limit for concurrent SignalR connections

Looks like all is corrected from .NET8 Auto mode. But problem exists in FluentUi project too. You have to wait for WASM to load before you can access the login page. Possible need to wait .NET 9 :(

AlexNek avatar Jun 26 '24 21:06 AlexNek

Alright if those drawbacks are absolutely out of the question for you, it's understandable, thanks for letting us know. Hopefully we can get some work done ourselves sometime soon with Authentication enabled templates to make your life easier.

David-Moreira avatar Jun 27 '24 08:06 David-Moreira