在asp.net mvc 4中使用jQuery和部分视图

Question

我有一个具有以下布局的视图

父视图由图中所示的几个PartialView组成.其中一个是列表,其中每个项目都有一个相应的编辑按钮,该按钮将项目加载到另一个PartialView中,但是这是通过ajax加载到模态对话框引导程序中.这部分工作正常.

我遇到的问题是没有与该模态的控件相关的脚本或jquery事件被执行.例如,从不显示datepicker小部件,无法捕获下拉列表的更改事件,或捕获表单的提交事件或"提交"按钮的单击事件.所有脚本都放在主视图中.例如,这是模态提交的事件处理程序:

$(function () {
            $('#myModal form').on('submit', function () {
                console.log("okk");
                clearErrors();
                $.post($(this).attr('action'), $(this).serialize(), function (data, status) {
                    $('#myModal').modal('hide');
                    $("#details").html(data);

                }).error(function (error, status, a, b) {                    
                    $('.modal-body p.body').html(error.responseText);
                });
                return false;
            });
        });

在我的_Layout.cshtm中,我已经包含了必要的脚本(我认为):

@Scripts.Render("~/js")
        @Scripts.Render("~/bundles/globalization")        
        @RenderSection("scripts", required: false)
    </div>
</body>

其中"〜/ js"是:

bundles.Add(new ScriptBundle("~/js").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery-migrate-{version}.js",
                "~/Scripts/bootstrap.js",
                "~/Scripts/bootstrap-datepicker.js",
                "~/Scripts/jquery.validate.js",
                "~/scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js",
                "~/Scripts/locales/bootstrap-datepicker.es.js"
                ));

我的脚本和jQuery对于这个对话框可能有什么问题？到目前为止,网站上类似问题的指示对我没有用.

我试图尽可能清楚地表达如果某些东西不被理解的代码或插图我都是耳朵.谢谢

Answer 1

由于部分视图是通过ajax加载的,因此您需要在页面上呈现html之后初始化datepicker,因此您需要将datepicker初始化脚本放入成功函数回调中:

$.post($(this).attr('action'), $(this).serialize(), function (data, status) {
                    $('#myModal').modal('hide');
                    $("#details").html(data);
                    $("#textBoxID").datepicker(); //  initialize datepicker for partial view element here

                })

对于事件,您可以编写委托事件以使它们工作,选择部分视图中最接近的元素,我使用部分容器,其中您要附加部分视图html:

对于点击事件:

$("#details").on("click","#someButtonId",function(){

// write event code here

})

对于on()的更多详情,你可以在这里看到