3

在我正在更新的 div 元素内部是一个带有 webgrid 的页面部分，当我在 webgrid 构造函数中指定 ajaxUpdateContainerId: 时出现错误：

JavaScript 运行时错误：“jQuery”未定义

这是生成的 javascript 错误引用：

<script type="text/javascript">
        (function($) {
            $.fn.swhgLoad = function(url, containerId, callback) {
                url = url + (url.indexOf('?') == -1 ? '?' : '&') + '__swhg=' + new Date().getTime();

                $('<div/>').load(url + ' ' + containerId, function(data, status, xhr) {
                    $(containerId).replaceWith($(this).html());
                    if (typeof(callback) === 'function') {
                        callback.apply(this, arguments);
                    }
                });
                return this;
            }

            $(function() {
                $('table[data-swhgajax="true"],span[data-swhgajax="true"]').each(function() {
                    var self = $(this);
                    var containerId = '#' + self.data('swhgcontainer');
                    var callback = getFunction(self.data('swhgcallback'));

                    $(containerId).parent().delegate(containerId + ' a[data-swhglnk="true"]', 'click', function() {
                        $(containerId).swhgLoad($(this).attr('href'), containerId, callback);
                        return false;
                    });
                })
            });

            function getFunction(code, argNames) {
                argNames = argNames || [];
                var fn = window, parts = (code || "").split(".");
                while (fn && parts.length) {
                    fn = fn[parts.shift()];
                }
                if (typeof (fn) === "function") {
                    return fn;
                }
                argNames.push(code);
                return Function.constructor.apply(null, argNames);
            }
        })(jQuery);

这是我的主页：

@model IEnumerable<PamperWeb.Models.Lab>

@{
    ViewBag.Title = "Index";
}

@Html.Partial("_SubMenu")

<h2>Index</h2>

<p>
    @Html.ActionLink("Add Lab", "Create", "Lab", new { patientId = ViewBag.PatientId }, null)
</p>
<div id="labs">
@Html.Partial("_Completed", Model)
</div> @section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/sitespec")

}

和部分：

@model IEnumerable<PamperWeb.Models.Lab>

@{
    var grid = new WebGrid(Model, ajaxUpdateContainerId: "labs", defaultSort: "Name");
}

@grid.GetHtml(columns: grid.Columns(
grid.Column("Name"),
grid.Column("Given", header: "Date"),
grid.Column("TimeGiven", header: "Time"),
grid.Column("Value"),
grid.Column("Phase"),
grid.Column("PatientId"),
grid.Column("", format: @<text>@Ajax.ActionLink("Disable", "Disable", new { labid = item.Id, patientid = ViewBag.PatientId }, new AjaxOptions { HttpMethod="POST", UpdateTargetId = "labs"})</text>)
)
)

如果我从 webgrid 构造函数中删除 ajaxUpdateContainerId，错误就会消失。但是当我点击排序时，我得到一个 404 来寻找我的控制器操作。为什么它会在排序时寻找我的控制器操作？

第二个问题是如果我使用 ajax 修改部分，在禁用时，排序停止工作。如果我替换为 html.actionlink 排序继续工作。

我有 jquery 1.9.1。有任何想法吗？

4

3 回答 3

4

问题是 JavaScript 解释器运行由WebGridwhich 引用生成的脚本jQuery。但jQuery当时没有加载，所以你看到“jQuery”是未定义的消息。@Scripts.Render按照 Sheep 的建议在标题 ( ) 中加载 jQuery 脚本应该可以解决问题。

但是，我想知道这是否真的是微软想要的，因为他们默认在页面底部加载 jQuery。这通常可以避免延迟页面显示。

于 2013-12-11T11:51:24.493 回答
1

我在使用 MVC 4 VS2012 时遇到了同样的问题，我的问题是我必须将我的 @Scripts.Render 指令移动到我的 _Layout.cshtml 的顶部。这解决了问题

@Scripts.Render 指令是否有可能将 jQuery javascript 文件放在 jqGrid 文件之后？如果您在浏览器中单击“查看源代码”并查看页面中包含 javascript 文件的顺序，则可以看到这一点。

jQuery 代码库必须始终放在 jqGrid 库之前，这是您在不是这种情况时收到的典型错误消息。

于 2015-01-26T17:28:44.553 回答
1

你解决了吗？我在IE中遇到了同样的问题，我能够修复它。我必须将所有定义的脚本/css（我的在_Layout.cshtml中）移动到包（BundleConfig.cs）中，这似乎解决了问题。

   <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />            
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
    </head>
于 2013-04-25T20:20:04.720 回答