将javascript更新限制为asp:UpdatePanel

本文关键字:asp UpdatePanel javascript 更新 | 更新日期: 2023-09-27 18:01:32

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

将javascript更新限制为asp:UpdatePanel

好吧…再玩一些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);
        }