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:
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 offalse
): 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).