使用jQuery与asp.net的MVC 4

局部视图我有以下布局 enter image description here 使用jQuery与asp.net的MVC 4

父视图是由几个PartialViews如图片ilustrated的视图。其中一个列表中的每个项目都有一个对应的编辑按钮，可以将该项目加载到另一个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的这个对话框的问题？到目前为止，网站中类似问题的指示对我来说还没有奏效。

我试图尽可能清楚地表达，如果有什么不明白的代码或插图我都耳朵。谢谢

来源

2014-07-03 E-Bat

会发生什么事，当你调试JavaScript？例如'$（'＃myModal form'）'是否返回任何项目？ –

@DavidTansey，我只是试图脚本移动到局部，但我得到的错误“$未定义”在Firebug控制台 –

@AlexeiLevenkov，该事件永远不会被执行:( –

由于局部视图通过AJAX加载您需要的HTML是网页呈现后，初始化日期选择器，所以你需要把成功的回调函数日期选择器初始化脚本：

$.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()更多detials你可以看到HERE

来源

2014-07-03 14:57:24

Ehsan，那工作！，这是一个进步，请问事情怎么样，还有什么我不得不做的？ –

@ Elio.Batista：任何需要在部分视图（事件处理程序等）中进行初始化的东西都必须在回调中进行。否则，您尝试绑定的实际元素还不存在。 –

@ChrisPratt，你的评论补充了这个答案。 –

如果他们被ajax加载，你可能需要给你的选择器提供更多的上下文。

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

来源

2014-07-03 14:48:11 Jack

您建议的示例与OP版本相同...不确定您的建议是什么... Plus ID选择器已经非常具体，因为ID在有效的HTML中是唯一的（对于无效的HTML，不应该有任何对脚本/浏览器）。 –

选择器''#myModal窗体''在'＃myModal'内不会包含任何'form'元素，稍后添加。 – Jack

+1。我明白你的意思了......确实你的代码有意义，不应该读取你添加的文本 - 对不起。（很明显，“给予更多的上下文”意味着“为'on call添加过滤器”，因为表单可能稍后会插入）。 –

使用jQuery与asp.net的MVC 4

回答

相关问题