文章/答案/技术大牛

发布

社区首页 >问答首页 >可引脚脚本在部分回发后的updatepanel中不适合GridView

问可引脚脚本在部分回发后的updatepanel中不适合GridView
EN

Stack Overflow用户

提问于 2015-03-18 23:17:29

回答 3查看 2.9K关注 0票数 0

我正在利用webforms应用程序中用于V2 (ASP.NET GridView，ASP.Net 4.5)的页脚脚本/CSS来使表响应(为不同的设备调整大小和隐藏适当的列)。出于明显的原因，我希望GridView在updatePanel中，但是在任何部分回发时，都不会执行可引脚脚本(即使我将脚本引用直接放在UpdatePanel中)。然而，jQuery和引导脚本工作得很好(如图所示)。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

MasterPage：

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

所有的引导代码(页眉、页脚、菜单)都工作得很好& 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

这将有助于故障排除。

twitter-bootstrap

gridview

updatepanel

footable

jquery

回答 3

Stack Overflow用户

发布于 2016-01-15 10:12:15

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

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

    }); 
};

票数 2

Stack Overflow用户

发布于 2015-10-15 18:58:30

MC9000，您的问题是在回发之后丢失了呈现的表吗？

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

        $('table').footable();

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

我所理解的问题是:回发之后JS引用丢失了，所以您必须将它们放回原处。

我希望它能帮上忙

票数 1

Stack Overflow用户

发布于 2015-03-20 03:51:01

Footable脚本与AJAX UpdatePanel有一个不可调和的问题，根据它们和MS，这个问题既不支持也不修复。换句话说，它们是不兼容的，如果不重写页脚脚本(我甚至不会尝试编辑这些脚本)，就不可能找到解决办法。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29134469

复制

相似问题

问可引脚脚本在部分回发后的updatepanel中不适合GridView
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可引脚脚本在部分回发后的updatepanel中不适合GridViewEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可引脚脚本在部分回发后的updatepanel中不适合GridView
EN