在 asp.net mvc 4 中使用带有部分视图的 jQuery

Posted 2023-05-09

【中文标题】在 asp.net mvc 4 中使用带有部分视图的 jQuery

【英文标题】：Using jQuery with partial views in asp.net mvc 4

【发布时间】：2014-08-24 18:04:36

【问题描述】：

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

父 View 由几个 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 这个对话框可能有什么问题？到目前为止，网站中类似问题的指示对我没有用。

如果代码或插图无法理解，我会尽可能清楚地表达我的耳朵。谢谢

【问题讨论】：

调试 javascript 时会发生什么？例如$('#myModal form') 是否返回任何项目？

@DavidTansey，我只是试图将脚本移动到部分，但我在萤火虫控制台中收到错误“$ is undefined”

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

感谢@KyleGobel，让我问一下。不应该在 ParentView 中已经可以使用 jquery 吗？那里的所有脚本都可以正常工作。

@AlexeiLevenkov，我编辑了问题，请查看

【参考方案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()的更多详细信息，您可以查看HERE

【讨论】：

Ehsan，成功了！，这是向前迈出的一步，请问事件怎么样，我还有其他事情要做吗？

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

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

事件可以写在主视图但你必须写委托事件

是的，但您必须小心委托事件。它们应该谨慎使用，并且您绑定到的元素在 DOM 中应该尽可能靠近生成事件的元素：例如，#myModel 很好，document 很糟糕。

【参考方案2】：

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

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

【讨论】：

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

选择器'#myModal form' 将不包含稍后添加的#myModal 内的任何form 元素。

+1。我明白你现在的意思了......确实你的代码是有道理的，不应该阅读你添加的文本 - 抱歉。 （显然，“提供更多上下文”是指“为on 调用添加过滤器，因为以后可能会插入表单”）。

@AlexeiLevenkov 别担心，你只是想帮忙。

@Elio.Batista 我会尝试在页面构建中正常使用剃刀将其中一个部分加载到页面中，看看它是否有效。如果是这样，您将不得不查看通过 ajax 加载的内容有何不同。