1

GridView内部に がUpdatePanelあり、JavaScript を使用して、ユーザーが展開ボタンをクリックしたときに行の表示を切り替えます。の上にかなりの情報がありますGridViewが、それぞれの情報のみUpdatePanelを更新して画面をそのままにしておきたいのですが、JavaScript 呼び出しにより画面全体が更新され、ウィンドウが一番上に戻ってしまいます。

私がGridView実際に使用しているコードはExtGridView、CodeProject ( http://www.codeproject.com/Articles/12299/ExtGridView ) のコントロールから取得されます。これは、最後asp:TemplateFieldの aGridViewを他のアイテムの下の新しい行に変換します。

私は JavaScript が初めてで、ASP.NET もまったく初めてなので、単純なものが欠けている可能性があります。UpdatePanelJavaScript の更新を、それを引き起こしたそれぞれのものに保つ方法はありますか?

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

1 に答える 1

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);
        }
于 2013-02-28T19:05:12.420 に答える