3

我有 2 个 WebGrid，每个都在不同的局部视图中，显示在视图页面上。一切正常，但是当我在 WebGrid 上进行排序或分页时，它不会通过 ajax 进行更新。我究竟做错了什么？

部分视图1：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<CRMEvent.Models.CRM.DatabaseEntities.CRM_Request>>" %>
<%    
  var grid1var = new WebGrid(source: Model, defaultSort: "Id", fieldNamePrefix: "grid1", canSort: true, ajaxUpdateContainerId: "Div1", canPage: true, rowsPerPage: 5);%>
  <div id="Div1">
  <%=grid1var.GetHtml(htmlAttributes: new { id = "grid1" }, tableStyle: "GridTable", headerStyle: "GridHeader", footerStyle: "GridFooter",
  columns: grid1var.Columns(
  grid1var.Column(columnName: "Id", header: "ID", canSort: true),
  grid1var.Column(columnName: "Request_For_Id", header: "Request For", canSort: true),
  grid1var.Column(columnName: "Date_Created", header: "Date", canSort: true, format: item => item.Date_Created.ToString("dd-MM-yyyy"))
))%>
  </div>

部分视图2

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<CRMEvent.Models.CRM.DatabaseEntities.CRM_Request>>" %>
<%    
  var grid2var = new WebGrid(source: Model, defaultSort: "Id", fieldNamePrefix: "grid2", canSort: true, ajaxUpdateContainerId: "Div2", canPage: true, rowsPerPage: 5);%>
  <div id="Div2">
  <%=grid2var.GetHtml(htmlAttributes: new { id = "grid2" }, tableStyle: "GridTable", headerStyle: "GridHeader", footerStyle: "GridFooter",
  columns: grid2var.Columns(
  grid2var.Column(columnName: "Id", header: "ID", canSort: true),
  grid2var.Column(columnName: "Request_For_Id", header: "Request For", canSort: true),
  grid2var.Column(columnName: "Date_Created", header: "Date", canSort: true, format: item => item.Date_Created.ToString("dd-MM-yyyy"))
))%>
  </div>

主页：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<CRMEvent.Models.CRM.DatabaseEntities.CRM_Request>" %>
<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server">
<link href="../../Content/Styles/Dashboard.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
    <%using (Html.BeginForm("Action", "Dashboard", FormMethod.Post)){ %>
    <div id="MainDashboardDiv">
      <div class="LiveTile">
        <div id="PriorityDiv1">
          <%Html.RenderAction("RecentRequests", Model); %>
        </div>  <!--End of PriorityDiv1 -->
        <div id="PriorityDiv2">
        <%Html.RenderAction("PriorityRequests", Model); %>
        </div>  <!--End of PriorityDiv2 -->
      </div>      <!--End of LiveTile -->
    </div><!--End of MainDashboardDiv -->
    <%} %>
</asp:Content>

母版页 HEAD 标签内容：

<head id="head" runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="<%: Url.Content("~/Scripts/jquery-1.9.1.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/modernizr-1.7.min.js") %>" type="text/javascript"></script>
    <asp:ContentPlaceholder ID="HeadContent" runat="server">
    </asp:ContentPlaceholder>      
    <link href="../../Content/menu.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery.js" type="text/javascript"></script>
    <script src="../../Scripts/menu.js" type="text/javascript"></script>
</head>

此外，当我通过 firebug 检查控制台时，我在进行排序和分页时看到了一个错误：错误是：

TypeError: $(...).parent(...).delegate 不是函数

关于代码：

$(containerId).parent().delegate(containerId + 'a[data-swhglnk="true"]', 'click', function()

以上代码是由 WebGrid 动态生成的。我不是在写它。

4

3 回答 3

1

如果webgrid它包含 jQuery 并且您也引用了 jQuery，那么 jQuery 被定义了两次。这可以解释你的错误：

$(containerId).parent().delegate(containerId + ' a[data-swhglnk="true"]', 'click', function()

禁用网页中的链接，它应该可以工作。如果您需要使用 jQuery 1.9+ 并且webgrid使用的是旧版本的 jQuery，则将其替换为新版本。

如果与 jQuery 1.9+ 不兼容，您可能会遇到一些错误webgrid，然后发表评论以获得更多帮助。

提示：检查最终生成的多个 jQuery 包含的 HTML。

于 2013-02-21T11:17:41.480 回答
1

好吧，我知道问题所在，但我是新手。所以这需要我一点时间来整理。问题是您的部分视图导致排序和传播上的事件侦听器停止侦听。如果您尝试使用 Jquery 设置多页表，您将遇到同样的问题；当您切换页面时，您的听众将断开连接。这发生在 Jquery 和其他好处中；它是出于安全原因完成的，所以不要改变它。所以目前有两种方法可以解决这个问题。第一个是每次需要附加时通过回调重新连接，第二个是将侦听职责放到子类中。

我会发布带有答案的示例，但赏金快到了。所以我想要一个机会，如果你有兴趣让我知道，我很快就会有代码。

于 2013-02-28T07:05:04.803 回答
1 
try this
$(containerId).parent.delegate(containerId + ' a[data-swhglnk="true"]', 'click', function()
于 2013-02-22T11:59:56.863 回答