javascript 如何清除javascript中包含gridview行编辑值的文本框

How to clear textbox in javascript that contains value of gridview row editing

提问by Kunal Sobti

I have following ASP controls: a textbox , a gridview, an update button, and a reset button.

我有以下 ASP 控件：一个文本框、一个 gridview、一个更新按钮和一个重置按钮。

When I click on the row editing button of a gridview row, then it fills the corresponding value in the textbox.

当我单击 gridview 行的行编辑按钮时，它会在文本框中填充相应的值。

My problem is that when I click on the reset button, it does not clear the textbox value that comes from the gridview row.

我的问题是，当我单击重置按钮时，它不会清除来自 gridview 行的文本框值。

function btnReset_onclick() {
   document.getElementById("<%= txtDescription.ClientID %>").value = "";
}

protected void GridViewExpenses_RowEditing(object sender, GridViewEditEventArgs e)
{
     lblExpenseDesc = GridViewExpenses.Rows[e.NewEditIndex].FindControl("lblDescription") as Label;
     txtDescription.Text = lblExpenseDesc.Text;
}

How can I clear the textfield?

如何清除文本字段？

回答by Daniel Gruszczyk

<script type="text/javascript">
    function clearTextBox() {
        document.getElementById('<%= txtTest.ClientID %>').value = "";
    }
</script>
<asp:TextBox ID="txtTest" runat="server" Text="blah blah blah" />
<input type="button" value="Clear" onclick="clearTextBox()" />

That works for me...

这对我行得通...

回答by Harun

UPDATE:

更新：

Remove the default edit button of the grid (remove the ShowEditButton="True" of CommandField) and add a link buttoninside another itemTemplate. Also set the CommandName attributeof edit link button to editand (this will help the edit button to work as the default edit of the grid). Then call the javascripton edit link button's OnClientClick event and perform your logic there. Also place two other link buttons for update and cancel, should be placed inside an EditItemTemplateand CommandName attributefor each of them should be set to update and cancelcorrespondingly..

删除网格的默认编辑按钮（删除 CommandField 的 ShowEditButton="True"）并在另一个itemTemplate 中添加一个链接按钮。还将编辑链接按钮的CommandName 属性设置为编辑和（这将有助于编辑按钮作为网格的默认编辑工作）。然后在编辑链接按钮的 OnClientClick 事件上调用 javascript并在那里执行您的逻辑。还为 update 和 cancel放置另外两个链接按钮，应将它们放置在EditItemTemplate 中，并且应将它们中的每一个的CommandName 属性设置为相应的更新和取消..

Refer code below to see the implementation,

参考下面的代码来查看实现，

Aspx Section,

Aspx部分，

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowCancelingEdit="GridView1_RowCancelingEdit"
        OnRowUpdating="GridView1_RowUpdating" OnRowEditing="GridView1_RowEditing">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <%# Eval("sample1")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="txtValue" runat="server"></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="Edit" CommandName="edit" OnClientClick="return ClearText(this.id)"></asp:LinkButton>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:LinkButton ID="lnkBtnUpdate" runat="server" Text="Update" CommandName="update"></asp:LinkButton>
                    &nbsp;
                    <asp:LinkButton ID="lnkBtnCancel" runat="server" Text="Cancel" CommandName="cancel"></asp:LinkButton>
                </EditItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Java Script section,

Java 脚本部分，

 <script language="javascript" type="text/javascript">
    function ClearText(btnID)
    { 
        var txtID=btnID.replace("lnkBtnEdit","txtValue");          
        var txtValue=document.getElementById(txtID);            

        alert(txtID);

        txtValue.value="";

        return true;
    }
</script>

code behind,

后面的代码，

    protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
    {
        GridView1.EditIndex = -1;
        populate();
    }

    protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        //do update logic here
        GridView1.EditIndex = -1;
        populate();
    }

    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        GridView1.EditIndex = e.NewEditIndex;
        populate();
    }

Hope this helps you...

希望这对你有帮助...