Partialview not clicking on the default of Select2

Question

I’m having a problem when I call my Partialview, it loads all the data in the View but not in the right format (layout) of Select2, in case when clicking the input appears the data, is currently loading all on the screen.

Ex of a View I use and load Select2.

I think it’s something css, but I’m referencing both of select2 but it’s still not working.

<link rel="stylesheet" href="~/Content/separate/vendor/select2.min.css">

<link rel="stylesheet" href="~/Content/separate/vendor/blockui.min.css">
<script type="text/javascript" src="~/Scripts/lib/blockUI/jquery.blockUI.js"></script>

 <div class="col-lg-1">
            <div class="input-group">
                <label>Contrato:</label>
                @Html.DropDownList("contrato", null, htmlAttributes: new { @class = "select2", @multiple = "multiple" })
            </div>
        </div>

<script src="~/Scripts/lib/select2/select2.full.min.js"></script>

The call of Partial:

function addCliente() {
    var data = $("Form").serializeArray();
    $.post("/EmailMarketing/AddCliente", data, function (ret) {
        $("#addClienteBody").html(ret);
    });
    $('#modalAddCliente').modal('show');
}

Answer 1

As documented by Select2, it is necessary to start the component in its PartialView add the following code

$(document).ready(function() {
    $('.select2').select2();
});

I’m not sure if it will work because of the method as you’re calling your partial, below follows a second solution:

function addCliente() {
    var data = $("Form").serializeArray();
    $("#addClienteBody").load("/EmailMarketing/AddCliente", data, function () {
        $('.select2').select2();
    })
}

This way, after he did the load of his partial it will load the boot method from select2

Obs: in this second case it is not necessary to have the boot method in the partial