MVC 4 WebGrid和Jquery产生两个错误.JQuery是未定义的，并且在ajax模型更改后会出现排序错误

在我的div元素我更新的是一个网页部分与webgrid，当我指定ajaxUpdateContainerId:在webgrid构造器我得到的错误:

JavaScript运行时错误:'jQuery' is undefined

下面是错误引用生成的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。什么好主意吗?

问题是JavaScript解释器运行由引用jQuery的WebGrid生成的脚本。但jQuery没有加载在那个时候，所以你看到的"jQuery"是未定义的消息。按照Sheep的建议在头文件(@Scripts.Render)中加载jQuery脚本应该可以解决这个问题。

然而，我想知道这是否真的是微软的意图，因为他们默认情况下在页面底部加载jQuery。这通常是有意义的，以避免延迟页面显示。

这个问题解决了吗?我在IE中遇到了同样的问题，我能够解决它。我不得不移动我所有的脚本/css定义(我的在_Layout.cshtml)到bundle (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>

我使用MVC 4 VS2012有同样的问题，我的问题是我必须移动@Scripts。渲染指令到_Layout.cshtml的顶部。修复了

有没有可能@Scripts。渲染指令放置jQuery javascript文件后的jqGrid文件?如果你在浏览器中点击"查看源代码"，可以看到javascript文件在页面中包含的顺序。

jQuery代码库必须总是放在jqGrid库之前，如果不是这样的话，这是典型的错误消息。

相关内容

最新更新

热门标签：