How can I add record name in a JavaScript popup before deletion in Asp.net C# code

Question

I have a following column in my GridView in Asp.net Code. This is column containing a delete icon against all of the records in my GridView. What I want to do is to add the name of the record in a JavaScript confirmation popup which I have already implemented.

<asp:GridView ID="GVCities" CssClass="Gview" HeaderStyle-BorderStyle="None" runat="server"
AutoGenerateColumns="False" BackColor="White" CellPadding="4" ForeColor="Black"
GridLines="Horizontal" >
    <Columns>

        ...

        <asp:TemplateField>
            <ItemTemplate>
                <asp:ImageButton runat="server" ID="imgbtnDelete" CommandArgument='<%# Eval("CityId")%>'
                ImageUrl="~/images/delete_icon.png" ToolTip="Delete" 
                OnClick="imgbtnDelete_OnClick" OnClientClick="return confirm('Are you sure you want to delete this city?');" />
            </ItemTemplate>
            <ItemStyle CssClass="GVItems" />
            <HeaderStyle CssClass="GVHeader" HorizontalAlign="right" VerticalAlign="Middle" />
        </asp:TemplateField>

    </Columns>
</asp:GridView>

I want to display the City Name in the JavaScript Delete confirmation dialog. I have tried the code at MSDN but couldn't be able to get the desired result.

Expected Result

Are you sure you want to delete Amsterdam city?

instead of

Are you sure you want to delete this city?

Answer 1

remove the onClientClick event from your client side code and DataKeyNames="Cities" attribute and give it your "Cities" column name. Use OnRowDataBound="GVCities_OnRowDataBound" to bound your dialog with all the rows on page load. So whenever the user clicks on the delete button or delete image, the respective confirmation dialog will appear before deletion.

<asp:GridView ID="GVCities" CssClass="Gview" HeaderStyle-BorderStyle="None" runat="server" AutoGenerateColumns="False" BackColor="White" CellPadding="4" ForeColor="Black" GridLines="Horizontal" DataKeyNames="Cities" OnRowDataBound="GVCities_OnRowDataBound" >
<Columns>

    ...

    <asp:TemplateField>
        <ItemTemplate>
            <asp:ImageButton runat="server" ID="imgbtnDelete" CommandArgument='<%# Eval("CityId")%>'
            ImageUrl="~/images/delete_icon.png" ToolTip="Delete" 
            OnClick="imgbtnDelete_OnClick" />
        </ItemTemplate>
        <ItemStyle CssClass="GVItems" />
        <HeaderStyle CssClass="GVHeader" HorizontalAlign="right" VerticalAlign="Middle" />
    </asp:TemplateField>

</Columns>

At Code Behind

By using the following code, you can bound your dialog with every row on page load. Whenever user clicks on delete icon, it will ask for confirmation containing the city name as you are expecting.

protected void GVCities_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    try
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {

            ImageButton imgbtnDelete = e.Row.FindControl("imgbtnDelete") as ImageButton;
            imgbtnDelete.OnClientClick = "return confirm('Are you sure you want to delete " +  
                                         GVCities.DataKeys[e.Row.RowIndex]["Cities"].ToString() + " city?');";
        }
    }
    catch (Exception ex)
    {
       ...
    }
}

Answer 2

您可以尝试关注

 OnClientClick='<%# "confirm(" + Eval("LocationId") + ");" %>'