Search code examples
asp.netbuttongridviewmodalpopupextender

Can a TargetControlID of a PopUp use the Button of a GridView?

I have a Button with id=btnSend that named "Send" in GridView.

I have a ModalPopUpExtender id="SendPopUp" and TargetControlID="btnSend"

and

<asp:Panel id="SendPanel">

I get the error as

System.InvalidOperationException: The TargetControlID of ' SendPopUp'is not valid. A control with ID 'btnSend' could not be found.

How do I make it work?

Solution 
  • You need to add the Click event of button then from code behind file you can show model popup by simply write code in button click event

modal.show()

    For your reference i am providing you complete code as follow. I hope it will help you.

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    .modalBackground
    {
    background-color: Gray;
    filter: alpha(opacity=80);
    opacity: 0.8;
    z-index: 10000;
    }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div>
    <asp:GridView runat="server" ID="gvdetails" DataKeyNames="UserId" AutoGenerateColumns="false">
    <RowStyle BackColor="#EFF3FB" />
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <AlternatingRowStyle BackColor="White" />
    <Columns>
    <asp:TemplateField HeaderText="Edit">
    <ItemTemplate>
    <asp:ImageButton ID="imgbtn" ImageUrl="~/Edit.jpg" runat="server" Width="25" Height="25" onclick="imgbtn_Click" />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="UserName" HeaderText="UserName" />
    <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
    <asp:BoundField DataField="LastName" HeaderText="LastName" />
    <asp:BoundField DataField="City" HeaderText="City" />
    <asp:BoundField DataField="Designation" HeaderText="Designation" />
    </Columns>
    </asp:GridView>
    <asp:Label ID="lblresult" runat="server"/>
    <asp:Button ID="btnShowPopup" runat="server" style="display:none" />
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup"
    CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
    </asp:ModalPopupExtender>
    <asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="269px" Width="400px" style="display:none">
    <table width="100%" style="border:Solid 3px #D55500; width:100%; height:100%" cellpadding="0" cellspacing="0">
    <tr style="background-color:#D55500">
    <td colspan="2" style=" height:10%; color:White; font-weight:bold; font-size:larger" align="center">User Details</td>
    </tr>
    <tr>
    <td align="right" style=" width:45%">
    UserId:
    </td>
    <td>
    <asp:Label ID="lblID" runat="server"></asp:Label>
    </td>
    </tr>
    <tr>
    <td align="right">
    UserName:
    </td>
    <td>
    <asp:Label ID="lblusername" runat="server"></asp:Label>
    </td>
    </tr>
    <tr>
    <td align="right">
    FirstName:
    </td>
    <td>
    <asp:TextBox ID="txtfname" runat="server"/>
    </td>
    </tr>
    <tr>
    <td align="right">
    LastName:
    </td>
    <td>
    <asp:TextBox ID="txtlname" runat="server"/>
    </td>
    </tr>
    <tr>
    <td align="right">
    City:
    </td>
    <td>
    <asp:TextBox ID="txtCity" runat="server"/>
    </td>
    </tr>
    <tr>
    <td align="right">
    Designation:
    </td>
    <td>
    <asp:TextBox ID="txtDesg" runat="server"/>
    </td>
    </tr>
    <tr>
    <td>
    </td>
    <td>
    <asp:Button ID="btnUpdate" CommandName="Update" runat="server" Text="Update" onclick="btnUpdate_Click"/>
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
    </td>
    </tr>
    </table>
    </asp:Panel>
    </div>
    </form>
    </body>
    </html>

    Code Behind file

    using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString());
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindGridData();
}
}
protected void BindGridData()
{
con.Open();
SqlCommand cmd = new SqlCommand("Select * from Employee_Details", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
gvdetails.DataSource = dt;
gvdetails.DataBind();
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
con.Open();
SqlCommand cmd = new SqlCommand("update Employee_Details set FirstName=@FirstName,LastName=@LastName, City=@City,Designation=@Designation where UserId=@UserId", con);
cmd.Parameters.AddWithValue("@FirstName", txtfname.Text);
cmd.Parameters.AddWithValue("@LastName", txtlname.Text);
cmd.Parameters.AddWithValue("@City", txtCity.Text);
cmd.Parameters.AddWithValue("@Designation", txtDesg.Text);
cmd.Parameters.AddWithValue("@UserId", Convert.ToInt32(lblID.Text));
cmd.ExecuteNonQuery();
con.Close();
lblresult.Text = lblusername.Text + " Details Updated Successfully";
lblresult.ForeColor = Color.Green;
BindGridData();
}
protected void imgbtn_Click(object sender, ImageClickEventArgs e)
{
ImageButton btndetails = sender as ImageButton;
GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;
lblID.Text = gvdetails.DataKeys[gvrow.RowIndex].Value.ToString();
lblusername.Text = gvrow.Cells[1].Text;
txtfname.Text = gvrow.Cells[2].Text;
txtlname.Text = gvrow.Cells[3].Text;
txtCity.Text = gvrow.Cells[4].Text;
txtDesg.Text = gvrow.Cells[5].Text;
this.ModalPopupExtender1.Show();
}