.net-corerazorasp.net-mvc-partialview

How to load Partial View inside Button Popover?


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:

enter image description here


Solution

  • 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).