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

时间:2016-02-04 16:23:59

标签: jquery asp.net-mvc twitter-bootstrap-3 asp.net-mvc-partialview bootstrap-select

我在.Net MVC和Jquery / CSS等方面比较新。

我正在开发一个功能,当我点击一个按钮时,它会显示一个部分视图。我不想在页面加载时渲染它,当我点击按钮时jsut。我已经运行的那个动作,我的问题与库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")

正确应用了“选择”组件的样式。我需要第一种方法,因为我需要在控制器中执行一些操作。

可能是一个ver noob问题,但我在这个领域没有太多经验。

感谢大家的时间, 安德烈

1 个答案:

答案 0 :(得分:3)

我不确定我是否理解正确,但问题是因为在加载partialview时,在jquery文档就绪后定义了bootstrap-select。因此bootstrap-select不适用于文档就绪后创建的新元素。在渲染部分视图后,您必须调用bootstrap-select方法初始化“插件”

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();
    }
});

我认为那就是你的意思。