Question

我在Gridview中使用UpdatePanel和用户控件时遇到了一个小问题。

我编写了一个带有Gridview的用户控件，用于显示标题详细信息。在某个列上，我有一个辅助Gridview，它显示标题的详细信息。（这也是一个Usercontrol）。

现在我想在详细信息用户控件上实现一些jquery，用于折叠/展开详细信息。

所以我有以下层次结构：

母版页 - ＆gt;内容页面 - ＆gt;用户控制 - ＆gt; UpdatePanel - ＆gt;第一用户控制 - ＆gt;网格内的辅助用户控制

但是如果我在第二个用户控件中添加以下内容则没有任何反应：

（也就是说，如果我使用更新面板，但这似乎没有用，但那不是我想要的。）

＆＃13;

<script type="text/javascript">   
        $(document).ready(function() {
            alert('ding');
        });    
</script>

＆＃13;

第一个用户控件的代码：

＆＃13;

<%@ 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>&nbsp;
                    </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>&nbsp;
                      <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" />&nbsp;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>

＆＃13;

第二个用户控件的代码：

＆＃13;

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

＆＃13;

我要做的下一件事是（当我让jQuery在辅助用户控件上工作时）是编写一个脚本来扩展/折叠辅助用户控件中的面板。

以下是我尝试运行的脚本，无需更新面板即可运行。

＆＃13;

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

＆＃13;

非常感谢任何帮助。

提前谢谢。

问候。

使用Gridview在usercontrol中进行Jquery

0 个答案: