我在Gridview中使用UpdatePanel和用户控件时遇到了一个小问题。
我编写了一个带有Gridview的用户控件，用于显示标题详细信息。 在某个列上，我有一个辅助Gridview，它显示标题的详细信息。 （这也是一个Usercontrol）。
现在我想在详细信息用户控件上实现一些jquery，用于折叠/展开详细信息。
所以我有以下层次结构：
母版页 - ＆gt;内容页面 - ＆gt;用户控制 - ＆gt; UpdatePanel - ＆gt;第一用户控制 - ＆gt;网格内的辅助用户控制
但是如果我在第二个用户控件中添加以下内容则没有任何反应：
（也就是说，如果我使用更新面板，但这似乎没有用，但那不是我想要的。）
<script type="text/javascript">
$(document).ready(function() {
alert('ding');
});
</script>
第一个用户控件的代码：
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="SlotScheduler.ascx.vb" Inherits="AlphaSlot.SlotScheduler" %>
<%@ Register Src="~/Controls/SlotScheduler_BookingDetails.ascx" TagPrefix="uc1" TagName="SlotScheduler_BookingDetails" %>
<%--<script type="text/javascript">
function pageLoad() { alert('load'); }
</script>--%>
<style type="text/css">
.search {
border: 1px solid #dddddd;
background-color: #f8f8f8;
padding: 15px;
}
.search .row {
padding: 10px 0;
}
.slots {}@media (max-width: 1280px) {
.slotScheduler {
width: 100%;
overflow: scroll;
}
}
</style>
<asp:UpdatePanel runat="server" ID="upScheduler" UpdateMode="Conditional">
<Triggers>
</Triggers>
<ContentTemplate>
<div class="search">
<div class="row">
<div class="col-md-1">
<asp:Label ID="lblDateTitle" Font-Size="Small" runat="server" Text="Date:"></asp:Label>
</div>
<div class="col-md-2">
<table>
<tr>
<td>
<asp:LinkButton ID="lbPrevDate" runat="server" CssClass="btn btn-primary" CausesValidation="False" CommandName="PrevDate" Text="Previous">
<img src="../Images/bullet_arrow_left.png" border="0" alt="Refresh" />
</asp:LinkButton>
</td>
<td>
<asp:TextBox ID="txtSelectedDate" ClientIDMode="Static" Width="100px" CssClass="form-control input-sm" runat="server"></asp:TextBox>
<ajaxToolkit:CalendarExtender runat="server" ID="DateCalendarExtender" TargetControlID="txtSelectedDate" DaysModeTitleFormat="dd/MM/yyyy" FirstDayOfWeek="Monday" Format="dd/MM/yyyy" TodaysDateFormat="dd/MM/yyyy">
</ajaxToolkit:CalendarExtender>
</td>
<td>
<asp:LinkButton ID="lbNextDate" CssClass="btn btn-primary" runat="server" CausesValidation="False" CommandName="NextDate" Text="Next">
<img src="../Images/bullet_arrow_right.png" border="0" alt="Refresh" />
</asp:LinkButton>
</td>
</tr>
</table>
</div>
<div class="col-md-1">
<asp:Label ID="lblCustomer" Font-Size="Small" runat="server" Text="Customer:"></asp:Label>
</div>
<div class="col-md-2">
<asp:DropDownList ID="cbCustomer" runat="server" AutoPostBack="true" CssClass="form-control input-sm" Width="150px">
</asp:DropDownList>
</div>
<div class="col-md-1">
<asp:Label ID="lblBookingRef" Font-Size="Small" runat="server" Text="Booking Reference:"></asp:Label>
</div>
<div class="col-md-2">
<asp:TextBox ID="txtBookingRef" ClientIDMode="Static" Width="175px" CssClass="form-control input-sm" runat="server"></asp:TextBox>
</div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-1">
<asp:Label ID="lblSiteTitle" Font-Size="Small" runat="server" Text="Site:"></asp:Label>
</div>
<div class="col-md-2">
<asp:DropDownList ID="cbSite" runat="server" AutoPostBack="true" CssClass="form-control input-sm" DataTextField="SITE" DataValueField="SITE_ID" Width="150px">
</asp:DropDownList>
</div>
<div class="col-md-1">
<asp:Label ID="lblTransporter" Font-Size="Small" runat="server" Text="Transporter:"></asp:Label>
</div>
<div class="col-md-2">
<asp:DropDownList ID="cbTransporter" runat="server" AutoPostBack="true" CssClass="form-control input-sm" Width="150px">
</asp:DropDownList>
</div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1">
<asp:LinkButton ID="lbFilter" runat="server" CssClass="btn btn-primary" CausesValidation="False" CommandName="Filter" OnClick="lbFilter_Click" Text="Filter">
<img src="../Images/zoom.png" border="0" alt="Refresh" /> Filter</asp:LinkButton>
</div>
</div>
</div>
<p>
<div class="slotScheduler">
<asp:GridView ID="gvSlotScheduler" ClientIDMode="Static" runat="server" Width="100%" EnableModelValidation="True" CssClass="table table-bordered table-condensed table-responsive" EmptyDataText="No Details Found" ShowFooter="True" GridLines="None" AllowPaging="True"
ItemType="AlphaSlot.NNSlotServices.Detailed_ReservationProxy" AllowSorting="True" ShowHeaderWhenEmpty="true" AutoGenerateColumns="False" RowStyle-Wrap="false" SelectMethod="gvSlotScheduler_GetData" PagerSettings-PageButtonCount="50">
<AlternatingRowStyle CssClass="gridOdd" />
<HeaderStyle CssClass="gridHeader" />
<PagerSettings PageButtonCount="50" />
<RowStyle CssClass="gridEven" />
<SelectedRowStyle CssClass="gridSelect" />
<FooterStyle CssClass="gridFooter" />
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<HeaderTemplate>
<asp:CheckBox ID="cbHeader" AutoPostBack="true" runat="server" OnCheckedChanged="cbHeader_CheckedChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="Select" AutoPostBack="true" runat="server" OnCheckedChanged="Select_CheckedChanged" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<table>
<tr>
<td>
<asp:LinkButton ID="lbUpdate" runat="server" CausesValidation="True" CommandName="Update" Text="Update">
<img src="../Images/disk.png" border="0" alt="Save" />
</asp:LinkButton>
</td>
<td>
<asp:LinkButton ID="lbCancel" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel">
<img src="../Images/cancel.png" border="0" alt="Cancel" />
</asp:LinkButton>
</td>
</tr>
</table>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="lbEdit" runat="server" Enabled="false" CausesValidation="False" CommandName="Edit" Text="Edit">
<img src="../Images/page_edit.png" border="0" alt="Edit" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="lbDelete" runat="server" Enabled="false" CausesValidation="False" CommandName="Delete" CssClass="dgBtnDelete" ToolTip="Delete This Line">
<img src="../Images/delete.png" Border="0" alt="Delete" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Customer" HeaderStyle-Font-Size="Small">
<ItemTemplate>
<%# Item.FOREIGN_CUST_NAME%>
</ItemTemplate>
<HeaderStyle Font-Size="Small" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Transporter" HeaderStyle-Font-Size="Small">
<ItemTemplate>
<%# Item.TRANSPORTER%>
</ItemTemplate>
<HeaderStyle Font-Size="Small" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Booking Reference" HeaderStyle-Font-Size="Small">
<ItemTemplate>
<%# Item.BOOKING_REFERENCE%>
</ItemTemplate>
<HeaderStyle Font-Size="Small" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Date" HeaderStyle-Font-Size="Small">
<ItemTemplate>
<%# Item.BOOKING_DATE%>
</ItemTemplate>
<HeaderStyle Font-Size="Small" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Slots" HeaderStyle-Font-Size="Small">
<ItemTemplate>
</ItemTemplate>
<HeaderStyle Font-Size="Small" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Details" HeaderStyle-Font-Size="Small">
<ItemTemplate>
<uc1:SlotScheduler_BookingDetails runat="server" ID="SlotScheduler_BookingDetails" ClientIDMode="Static" BOOKING_ID="<%# Item.BOOKING_ID%>" />
</ItemTemplate>
<HeaderStyle Font-Size="Small" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Remarks" HeaderStyle-Font-Size="Small">
<ItemTemplate>
Remarks
</ItemTemplate>
<HeaderStyle Font-Size="Small" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Status" HeaderStyle-Font-Size="Small">
<ItemTemplate>
<%# Item.STATUS%>
</ItemTemplate>
<HeaderStyle Font-Size="Small" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<p>
</p>
</p>
</ContentTemplate>
</asp:UpdatePanel>
第二个用户控件的代码：
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="SlotScheduler_BookingDetails.ascx.vb" Inherits="AlphaSlot.SlotScheduler_BookingDetails" %>
<%--<script type="text/javascript">
function pageLoad() { alert('load'); }
</script>--%>
<%--<asp:UpdatePanel runat="server" ID="upScheduler" UpdateMode="Conditional">
<Triggers>
</Triggers>
<ContentTemplate>--%>
<div class="divTable">
<div class="Row">
<div class="CellTop">
<asp:Panel ID="lbExpand" ClientIDMode="AutoID" runat="server">
<asp:Panel runat="server" ID="details_container_btn" ClientIDMode="AutoID" class="image_expand">
</asp:Panel>
</asp:Panel>
</div>
<div class="Cell">
<asp:Panel ID="pnDetails" ClientIDMode="AutoID" runat="server">
<asp:GridView ID="gvBookingDetails" runat="server" Width="100px" EnableModelValidation="True" CssClass="table table-bordered table-condensed table-responsive" EmptyDataText="No Details Found" ShowFooter="True" GridLines="None" AllowPaging="True" ItemType="AlphaSlot.NNSlotServices.SlotBookDetailProxy"
AllowSorting="True" ShowHeaderWhenEmpty="true" AutoGenerateColumns="False" RowStyle-Wrap="false" SelectMethod="gvBookingDetails_GetData" PagerSettings-PageButtonCount="50">
<AlternatingRowStyle CssClass="gridOdd" />
<HeaderStyle CssClass="gridHeader" />
<PagerSettings PageButtonCount="50" />
<RowStyle CssClass="gridEven" />
<SelectedRowStyle CssClass="gridSelect" />
<FooterStyle CssClass="gridFooter" />
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<HeaderTemplate>
<asp:CheckBox ID="cbHeader" AutoPostBack="true" runat="server" OnCheckedChanged="cbHeader_CheckedChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="Select" AutoPostBack="true" runat="server" OnCheckedChanged="Select_CheckedChanged" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<table>
<tr>
<td>
<asp:LinkButton ID="lbUpdate" runat="server" CausesValidation="True" CommandName="Update" Text="Update">
<img src="../Images/disk.png" border="0" alt="Save" />
</asp:LinkButton>
</td>
<td>
<asp:LinkButton ID="lbCancel" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel">
<img src="../Images/cancel.png" border="0" alt="Cancel" />
</asp:LinkButton>
</td>
</tr>
</table>
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="lbEdit" runat="server" Enabled="false" CausesValidation="False" CommandName="Edit" Text="Edit">
<img src="../Images/page_edit.png" border="0" alt="Edit" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="lbDelete" runat="server" Enabled="false" CausesValidation="False" CommandName="Delete" CssClass="dgBtnDelete" ToolTip="Delete This Line">
<img src="../Images/delete.png" Border="0" alt="Delete" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Reference" HeaderStyle-Font-Size="Small">
<ItemTemplate>
<%# Item.REFERENCE%>
</ItemTemplate>
<HeaderStyle Font-Size="Small" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Remarks" HeaderStyle-Font-Size="Small">
<ItemTemplate>
<%# Item.REMARKS%>
</ItemTemplate>
<HeaderStyle Font-Size="Small" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Type" HeaderStyle-Font-Size="Small">
<ItemTemplate>
<%# Item.TYPE%>
</ItemTemplate>
<HeaderStyle Font-Size="Small" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</div>
</div>
</div>
<%-- </ContentTemplate>
</asp:UpdatePanel>--%>
我要做的下一件事是（当我让jQuery在辅助用户控件上工作时）是编写一个脚本来扩展/折叠辅助用户控件中的面板。
以下是我尝试运行的脚本，无需更新面板即可运行。
<script type="text/javascript">
$(document).ready(function () {
alert('Hello from Jquery');
$("#<%=pnDetails.ClientID%>").slideToggle("slow");
$('#<%=details_container_btn.ClientID%>').toggleClass('image_expand');
$("#<%=lbExpand.ClientID%>").click(function () {
$("#<%=pnDetails.ClientID%>").slideToggle("slow");
$('#<%=details_container_btn.ClientID%>').toggleClass('image_expand');
});
});
</script>
非常感谢任何帮助。
提前谢谢。
问候。