Render css/js inside a second Partialview

Question

Using C# MVC5 I have the file "_Layout.cshtml" which loads the standard scripts and css. Each page on my site (Partialviews) then has sections (Script.Render and Style.Render) to load some separate css and scrips... So far everything works perfectly.

In one of the pages that is already a Partialview has a button that when clicking loads another Partialview (inside the first) by means of a script in jquery, this second Partialview is a table that brings some data.

Example: by clicking the 1 button it brings a list of customers, by clicking the 2 button it clears the customer list and brings a list of users, both lists are Partialviews.

My dilemma is, when loading the second Partialview I can’t render/load the CSS/JS in the table, it loads without CSS/JS...

View:

<div class="row">
    <div class="col-lg-12">
        <div class="ibox-content">
            <p>
                Profissionais que serão atribuídos ao Usuário:
                <span class="field-validation-error text-danger" data-valmsg-for="Empresas" data-valmsg-replace="true"><br>@ViewBag.ErroCliente</span>
            </p>
            <div id="dvResultado1">
                @{Html.RenderPartial("_TagTabela1", Model); }
            </div>
        </div>
    </div>
</div>

//Carrega CSS da pagina
@section Styles {
    @Styles.Render("~/Content/plugins/chosen/chosenStyles")
    @Styles.Render("~/Content/plugins/dataTables/dataTablesStyles")
    @Styles.Render("~/Content/plugins/iCheck/iCheckStyles")
}

//Carrega Scripts da pagina
@section Scripts {
    @Scripts.Render("~/plugins/chosen")
    @Scripts.Render("~/plugins/dataTables")
    @Scripts.Render("~/plugins/iCheck")
}

Jquery that loads the Partialview "_Tagtabela1"

$(document).ready(function () {
    $("#NovaTag").change(function () {
        var select = $("#NovaTag option:selected").val();
        $('#dvResultado1').load('@(Url.Action("GetTags1","Clientes",null, Request.Url.Scheme))/' + select);
    })
});

By all indications, when loading the Partialview "_Tagtabela" I cannot reload the CSS/JS again, causing partial to return only the data.

I tried to put the scripts and Cs in Partialview, it didn’t work. I also tried to put CSS and JS in the main view (_Layout) and tmb did not work...

My idea is to just load the second partialview and it load together with it the css/js specific to it since this table has not only a specific ccs as tmb a script to search in the table, pagination etc... When entering the page the first time works normal, loads everything right, only when I click on the button to bring to Partialview that it "loses" the css and "Uga" everything.

Any ideas? Help?

Thank you in advance!

Answer 1

Solved:

$(document).ready(function () {
            bind();
        });

        $(document).ajaxComplete(function (event, xhr, settings) {
            bind();
        }); 

        function bind() {
            $('.chosen-select').chosen({ width: "100%" });

            $('.dataTables-Ger').DataTable({
                pageLength: 25,
                retrieve: true,
                responsive: true,
                dom: '<"html5buttons"B>lTfgitp',
                buttons: []
            });

            $('.dataTables-Tag').DataTable({
                pageLength: 25,
                retrieve: true,
                responsive: true,
                dom: '<"html5buttons"B>lTfgitp',
                buttons: []
            });

            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        }

Whenever you reload Partialview it runs the "bind" that reloads js.