styles and scripts not working in partial view

问题

I have a partial view (asp.net-mvc) that contains a few dropdownlist's with the class ''chosen-select'. But somehow that class doesn't get applied. The dropdownlist's are displayed/styled as 'normal'.

@using (var f = Html.Bootstrap().Begin(new Form("Home", "Index").FormMethod(FormMethod.Post).Type(FormType.Horizontal).InputWidthMd(12)))
{
    @f.FormGroup().DropDownListFor(model => model.Currency, Model.Currencies).Class("chosen-select")

    @f.FormGroup().ListBoxFor(model => model.CountryIds, Model.Countries).ShowValidationMessage(false).HtmlAttributes(new { @class = "chosen-select" })

    @f.FormGroup().ListBoxFor(model => model.USStateIds, Model.USStates).Id("usStates").ShowValidationMessage(false).HtmlAttributes(new { @class = "chosen-select" })

    @Html.Bootstrap().SubmitButton().Text(Resources.Form.Save).Class("btn btn-primary").HtmlAttributes(new { @style = "float:right;" })
}

This partial view is displayed in a dialog.

$(document).ready(function () {
        $('.chosen-select').chosen();
});

Not sure if it's relevant, but the jquery code and the styles are placed in the view that renders this partial view. It was on the same page as the partial view at first, but the jquery code and the css styles doesn't seem to do anything. That's why I relocated them (not sure if that's relevant either).

I'm rendering this partial view by the way, via an AJAX call.

回答1:

Perhaps the problem is that you are executing your jQuery on document ready and then rendering the partial view view AJAX afterwords, so the jQuery is never applied. Try doing this to initialize chosen:

$( document ).ajaxComplete(function() {
    $('.chosen-select').chosen();
});

来源：https://stackoverflow.com/questions/26127447/styles-and-scripts-not-working-in-partial-view