部分回发后，可脚注脚本不适用于更新面板中的 GridView

【问题标题】：footable scripts don't work for GridView in updatepanel after partial postback部分回发后，可脚注脚本不适用于更新面板中的 GridView
【发布时间】：2015-03-18 23:17:29
【问题描述】：

我在 webforms 应用程序中为 ASP.Net GridView (ASP.NET 4.5) 使用可脚注 (V2) 脚本/CSS，以使表格具有响应性（调整大小并隐藏不同设备的适当列）。 出于显而易见的原因，我希望 GridView 位于 updatePanel 中，但是，在任何部分回发时，不会执行可加载脚本（即使我将脚本引用直接放在 UpdatePanel 中）。 然而，jQuery 和 Bootstrap 脚本工作得很好（看图）。 footable_redraw 函数对我使用内置 pageLoad() 函数还是 $(document).ready （或两者）功能。 我将 ToolkitScriptManager 从 MasterPage 中取出，但这根本没有区别。我从 TKSM 中删除了 ScriptReferences 以查看是否有帮助，但这没有任何区别。我从各地的论坛尝试了数百种技术，但还没有任何答案有效（而且，可疑的是，没有人发布过完整的工作解决方案）。也许这根本不可能 w/footable，我不知道。

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/SiteBS.Master" CodeBehind="TestSearch1.aspx.vb" Inherits="SearchWebsite.TestSearch1" Async="True" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph1" runat="server">
    <%-- NOTE: putting the toolkitscriptmanager on the master page or this page, no difference. loadscriptsbeforeUI setting makes no difference
        jQuery and bootStrap are loaded via tags in the master page header, loading in TKSM makes no difference --%>
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="tksm1" LoadScriptsBeforeUI="False">
    </ajaxToolkit:ToolkitScriptManager>
    <div class="container">
        <asp:UpdatePanel ID="up1" runat="server" EnableViewState="False">

            <ContentTemplate>
                <%-- NOTE: this script cannot go into scriptmanager as it will NOT WORK!!! Yet it won't work on partial postback --%>
                <script type="text/javascript" src="Scripts/FooTable-2/dist/footable.min.js"></script>


                <%-- Set minimum column widths --%>
                <style type="text/css">
                    .hdrVdr { min-width: 80px; }
                    .hdrMan { min-width: 128px; }
                    .hdrCal { min-width: 88px; }
                    .hdrGW { min-width: 88px; }
                    .hdrProd { }
                    .hdrPrice { min-width: 108px; }
                    .hdrCR { min-width: 95px; }
                </style>


                <asp:GridView ID="grdHG" runat="server" AutoGenerateColumns="False" DataSourceID="odsHGSearch" EnableViewState="False" CellPadding="1" AllowSorting="True">
                    <Columns>
                        <asp:TemplateField HeaderText="Vendor" SortExpression="vendor" HeaderStyle-CssClass="hdrVdr">
                            <ItemTemplate>
                                <asp:Label ID="lblVdr" runat="server" Text='<%# Eval("vendor") %>'></asp:Label>
                                <asp:HiddenField ID="hididx" runat="server" Value='<%# Eval("idx")%>' />
                                <asp:HiddenField ID="hidlid" runat="server" Value='<%# Eval("lid")%>' />
                                <asp:HiddenField ID="hidUpdated" runat="server" Value='<%# Eval("Updated")%>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Manufacturer" SortExpression="manufacturer" HeaderStyle-CssClass="hdrMan">
                            <ItemTemplate>
                                <asp:Label ID="lblMan" runat="server" Text='<%# Bind("manufacturer") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Caliber" SortExpression="caliber_gauge_bore" HeaderStyle-CssClass="hdrCal">
                            <ItemTemplate>
                                <asp:Label ID="lblCal" runat="server" Text='<%# Bind("caliber_gauge_bore") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Grn/Wt" SortExpression="grains_weight" HeaderStyle-CssClass="hdrGW">
                            <ItemTemplate>
                                <asp:Label ID="lblGW" runat="server" Text='<%# Bind("grains_weight") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Product" SortExpression="product_name" HeaderStyle-CssClass="hdrProd">
                            <ItemTemplate>
                                <asp:Label ID="lblProd" runat="server" Text='<%# Bind("product_name") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Price" SortExpression="price" HeaderStyle-CssClass="hdrPrice ">
                            <ItemTemplate>
                                <asp:Label ID="lblPrice" runat="server" Text='<%# Eval("Price", "{0:c}") & "/" & Eval("units") & "<br/>(" & Eval("total_rounds") & ")"%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Cost/Rnd" SortExpression="price_per_round" HeaderStyle-CssClass="hdrCR">
                            <ItemTemplate>
                                <asp:Label ID="lblCR" runat="server" CssClass='<%# "Status" & Eval("stock_status")%>' Text='<%# Eval("price_per_round", "{0:c}")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

                <script type="text/javascript">
                    function pageLoad() {
                        // does not completely work - the row styles remain after postback, but header styles disappear and responsive part does not work
                        $(document).ready(function () {
                            $('[id$=grdHG]').footable();
                            $('[id$=grdHG]').trigger('footable_redraw'); // does absolutely nothing
                        });
                    }
                </script>

                <script type="text/javascript">
                    $(function () {
                        $('[id$=grdHG]').footable({
                            breakpoints: {
                                phone: 480,
                                tablet: 1024
                            }
                        });
                    });

                </script>

            </ContentTemplate>
        </asp:UpdatePanel>
