Asp.net MVC WebGrid在部分視圖中不通過Ajax更新

我有2個WebGrids在不同的局部視圖中顯示在視圖頁上。所有工作正常，但當我在WebGrid上進行排序或分頁時，它不會通過ajax進行更新。我究竟做錯了什麼？Asp.net MVC WebGrid在部分視圖中不通過Ajax更新

PartialView1：

<%@ 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>

PartialView2

<%@ 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>

的MainPage：

<%@ 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>

此外，當我通過螢火檢查控制檯，我看到我雖然排序和分頁的錯誤：錯誤是：

TypeError: $(...).parent(...).delegate is not a function

上代碼：

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

以上代碼通過的WebGrid動態生成的。我不是在寫它。

來源

2013-02-18 Dhwani

你能告訴我們jQuery的版本號嗎？ – iappwebdev 2013-02-21 08:49:03

@Simon，它是1.9.1 – Dhwani 2013-02-21 09:21:20

你是否自己加入jQuery？ – iappwebdev 2013-02-21 10:31:52

如果webgrid它包括jQuery和你所引用的jQuery和jQuery的再定義兩次。這將解釋您的錯誤：

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

禁用您的網頁中的鏈接，它應該工作。如果您需要使用jQuery 1.9+和webgrid正在使用舊版本的jQuery，請將其替換爲新版本。

可能你得到一些錯誤，如果webgrid不使用jQuery 1.9+兼容，然後發表評論，以獲得更多的幫助。

提示：檢查最後生成的HTML多jQuery包含。

來源

2013-02-21 11:17:41 iappwebdev

我嘗試刪除它。但我得到了同樣的錯誤。 – Dhwani 2013-02-21 11:39:04

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

來源

2013-02-22 11:59:56

嘿我沒有生成代表的代碼，所以沒有機會編輯它。 – Dhwani 2013-02-25 08:38:03

好吧我知道這個問題，但我是新的。所以這將花費我一點時間來放在一起。問題是你的部分視圖導致你的事件監聽器在排序和傳播上停止監聽。如果您嘗試使用Jquery設置多頁表格，您會遇到同樣的問題;當您切換頁面時，您的聽衆將斷開連接。這在Jquery中發生，除此之外還有其他好處;這是出於安全原因，所以不要改變它。所以目前有兩種解決方法。首先是每次需要連接時通過回調來重新連接，第二種是將聆聽責任下降到子類。

我會發布與答案的例子，但賞金差不多了。所以我想要一個機會，無論哪種方式，如果你有興趣讓我知道，我會很快有代碼。

來源

2013-02-28 07:05:04

我很想知道解決方案。如果我有機會，我會很感激。 – Dhwani 2013-02-28 07:38:30

我同意我見過這個問題的許多不同的變化。有很多方法可以解決這個問題，但我所見過的任何東西都不乾淨和安全。所以這就是我正在努力，如果我在電腦上睡着了，我沒有忘記我正在努力。 – 2013-02-28 07:44:59

我希望我能得到解決方案，並可以幫助其他可能面臨同樣問題的人。 – Dhwani 2013-02-28 09:25:09

Asp.net MVC WebGrid在部分視圖中不通過Ajax更新

回答

相關問題