jquery - MVC 4 WebGrid 和 Jquery 会产生两个错误。 JQuery 未定义，ajax 模型更改后出现排序错误

Question

在我的 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 错误消息，正在寻找我的 Controller 操作。为什么它会在排序时寻找我的 Controller 操作？

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

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

Answer 1

问题在于 JavaScript 解释器运行由引用 jQuery 的 WebGrid 生成的脚本。但当时 jQuery 尚未加载，因此您会看到“jQuery”未定义消息。按照 Sheep 的建议，在 header (@Scripts.Render) 中加载 jQuery 脚本应该可以解决问题。

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