將UpdatePanel添加到aspx頁面

Question

我會教你的幫助。 我想添加一個updatepanel到我的頁面，所以它只刷新gridview而不是空白頁面。 我要在不同的地方把它弄壞，但它似乎不起作用，仍然會刷新頁面。 我應該在哪裏插入它？

我有一個下拉列表，其通過I填充gridview的。 這是代碼：

<%@ Page Title="All Products" Language="C#" MasterPageFile="~/MasterPage/MasterPage.master" AutoEventWireup="true" CodeFile="All.aspx.cs" Inherits="Catalog_All" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
    <style type="text/css"> 
     .style4 
     { 
      width: 100%; 
     } 
     .style5 
     { 
      width: 620px; 
     } 
     .style6 
     { 
      font-size: large; 
      text-decoration: underline; 
     } 
    </style> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
<div> 

    <asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="True" 
        AutoPostBack="True" DataSourceID="SqlDataSource2" DataTextField="CategoryName" 
        DataValueField="categoryId" 
     onselectedindexchanged="DropDownList1_SelectedIndexChanged"> 
        <asp:ListItem Value="">choose pet</asp:ListItem> 
       </asp:DropDownList> 
       <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
        ConnectionString="<%$ ConnectionStrings:AllPets %>" 
        SelectCommand="SelectAllCategories" SelectCommandType="StoredProcedure"> 
       </asp:SqlDataSource> 





    <table class="style4"> 
     <tr> 
      <td colspan="2" class="style6"> 
       <strong>All products</strong></td> 
     </tr> 

     <tr> 
      <td class="style5"> 
       &nbsp;</td> 
      <td> 

      </td> 
     </tr> 
     <tr> 

      <td class="style5"> 

       <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ProductID" DataSourceID="SqlDataSource1" AllowPaging="True"> 


        <Columns> 
         <asp:BoundField DataField="ProductName" HeaderText="product" 
          SortExpression="ProductName" /> 
         <asp:ImageField DataAlternateTextField="picPath" DataImageUrlField="picPath" 
          HeaderText="pic"> 
     </asp:ImageField> 
         <asp:BoundField DataField="Price" HeaderText="price" 
          SortExpression="Price" /> 
         <asp:BoundField DataField="Summary" HeaderText="des" 
          SortExpression="Summary" /> 
        </Columns> 

       </asp:GridView> 

       <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:get_products_bypet %>" 
        SelectCommand="get_products_bypet" SelectCommandType="StoredProcedure"> 
        <SelectParameters> 
         <asp:ControlParameter ControlID="DropDownList1" Name="categoryId" 
          PropertyName="SelectedValue" Type="Int32" /> 
        </SelectParameters> 
       </asp:SqlDataSource> 


      </td> 
      <td> 
       &nbsp;</td> 
     </tr> 
     <tr> 
      <td class="style5"> 
       &nbsp;</td> 
      <td> 
       &nbsp;</td> 
     </tr> 
     <tr> 
      <td class="style5"> 
       &nbsp;</td> 
      <td> 
       &nbsp;</td> 
     </tr> 
    </table> 


</div> 

</asp:Content> 

tahnx的幫助

Answer 1

添加它的內容標籤之後，到最後，因爲你使用的DropDownList是使自動滿後回

<asp:Content ID="Content2" ..> 
     <asp:UpdatePanel ID="updPanl" runat="server" RenderMode="Block" UpdateMode="Conditional" > 
     <ContentTemplate> 
     ........ rest code ......... 
     </ContentTemplate> 
     </asp:UpdatePanel> 
    </asp:Content> 

Answer 2

試試這個，把下拉列表和gridview放在同一個更新面板中。如果你不想把下拉同一面板中，check the second answer

<asp:UpdatePanel runat="server" ID="Upd"> 
<ContentTemplate> 

     <%-- Dropdown list here should work --%> 

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
       DataKeyNames="ProductID" DataSourceID="SqlDataSource1" AllowPaging="True"> 


       <Columns> 
        .... 
       </Columns> 

      </asp:GridView> 
</ContentTemplate> 
</asp:UpdatePanel> 

如果你不想把下拉菜單中相同的更新面板，使用觸發器

<%-- dropdown list outside here --%> 
<asp:UpdatePanel runat="server" ID="Upd"> 
<ContentTemplate> 
     <%-- Only your Gridview here --%> 
</ContentTemplate> 

<Triggers> 
<asp:AsyncPostBackTrigger ControlID="DropdownList1" 
    EventName="SelectedIndexChange" /> 
</Triggers> 
</asp:UpdatePanel>