jquery - 部分的なポストバックの後、updatepanel の GridView でフッタブル スクリプトが機能しない

Question

WebフォームアプリケーションでASP.Net GridView（ASP.NET 4.5）のフッタブル（V2）スクリプト/ CSSを利用して、テーブルをレスポンシブにします（さまざまなデバイスの適切な列のサイズを変更して非表示にします）。明らかな理由で GridView を updatePanel 内に配置したいのですが、部分的なポストバックでは、フッタブル スクリプトは実行されません (スクリプト参照を UpdatePanel 内に直接配置しても)。ただし、jQuery および Bootstrap スクリプトは問題なく動作します (図を参照)。footable_redraw関数は、組み込みのpageLoad()関数または$(document).readyを使用してロードするかどうかに関係なく役に立ちません。（または両方）機能。ToolkitScriptManager を MasterPage から取り出しましたが、まったく違いはありません。ScriptReferences を TKSM から削除して役立つかどうかを確認しましたが、違いはありません。私は世界中のフォーラムから何百もの手法を試しましたが、まだ機能する答えはありません (そして、疑わしいことに、完全に機能するソリューションを投稿した人はいません)。たぶん、これはフッタブルでは不可能なのかもしれませんが、わかりません。

    <%@ 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 はポストバック後に正常に動作し、フッタブル CSS テーマも GridView テーブルのヘッダー行 (TH) を除いて正常に動作します。私は困惑しています！

追加: これが私の新しいコードです - これが最初のページの読み込みでのみ機能する理由の原因として、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

これはトラブルシューティングに役立ちます。

Answer 1

私にとって同じ問題は、これを使用して解決します。

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

    }); 
};

Answer 2

MC9000 あなたの問題は、ポストバック後にレンダリングされたテーブルを失ったことですか?

私は同じ問題を抱えていて、ページの下部でこれを試しました：

        $('table').footable();

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

問題として私が理解していること: ポストバック後に JS 参照が失われるため、元に戻す必要があります。

役立つことを願っています

Answer 3

フッタブル スクリプトには AJAX UpdatePanel との相容れない問題があり、それらと MS によると、サポートも修正もされません。言い換えれば、それらは互換性がなく、フッタブル スクリプトを書き直さない限り回避策はありません (これを編集するつもりもありません)。