How to load Partial View inside Button Popover?

Question

I am trying to display a partial view inside a button popover.

cshtml:

<button type="button" class="btn btn-secondary" data-container="body"
    data-toggle="popover" data-placement="bottom" id="popoverBtn"
    data-content="@(await Html.PartialAsync("_ListBoxPartial"))">
Popover on bottom

Partial View:

<div class="row">
    <div class="col-12">
        <select name="test" style="width:100%;" id="selectMultiple" class="form-control custom-select" multiple>
            <option>123</option>
            <option>456</option>
            <option>789</option>
        </select>
    </div>
</div>

But it displays like this:

SpruceMoose · Accepted Answer · 2022-07-05 15:14:13Z

1

Instead of using RenderPartialAsync, use PartialAsync

<button type="button" class="btn btn-secondary" data-container="body" 
    data-toggle="popover" data-placement="bottom" id="popoverBtn" 
    data-content="@(await Html.PartialAsync("_ListBoxPartial"))">
    Popover on bottom
</button>

If you are initializing your popover via javascript, the v4 documentation of bootrap states:

html (boolean property with a default of false): Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.

I haven't tried it but there might also be a data attribute equivalent of data-html="true" if you are not using js to initialize the popover (it would seem odd if there is though).

edited Jul 5, 2022 at 15:14

answered Jul 5, 2022 at 9:18

SpruceMoose

10.4k4 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

TerribleDog Over a year ago

Tried this, this is the output imgur.com/a/w85B2t8

SpruceMoose Over a year ago

@TerribleDog: Can you repost your updated code please?

TerribleDog Over a year ago

updated it. Please see the question

SpruceMoose Over a year ago

I don't see any reason it shouldn't work. Provided you are using @( instead of @{ and you have a closing tag for your <\button>

SpruceMoose Over a year ago

Just added a comment about the html option for popovers.

|

Collectives™ on Stack Overflow

How to load Partial View inside Button Popover?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related