如何在GridView命令字段中调用JavaScript函数

本文关键字:调用 JavaScript 函数 字段 命令 GridView | 更新日期: 2023-09-27 17:54:04

我返回了一个Javascript函数,它向用户询问确认消息。JavaScript函数是

    function ConfirmOnDelete() {
    if (confirm("Are you sure to delete?"))
        return true;
    else
        return false;

和GridView如下所示:

    <asp:CommandField HeaderText="Delete" ShowDeleteButton="True" />

这里我想在用户点击GridView命令字段中的Delete时调用JavaScript函数。怎么称呼这个?

如何在GridView命令字段中调用JavaScript函数

假设你想继续使用你的CommandField,你可以用你的GridView的OnRowDataBound事件来编程地做到这一点。

GridView声明中指定RowDataBound事件的事件处理程序:

<asp:GridView ID="gv" runat="server" OnRowDataBound="gv_RowDataBound"....

然后在你的事件处理程序(代码后面)找到你的按钮(这里我假设ImageButton,虽然这取决于你的CommandFieldButtonType属性),并添加JavaScript到它的OnClientClick属性。

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        ((ImageButton)e.Row.Cells[cell].Controls[ctrl]).OnClientClick = "return confirm('Are you sure you want to delete?');"; // add any JS you want here
    }
}

在上面的例子中,cell是指CommandField的列索引,ctrl是指你引用的单元格中的控件索引(删除按钮)。

您最好避免在服务器端请求删除确认,使用javascript捕获用户的最终决定,然后转到服务器端执行您的逻辑。CommandField在这里不是最好的解决方案。

JS:

<script type="text/javascript">
    function DeleteConfirm() {
        if (confirm("Are you sure you want to delete this customer from excluded customer list ?")) {
            return true;
        }
        return false;
    }
</script>
HTML:

            <asp:TemplateField HeaderText=" ">
                <ItemTemplate>
                    <asp:LinkButton ID="lnk_RemoveFromlist" runat="server" Text="Delete"
                        CommandName="Delete" OnCommand="Delete_Command" CommandArgument='<%# Eval("ID").ToString()' OnClientClick='return DeleteConfirm()'></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
代码:

protected void Remove_Command(object sender, CommandEventArgs e)
{
    //Implement your Delete Logic
}

取消按钮的命令名称为"cancel",删除按钮的命令名称为"delete",检查

if(e.CommandName == "delete")
 {
   //script to delete();
 }
else if(e.commandName == "cancel")
 {
   //close with some script;
 }

在代码后面调用javascript函数,

Page.ClientScript.RegisterStartupScript(this.GetType(), "Call my function","loadPopupBox();", true);

一般情况下,您必须指定OnClientClick="return confirm('Are you sure you want to delete ?');",但这不适用于CommandField最好使用TemplateField,这解释得更好http://davesquared.net/2007/10/confirm-delete-for-gridview.html

您可以使用OnClientclick事件按钮调用函数。例如

<asp:button id="btndelete" runat="server" Text="delete" Onclientclick="if(!ConfirmOnDelete())return false;"/>

HTML:

<asp:GridView ID="GridView1" runat="server" OnRowDeleting="gv1_RowDeleting">
   <Columns>
       <asp:TemplateField HeaderText="Delete">
          <ItemTemplate>
                   <asp:CommandField ShowDeleteButton="true" HeaderText="delete" />  
          </ItemTemplate>
       </asp:TemplateField>
   </Columns>
</asp:GridView>
代码:

    protected void gv1_RowDeleting (object sender, GridViewDeleteEventArgs e) 
{
    GridView1.Attributes.Add("OnClick", "return confirm('Really wanna delete?');");
       // implement your delete logic
    Response.Write("<script>alert("Delete Successful");</script>");
}

当我们点击Gridview和Response中的"Delete"命令字段时,这将调用Javascript函数。Write函数会在数据被删除时发出警告。你可以在这个函数中添加任何你想要执行的函数

use start - up script

    ScriptManager.RegisterStartupScript(Page, this.GetType(), "ConfirmOnDelete", "ConfirmOnDelete();", true);

或者也可以使用onclientclick