</div>

代码隐藏：

Imports AppCore
Imports AppCore.AppCore
Imports AppCore.AppCore.Xutilities
Imports System.Configuration
Imports Microsoft.VisualBasic

Public Class TestSearch1
    Inherits System.Web.UI.Page

    Private Sub testBS3_PreInit(sender As Object, e As EventArgs) Handles Me.PreInit
        HGSearch_Data.DBConnStr = System.Configuration.ConfigurationManager.ConnectionStrings("DefaultConnection").ToString
    End Sub

    Private Sub grdHG_Load(sender As Object, e As EventArgs) Handles grdHG.Load
        'If Not Me.tksm1.IsInAsyncPostBack Then 'NOTE a futile attempt here to see if this worked, it did not.
        grdHG.HeaderRow.TableSection = TableRowSection.TableHeader
        'End If
    End Sub

    Private Sub grdHG_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles grdHG.RowDataBound
        If e.Row.RowType = DataControlRowType.Header Then
            'vendor
            e.Row.Cells(0).Attributes.Add("data-class", "expand")
            'manufacturer
            e.Row.Cells(1).Attributes.Add("data-hide", "phone")
            'caliber
            e.Row.Cells(2).Attributes.Add("data-hide", "phone")
            'product
            e.Row.Cells(4).Attributes.Add("data-hide", "phone,tablet")


        ElseIf e.Row.RowType = DataControlRowType.DataRow Then
            'todo

        End If

    End Sub

    Private Sub grdHG_Sorting(sender As Object, e As GridViewSortEventArgs) Handles grdHG.Sorting
        'todo for server side sorting
    End Sub
End Class

