將javascript更新限制爲僅包含一個asp：UpdatePanel

Question

我在中有一個GridView，當用戶單擊展開按鈕時，使用javascript切換行的可見性。在GridView之上有相當多的信息，但我只想要更新各自的UpdatePanel中的信息，以便屏幕保持原樣，但JavaScript調用會導致整個屏幕刷新，並且窗口會跳回頂部。

我使用了GridView的代碼實際上來自在CodeProject（http://www.codeproject.com/Articles/12299/ExtGridView）的ExtGridView控制 - 它變成一個GridView的最後asp:TemplateField到其他項目下的新行。

我是JavaScript的新手，對ASP.NET很新，所以我可能會缺少一些簡單的東西。有沒有一種方法可以將JavaScript刷新到導致它的各個UpdatePanel？

下面是JavaScript代碼：

<script type="text/javascript"> 
//<![CDATA[ 
function TglRow(ctl) 
{ 
    var row = ctl.parentNode.parentNode; 
    var tbl = row.parentNode; 
    var crow = tbl.rows[row.rowIndex + 1]; 
    var ihExp = ctl.parentNode.getElementsByTagName('input').item(0); 

    tbl = tbl.parentNode; 

    var expandClass = tbl.attributes.getNamedItem('expandClass').value; 
    var collapseClass = tbl.attributes.getNamedItem('collapseClass').value; 
    var expandText = tbl.attributes.getNamedItem('expandText').value; 
    var collapseText = tbl.attributes.getNamedItem('collapseText').value; 

    if (crow.style.display == 'none') 
    { 
     crow.style.display = ''; 
     ctl.innerHTML = collapseText; 
     ctl.className = collapseClass; 
     ihExp.value = '1'; 
    } 
    else 
    { 
     crow.style.display = 'none'; 
     ctl.innerHTML = expandText; 
     ctl.className = expandClass; 
     ihExp.value = ''; 
    } 
}//]]> 
</script> 

這裏是從GridView的摘錄：

<asp:UpdatePanel ID="UpdatePanelChapter11" runat="server" 
      ChildrenAsTriggers="false" UpdateMode="Conditional"> 
     <ContentTemplate> 
     <cc1:ExtGridView ID="gvChapter11" runat="server" AutoGenerateColumns="False" DataSourceID="odsChapter11" 
      DataKeyNames="pkChapter11ID" ShowFooter="True" SkinID="GridViewSKin" Width="85%" 
      onrowcommand="gvChapter11_RowCommand" 
      onrowdatabound="gvChapter11_RowDataBound" 
      onrowupdating="gvChapter11_RowUpdating" 
      CollapseButtonCssClass="GridCollapseButton" 
      ExpandButtonCssClass="GridExpandButton" CollapseButtonText="" 
      ExpandButtonText="" onrowcreated="gvChapter11_RowCreated"> 
      <Columns> 
      <asp:TemplateField HeaderText="Name of<br/>Party" SortExpression="Name"> 
       <EditItemTemplate> 
       <asp:TextBox ID="tbName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox> 
       <br /><asp:RequiredFieldValidator ID="tbNameValidator" runat="server" ErrorMessage="*Name Required" ControlToValidate="tbName" 
       Display="Dynamic" CssClass="Error" ValidationGroup="SaveChapter11Validation"></asp:RequiredFieldValidator> 
       </EditItemTemplate> 
       <FooterTemplate> 
       <asp:TextBox ID="tbName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox> 
       <br /><asp:RequiredFieldValidator ID="tbNameValidator" runat="server" ErrorMessage="*Name Required" ControlToValidate="tbName" 
       Display="Dynamic" CssClass="Error" ValidationGroup="NewChapter11Validation"></asp:RequiredFieldValidator> 
       </FooterTemplate> 
       <ItemTemplate> 
       <asp:Label ID="Label4" runat="server" Text='<%# Eval("Name") %>'></asp:Label> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField> 
       <EditItemTemplate> 
       <asp:LinkButton CssClass="Button" ID="SaveLink" runat="server" CommandName="Update" Text="Save" ValidationGroup="SaveChapter11Validation"></asp:LinkButton> 
       <asp:LinkButton CssClass="Button" ID="CancelLink" runat="server" CommandName="Cancel" Text="Cancel"></asp:LinkButton> 
       </EditItemTemplate> 
       <ItemTemplate> 
       <asp:LinkButton CssClass="Button" ID="EditLink" runat="server" CommandName="Edit" Text="Edit"></asp:LinkButton> 
       <asp:LinkButton CssClass="Button" ID="DeleteLink" runat="server" CommandName="Delete" Text="Delete" 
       OnClientClick="return confirm('Are you sure you want to delete this entry?');" ></asp:LinkButton> 
       </ItemTemplate> 
       <FooterTemplate> 
       <asp:LinkButton CssClass="Button" ID="AddLink" runat="server" CommandName="Insert" Text="<<< Add" ValidationGroup="NewChapter11Validation"></asp:LinkButton> 
       </FooterTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField HeaderText="Plan"> 
       <EditItemTemplate> 
       <div class="ExtGridRow" style="vertical-align:top;">Plan: </div> 
       <asp:TextBox ID="tbPlan" runat="server" Text='<%# Bind("Plan") %>'></asp:TextBox> 
       </EditItemTemplate> 
       <ItemTemplate> 
       <div class="ExtGridRow" style="vertical-align:top;">Plan: </div> 
       <asp:Label ID="Label9" runat="server" Text='<%# Eval("Plan") %>'></asp:Label> 
       </ItemTemplate> 
       <FooterTemplate> 
       <div class="ExtGridRow" style="vertical-align:top;">Plan: </div> 
       <asp:TextBox ID="tbPlan" runat="server"></asp:TextBox> 
       </FooterTemplate> 
      </asp:TemplateField> 
      </Columns> 
     </cc1:ExtGridView> 
     </ContentTemplate> 
     <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="gvChapter11" EventName="DataBound" /> 
     </Triggers> 
    </asp:UpdatePanel> 

Answer 1

拍嘛......與ExtGridView碼多一點玩耍，我想通出來。調用JavaScript的展開/切換按鈕也有一個HRef分配，充當鏈接，所以當它被點擊時，它不僅會調用JavaScript，而且還會像點擊鏈接一樣操作，導致頁面刷新。

從ExtGridView罪魁禍首代碼：

 // ... 
     else if (RowType == DataControlRowType.DataRow || RowType == DataControlRowType.Footer) 
     {  
      _expCell = new TableCell(); 

      _ctlExpand = new HtmlAnchor(); 
      //_ctlExpand.HRef = "#";   -- Commenting this out worked! 
      _ctlExpand.Attributes["onclick"] = "TglRow(this);"; 

      _ihExp = new HtmlInputHidden(); 
      _ihExp.ID = "e" + this.DataItemIndex.ToString(); 

      _expCell.Controls.Add(_ctlExpand); 
      _expCell.Controls.Add(_ihExp);  
     } 

     if (_expCell != null) 
     { 
      _expCell.Width = Unit.Pixel(20); 
      Cells.AddAt(0, _expCell); 
     }