Discussion: Currently the Card Component does not support a Form tag. Some of the

Resolved in Commit <a class="commit-link" data-hovercard-type="commit" data-hovercard-

Form tag has been removed in commit <a class="commit-link" data-hovercard-type="commit

Card sometimes needs a form tag about blazor-adminlte HOT 5 CLOSED

sjefvanleeuwen commented on June 8, 2024

Card sometimes needs a form tag

from blazor-adminlte.

Comments (5)

sjefvanleeuwen commented on June 8, 2024 1

Wondering though about the role of < form > in Blazor app. As the discussion progresses, shall I Remove the < form > from the component so you can wrap it the way indicated? That would be the least opinionated way of doing it I think.

from blazor-adminlte.

MarijnPessers commented on June 8, 2024

Hi Johan,
Sjef made the Card, I saw a lot of different uses and refactored it. I am not surprised certain types of implementation have not been added to the Card yet since I have not seen all the uses yet, and they vary slightly a lot of times.
I think that you mean there are sometimes Forms within the card around the body, but often not.

There are a couple of options:
Making a CardBody Component. So the card body tag which is now <Body>@Content</Body> would then look like <Body><CardBody>@Content</CardBody></Body>
If you want to add a form wrapper you can make it <Body><CardForm><CardBody>@Content</CardBody></CardForm></Body> if you wanted to add a form wrapper.

I feel the downside to this is that you make a lot of components and the more complex the less ease of use. But the upside is that is a lot more versatile and correct.

If Form is the only wrapper used then I would suggest using this approach:
You just add all form properties (in Blazor that should be 0? since you don't need a no target or post/get specification). So basically Card gets an extra parameter: [Parameter] public bool HasForm { get; set; }

Then you would have to make this code

<div class="card-body">
    @Body
</div>

into

@if (HasForm) {
    <form>
        <div class="card-body">
            @Body
        </div>
    </form>
}
else {
    <div class="card-body">
        @Body
    </div>
}

I would prefer the last one in this case. Just a simple if statement, clean and visible.

There is a dirty option by using old ASP @: to conditionally generate a tag without it counting as a tag... but using that requires more soap to feel clean than I have in my home at the moment...

from blazor-adminlte.

sjefvanleeuwen commented on June 8, 2024

Resolved in Commit 35011f9 as per Marijn's instructions. Though submits could also be handled by Blazor without form tags. But for backward compatiblity purposes we added it, (i.e. direct submit to another form processor that does not run blazor). Though the latter will need more form tag properties exposed in blazor to do such a call. We will enhance this future when this request arrives.

from blazor-adminlte.

jbennink commented on June 8, 2024

I see but now the form can only exist inside the body. The original AdminLte demo site had some cards with controls in the body and the submit button in the Footer, look at the top left one here (one of my other Pull requests. The form is then wrapped arount both the body and the footer, and I would even include Header so you could punt controls in there as well and wrap the entire contents inside the Card in a form.

As you said there are a lot of different uses so thats why I suggested not wrapping it and leaving it to the user. Perhaps I even want 2 Cards wrapped inside the same Form depending on the layout.

from blazor-adminlte.

sjefvanleeuwen commented on June 8, 2024

Form tag has been removed in commit 9696d8f

from blazor-adminlte.

Card sometimes needs a form tag about blazor-adminlte HOT 5 CLOSED

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent