opening modalpopup with gridview delete - asp.net

Question

I am trying to open a modal popup window when user clicks on the delete image button. when I click on the delete image button, I want the user to go to grdShoppingCart_RowDeleting when Ok is clicked. I am not sure what I am doing wrong. Below is my gridview code:
<asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5" GridLines="None" OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting" >
<Columns>
<!-- other clumns here-->
<asp:TemplateField ShowHeader="False" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" ItemStyle-Width="150px" ControlStyle-CssClass="ss-row" >
<ItemTemplate>
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" ToolTip="Click To Delete" AlternateText="Click To delete" CommandName="Delete"/>
<asp:Panel ID="pnlPopUp" runat="server" Style="display: none" CssClass="modalPopup">
<asp:Panel ID="pnlDragPopUp" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
<div>
<p>Are you sure you want to delete this item?</p>
</div>
</asp:Panel>
<div>
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="Yes" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="imgbtnDelete"
PopupControlID="pnlPopUp"
BackgroundCssClass="modalBackground"
CancelControlID="CancelButton"
DropShadow="true"
PopupDragHandleControlID="pnlDragPopUp" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Code behind:
protected void grdShoppingCart_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int cartId = (int)grdShoppingCart.DataKeys[e.RowIndex]["CartID"];
ShoppingCartData scd = new ShoppingCartData();
scd.DeleteShoppingCartData(cartId);
}

Answer 1

These are the changes that I did to fix the code. I passed the CartID to the code behind
<div >
<p style="display:flex;align-items:center;justify-content:space-between;width:220px;">
<asp:Button ID="OkButton" runat="server" Text="Remove" CommandName="delete" CommandArgument='<%#Eval("CartID") %>'/>
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</div>
and these are the changes I did in code behind:
protected void grdShoppingCart_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
// Get current grid view row
GridViewRow row = grdShoppingCart.Rows[e.RowIndex];
// Get command argument from button, also you could use another approach to get parameters
Button btn = (Button)row.FindControl("OkButton");
int cartId = Convert.ToInt32(btn.CommandArgument);
label1.Text = "The row is going to be deleted: " + cartId;
}
that did the trick.