1. 首页
  2. 问答
  3. 可脚本脚本在部分回发后在updatepanel中无法用于GridView

可脚本脚本在部分回发后在updatepanel中无法用于GridView

2015-03-18 54 views
0

我正在webforms应用程序中使用脚本（V2）脚本/ CSS作为ASP.Net GridView（ASP.NET 4.5）以使表响应（调整大小并为不同的设备隐藏适当的列）。 我希望GridView能够在updatePanel中出于显而易见的原因，但是，在任何部分回发中，脚本脚本不会被执行（即使我将脚本引用直接放入UpdatePanel中）。 （参见图）。jQuery和Bootstrap脚本工作得很好，但是（去图）。 的footable_redraw功能并不能帮助我是否加载它瓦特/内置页面加载（）功能或$（文件）。就绪（或两者）的功能。 我将ToolkitScriptManager从MasterPage中拿出来，但这根本没有任何区别。我从TKSM中删除了ScriptReferences，看看这是否有帮助，但它没有区别。我尝试了来自各地论坛的数百种技术，但没有答案尚未解决（可疑的是，没有人发布过完整的工作解决方案）。也许这是根本不可能的，我不知道。可脚本脚本在部分回发后在updatepanel中无法用于GridView

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

所有的引导代码（页眉，页脚，菜单）工作正常&了jQuery回发后工作正常，除了标题行（TH ）在GridView表中。 我很难过！

此外： 这里是我的新代码 - 我消除了母版&在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>

NEW后面的代码：

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

这应该有助于排除故障。

来源

2015-03-18 MC9000

+0

更新：我已经删除了UpdatePanel，它仍然没有正常工作（没有任何改变）。另外，我还删除了Async =“True”。所以一定会有另一场冲突发生。 – MC9000 2015-03-19 00:37:22

+0

更新：我在上面添加了一个更基本的webform进行测试。我认为我发现了一个嫌疑犯：可排序的链接（当AllowSorting =“true”时生成）。为了测试，我在第一列中输入了一个提交按钮，点击后，创建了一个回传（完整）。回发本身并不是问题，但是GridView的重新生成是。我倾向于脚本脚本在重新生成GV时无法“找到”GV，即使没有报告JavaScript错误 – MC9000 2015-03-19 01:18:50

+0

划掉最后一条评论 - GV正在通过按钮回发重新生成。唯一剩下的就是标题链接（可能是罪魁祸首） – MC9000 2015-03-19 01:29:20

回答

0

可脚本脚本与AJAX UpdatePanel存在不可调和的问题，因为按照它们和MS，它将不被支持和修复。换句话说，它们是不兼容的，没有重写可脚本脚本（我甚至不打算尝试编辑），没有解决方法。

来源

2015-03-20 03:51:01 MC9000

1

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

我有同样的问题，并试图此页面的底部：

 $('table').footable(); 

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

我明白了什么是问题：回发后的JS引用都将丢失，所以你必须把它们放回去。

我希望它有帮助

来源

2015-10-15 18:58:30

2

同样的问题，我解决这个问题。

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

    }); 
};

来源

2016-01-15 10:12:15

相关问题

 相关问题