将javascript更新限制为asp：UpdatePanel

Question

我在UpdatePanel 中有一个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);
        }