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

我有一个具有以下布局的视图 在此处输入图像描述

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

我遇到的问题是没有执行与此模式的控件相关的脚本或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) 

其中“〜/ 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对于这个对话框可能有什么问题? 到目前为止,该网站中类似问题的指示对我没有用。

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

由于部分视图是通过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 }) 

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

对于点击事件:

 $("#details").on("click","#someButtonId",function(){ // write event code here }) 

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

如果它们被ajax加载,您可能需要为选择器提供更多上下文。

 $(document).on('submit', '#myModal form', function () { ...