ASP.NET MVC 通过按钮渲染部分视图点击不渲染 Bootstrap-select

Question

我在 .Net MVC 和 Jquery/CSS 以及那些东西方面相对较新。

我正在开发一个功能，当我点击一个按钮时，它会显示一个部分视图。我不希望它在页面加载时呈现，只是在我单击按钮时呈现。我已经在执行该操作，我的问题与库 Bootstrap-Select 和应用于部分视图中显示的组件的样式有关。

我正在使用下一个片段执行此操作：

$("#btn-create-new").on("click", function () {
        $('#myTabs a[href="#new-product-form-create-new"]').tab('show');
        //var tab_content_height = $('.modal-new-product-form').height() - $('#myTabs').height();
        //$('.tab-content').height(tab_content_height);

        $("#new-product-form-create-new").load('@Url.Action("PreCreationForm", "Home", new { createAction = "new" })');
});

当我这样做时，我认为 Bootstrap-select 的 JS 没有被执行。但是当我在视图中渲染 PartialView 时：

@Html.Partial("~/Views/Home/PreCreationForm.cshtml")

Select 组件的样式已正确应用。我需要第一种方法，因为我需要在控制器中执行一些操作。

可能是一个非常菜鸟的问题，但我在这方面没有太多经验。

感谢大家抽出时间，安德烈

Answer 1

我不确定我是否理解正确，但问题是因为当您加载局部视图时，bootstrap-select 是在 jquery 文档准备好之后定义的.因此 bootstrap-select 不适用于文档准备就绪后创建的新元素。你必须调用 bootstrap-select 方法来初始化 "plugin" 在 partialview 被渲染后

var variableHere = "new";
var urlAjax = '@Url.Action("PreCreationForm", "Home")';
$.ajax({
    url: urlAjax,
    type: "GET",
    cache: false,
    data: {createAction : variableHere},
    success: function(result){
         $("#new-product-form-create-new").html(result);
         //whatever the init function is called you change it
         $("#yourElement").bootstrap-select();
    }
});

我想这就是你的意思。

ASP.NET MVC 通过按钮渲染部分视图点击不渲染 Bootstrap-select

ASP.NET MVC Render Partial View via Button click not render Bootstrap-select

asp.net-mvc

jquery

asp.net-mvc-partialview

twitter-bootstrap-3

bootstrap-select