ASP.NET MVC 3.0 WebGrid - 启用 Ajax答案

【问题标题】：ASP.NET MVC 3.0 WebGrid - Ajax EnabledASP.NET MVC 3.0 WebGrid - 启用 Ajax
【发布时间】：2012-01-25 06:51:51
【问题描述】：

我遇到了以下问题：“需要 JQuery 脚本引用才能在“WebGrid”帮助程序中启用 Ajax 支持”

我想让我的 WebGrid AJAX 启用。我得到了部分视图的代码

@ModelType WebGrid

@Model.GetHtml(tableStyle:="webgrid", headerStyle:="webgrid-header", footerStyle:="webgrid-footer", alternatingRowStyle:="webgrid-alternating-row", selectedRowStyle:="webgrid-selected-row", rowStyle:="webgrid-row-style",
                       columns:=Model.Columns(Model.Column(
                                             columnName:=GemeentePostColumnsEnum.NISCode.ToString()),
                                Model.Column(columnName:=GemeentePostColumnsEnum.GemeenteNaam.ToString()),
                                Model.Column(columnName:=GemeentePostColumnsEnum.DistrictNaam.ToString()),
                                Model.Column(columnName:=GemeentePostColumnsEnum.PostCode.ToString()),
                                Model.Column(columnName:=GemeentePostColumnsEnum.PostNaam.ToString()),
                                Model.Column(
                                    format:=@@<text>@Ajax.ActionLink("Edit", "AddEdit", New With {.NISCode = item.NISCode}, New AjaxOptions With {.UpdateTargetId = "formGemeentePost", .InsertionMode = InsertionMode.Replace, .HttpMethod = "GET", .OnFailure = "failure"})</text>)))

控制器的代码如下：

Function SearchForm(searchModel As GemeentePostWebService.GemeentePostCriteria) As PartialViewResult
            searchModel.Taalcode = "nl"


           'Code to fill up Model

                ViewBag.WebGrid = CreateGrid(viewModelList)
                Return PartialView("Partial/_Grid", ViewBag.WebGrid)
            End If
        End Function

        Private Function CreateGrid(source As List(Of GemeentePostModel)) As WebGrid
            Return New WebGrid(source:=source, rowsPerPage:=10, ajaxUpdateContainerId:="grid", defaultSort:=GemeentePostColumnsEnum.GemeenteNaam)
        End Function

当我输入一些搜索值并提交表单时，我收到以下错误：

“需要 JQuery 脚本引用才能在“WebGrid”帮助程序中启用 Ajax 支持”

结果：我得到了正确的过滤值，但我的 div (updatetargetid) 没有填满。

我已经添加了 jQuery 和不显眼的脚本并将它们包含在我的标题中：

<!DOCTYPE html>
<html>
<head>
    <title>X</title>
    <link href="/X/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/X/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script src="/X/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/X/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
    <script src="/X/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
</head>

【问题讨论】：

您是否使用 firebug 或开发人员工具调试了客户端 javascript，可能正在寻找不同的 jquery 库等。
我在 IE 中使用开发人员工具进行了调试，这就是我得到“需要 JQuery 脚本引用才能在“WebGrid”帮助程序中启用 Ajax 支持”错误的方式。当我跳过它时，我得到了我想要插入到没有布局的 div 的页面。我没有看到对特定版本的引用。此警报在我收到的源代码中定义：“
看看我的回答，如果你不明白，请尽可能发布客户端代码。

标签： jquery ajax asp.net-mvc-3 webgrid

【解决方案1】：

您在哪里添加了对 jquery 的引用，因为如果它在 if (typeof(jQuery)=='undefined') 上中断，那么肯定不会在页面的该部分找到 jquery。

您是否查看了源客户端以确保 jquery 引用存在，并且在引用 jquery 库后使用/引用了 webgrid 脚本/javascript。

【讨论】：

我的引用包含在 HTML 的头部（问题已用代码更新）
我想不出别的了，除非你能提供输出的源代码。

【解决方案2】：

应该

Return New WebGrid(source:=source,.....

阅读

Return New WebGrid(source: source,.....

即删除“=”？（抱歉很久没用VB了）

另外，你在url地址中看到部分视图的控制器动作名称和参数了吗？这可能与您将表单发布回服务器的方式有关，在尝试使用 javascript 以编程方式发布表单数据而不是用户按下提交按钮时，我遇到了同样的错误。我需要我的网格来相应地填充页面刷新、菜单选择和下拉选择事件，并且很难让它工作。当我收到错误时，我收到的是我的部分页面已填写完整的 webgrid，但页面的其余部分都没有。

虽然我从未解决过这个问题，但我确实设法解决了这个问题。我的解决方案涉及到这个：

编辑视图到这个

@model MyProject.Models.GridResultsModel
 ...

<div id="updatetarget">
    @Html.Partial("_GridResults", Model)
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#updatetarget').load("_GridResults")        
    });
</script>

我的灵感来自这篇文章： Multiple Checkbox selection using Webgrid in MVC 3 (select All/Deselect All), Sorting and Paging

希望对你有帮助

【讨论】：

【解决方案3】：

您可能面临的一个问题是您的页面上对“jquery.unobtrusive-ajax.min.js”文件的引用在哪里。

如果您使用的是 YSlow 或 PageSpeed，建议之一是将 css 放在头部，将 javascript 放在底部。

这会导致你看到的事情发生（我也遇到过）。

如果您的参考位于底部，则在第一次加载页面（或刷新）时，在 WebGrid 帮助程序尝试开始执行此操作之前尚未加载 javascipt 文件，您将收到弹出消息关于缺少的参考。如果您将其关闭，则分页或排序实际上会起作用，并且消息会消失...直到您再次刷新页面。

您可以将脚本引用移到顶部，也可以编写 document.ready 脚本来延迟处理。

【讨论】：