母版页：

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="SiteBS.master.vb" Inherits="SearchWebsite.SiteBS" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><%: Page.Title %>- Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="Scripts/FooTable-2/css/footable.core.min.css" rel="stylesheet" />
    <link href="Scripts/FooTable-2/css/footable.metro.min.css" rel="stylesheet" />

    <style type="text/css">
        body { margin-bottom: 80px; }
        .panel-body { padding-top: 0; }
        .page-header { margin-top: 0; }
        .featuredImg { margin-bottom: 15px; }
        .StatusO { color: #990000; font-weight: bold; }
        .StatusI { color: #006600; font-weight: bold; }
        .StatusB { color: #ff9900; font-weight: bold; }
    </style>

    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
    <script type="text/javascript" src="Scripts/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
    <%-- NOTE: Footable won't work in UpdatePanel w/script reference here   <script type="text/javascript" src="Scripts/FooTable-2/dist/footable.min.js"></script>--%>
</head>
<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <a class="navbar-brand" href="#">Test 115</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right ">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#myaccount">My Account</a></li>
                    <li><a href="#about">About</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">FaceBook</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Google</a></li>
                        </ul>
                    </li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#login" data-toggle="modal">Login</a></li>
                </ul>
            </div>
        </div>
    </div>
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder ID="cph1" runat="server">
        </asp:ContentPlaceHolder>
    </form>
    <div class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
            <p class="navbar-text pull-left">Copyright 2003-<%=Now.Year%> Test</p>
            <a href="#" class="navbar-btn btn-info btn pull-right ">Extra</a>
        </div>
    </div>

</body>
</html>

所有 Bootstrap 代码（页眉、页脚、菜单）都可以正常工作，并且 jQuery 在回发后可以正常工作，除了 GridView 表中的标题行 (TH) 之外，可脚注的 CSS 主题也可以正常工作。 我被难住了！

补充： 这是我的新代码 - 我消除了 MasterPage 和 UpdatePanel 是导致这只适用于第一页加载的罪魁祸首

ASPX：

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestSearch2.aspx.vb" Inherits="SearchWebsite.TestSearch2" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Test 2</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
        <link href="Scripts/FooTable-2/css/footable.core.min.css" rel="stylesheet" />
        <link href="Scripts/FooTable-2/css/footable.metro.min.css" rel="stylesheet" />

        <style type="text/css">
            body { margin-bottom: 80px; }
            .panel-body { padding-top: 0; }
            .page-header { margin-top: 0; }
            .featuredImg { margin-bottom: 15px; }
            .StatusO { color: #990000; font-weight: bold; }
            .StatusI { color: #006600; font-weight: bold; }
            .StatusB { color: #ff9900; font-weight: bold; }
        </style>

        <script type="text/javascript" src="Scripts/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
        <script type="text/javascript" src="Scripts/FooTable-2/dist/footable.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">

            <div class="container">


                <%-- Set minimum column widths --%>
                <style type="text/css">
                    .hdrVdr { min-width: 80px; }
                    .hdrMan { min-width: 128px; }
                    .hdrCal { min-width: 88px; }
                    .hdrGW { min-width: 88px; }
                    .hdrProd { }
                    .hdrPrice { min-width: 108px; }
                    .hdrCR { min-width: 95px; }
                </style>


                <asp:GridView ID="grdHG" runat="server" AutoGenerateColumns="False" DataSourceID="odsHGSearch" EnableViewState="False" CellPadding="1" AllowSorting="True">
                    <Columns>
                        <asp:TemplateField HeaderText="Vendor" SortExpression="vendor" HeaderStyle-CssClass="hdrVdr">
                            <ItemTemplate>
                                <asp:Label ID="lblVdr" runat="server" Text='<%# Eval("vendor") %>'></asp:Label>
                                <asp:HiddenField ID="hididx" runat="server" Value='<%# Eval("idx")%>' />
                                <asp:HiddenField ID="hidlid" runat="server" Value='<%# Eval("lid")%>' />
                                <asp:HiddenField ID="hidUpdated" runat="server" Value='<%# Eval("Updated")%>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Manufacturer" SortExpression="manufacturer" HeaderStyle-CssClass="hdrMan">
                            <ItemTemplate>
                                <asp:Label ID="lblMan" runat="server" Text='<%# Bind("manufacturer") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Caliber" SortExpression="caliber_gauge_bore" HeaderStyle-CssClass="hdrCal">
                            <ItemTemplate>
                                <asp:Label ID="lblCal" runat="server" Text='<%# Bind("caliber_gauge_bore") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Grn/Wt" SortExpression="grains_weight" HeaderStyle-CssClass="hdrGW">
                            <ItemTemplate>
                                <asp:Label ID="lblGW" runat="server" Text='<%# Bind("grains_weight") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Product" SortExpression="product_name" HeaderStyle-CssClass="hdrProd">
                            <ItemTemplate>
                                <asp:Label ID="lblProd" runat="server" Text='<%# Bind("product_name") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Price" SortExpression="price" HeaderStyle-CssClass="hdrPrice ">
                            <ItemTemplate>
                                <asp:Label ID="lblPrice" runat="server" Text='<%# Eval("Price", "{0:c}") & "/" & Eval("units") & "<br/>(" & Eval("total_rounds") & ")"%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Cost/Rnd" SortExpression="price_per_round" HeaderStyle-CssClass="hdrCR">
                            <ItemTemplate>
                                <asp:Label ID="lblCR" runat="server" CssClass='<%# "Status" & Eval("stock_status")%>' Text='<%# Eval("price_per_round", "{0:c}")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>



                <script type="text/javascript">
                    $(function () {
                        $('[id$=grdHG]').footable({
                            breakpoints: {
                                phone: 480,
                                tablet: 1024
                            }
                        });
                    });

                </script>



            </div>
            <asp:ObjectDataSource ID="odsHGSearch" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetLive_ItemsByPageSort" TypeName="AppCore.HGSearch_Data" SortParameterName="sortExpression" SelectCountMethod="CountHGSearchs">

...
            </asp:ObjectDataSource>


        </form>
    </body>
    </html>

新代码隐藏：

Imports AppCore
Imports AppCore.AppCore
Imports AppCore.AppCore.Xutilities
Imports System.Configuration
Imports Microsoft.VisualBasic

Public Class TestSearch2
    Inherits System.Web.UI.Page

    Private Sub testBS3_PreInit(sender As Object, e As EventArgs) Handles Me.PreInit
        HGSearch_Data.DBConnStr = System.Configuration.ConfigurationManager.ConnectionStrings("DefaultConnection").ToString
    End Sub

    Private Sub grdHG_Load(sender As Object, e As EventArgs) Handles grdHG.Load
        grdHG.HeaderRow.TableSection = TableRowSection.TableHeader
    End Sub

    Private Sub grdHG_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles grdHG.RowDataBound
        If e.Row.RowType = DataControlRowType.Header Then
            'vendor
            e.Row.Cells(0).Attributes.Add("data-class", "expand")
            'manufacturer
            e.Row.Cells(1).Attributes.Add("data-hide", "phone")
            'caliber
            e.Row.Cells(2).Attributes.Add("data-hide", "phone")
            'product
            e.Row.Cells(4).Attributes.Add("data-hide", "phone,tablet")


        ElseIf e.Row.RowType = DataControlRowType.DataRow Then
            'todo

        End If

    End Sub

    Private Sub grdHG_Sorting(sender As Object, e As GridViewSortEventArgs) Handles grdHG.Sorting
        'todo for server side sorting
    End Sub

End Class

这应该有助于故障排除。

【问题讨论】：

  • 更新：我已经删除了 UpdatePanel，但它仍然不能正常运行（没有任何改变）。此外，我还删除了 Async="True" 。所以肯定有另一个冲突在发生。
  • 更新：我为上面的测试添加了一个更基本的网络表单。我想我找到了一个嫌疑犯：可排序链接（在 AllowSorting="true" 时生成。为了测试，我在第一列中放置了一个提交按钮，单击该按钮时，会创建一个回发（完整）。回发本身不是问题，但 GridView 的再生是问题。我倾向于在重新生成时，即使没有报告 JavaScript 错误，可脚脚本也无法“找到”GV .
  • 从最后一条评论开始 - 按钮回发正在重新生成 GV。唯一剩下的是标题链接（可能是罪魁祸首）。
  • 好的。我已经排除了标题链接，它是 GridView 的 .Sort 方法导致了这里的所有问题。我相信，解决方案是在带有事件的 GridView 的 .RowCreated 事件中创建我自己的标题，而不是使用内置的 Sort 方法，而是使用要排序的列和 ASC 或 DESC 更改数据源的参数和以这种方式重新绑定 GridView。
  • 当我把它放回 UpdatePanel 中时，我又遇到了原来的问题 :(footable 脚本只是不会在 UpdatePanel 上初始化！！！

标签： jquery twitter-bootstrap gridview updatepanel footable


【解决方案1】：

我用这个解决了同样的问题。

var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
    prm.add_endRequest(function (sender, e) {
        if (sender._postBackSettings.panelsToUpdate != null) {
            $('.footable').footable();
        }

    }); 
};

【讨论】：

    【解决方案2】：

    MC9000 你的问题是你在回发后丢失了你的渲染表不是吗？

    我遇到了同样的问题，并在页面底部尝试了这个：

            $('table').footable();

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () { 
            $(document).ready(function () {
              $('table').footable();
            });

    我理解的问题是：回发后 JS 引用丢失了，所以你必须把它们放回去。

    希望对你有帮助

    【讨论】：

      【解决方案3】：

      Footable 脚本与 AJAX UpdatePanel 存在不可调和的问题，根据他们和 MS，该问题将不受支持或修复。换句话说，它们不兼容，并且如果不重新编写可脚注的脚本（我什至不会费心尝试编辑），就不可能有解决方法。

      【讨论】：

        猜你喜欢
        • 2011-04-04
        • 1970-01-01
        • 2011-12-11
        • 2011-10-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode