Gridview popout window to edit when clicked on a column

Question

I have a gridview. I need to include a hyperlink to one of the columns so when the user clicks the link a popout should come with option to Edit and save. After the save the gridview should automatically get refreshed.

Following is my Gridview Code:

 <asp:GridView ID="EmployeeGridView" runat="server" AutoGenerateColumns="False"
               DataKeyNames="Emp_id" onrowcancelingedit="EmployeeGridView_RowCancelingEdit" 
               onrowediting="EmployeeGridView_RowEditing" onrowdeleting="EmployeeGridView_RowDeleting" 
               onrowupdating="EmployeeGridView_RowUpdating" Width="395px" 
               CellPadding="4" ForeColor="#333333" GridLines="None" 
               onrowdatabound="EmployeeGridView_RowDataBound" AllowPaging="True" 
               onpageindexchanging="EmployeeGridView_PageIndexChanging1" PageSize="5">   
               <AlternatingRowStyle BackColor="White" />
    <Columns>
    <asp:TemplateField HeaderText = "Action"> 
                   <ItemTemplate> 
                        <asp:CheckBox ID = "chkDelete" runat = "server" AutoPostBack="True" 
                            oncheckedchanged="chkDelete_CheckedChanged" /> 
                        <br /> 
                    </ItemTemplate> 
            </asp:TemplateField> 

    <asp:TemplateField HeaderText="Sr.No">
                   <ItemTemplate>   
                       <asp:Label ID = "lblID" runat = "server" Text = '<%#Container.DataItemIndex+1 %>'></asp:Label>
                   </ItemTemplate> 
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Name">
                   <ItemTemplate> 
                        <asp:Label ID = "lblEmpName" runat = "server" Text = '<%# Eval("Emp_name") %>'></asp:Label> 
                    </ItemTemplate> 

                                    <EditItemTemplate>
                                         <asp:TextBox ID="txtempname" runat="server" Text='<%#Eval("Emp_name") %>'></asp:TextBox>
                                    </EditItemTemplate>
     </asp:TemplateField>    
     <asp:TemplateField HeaderText="Experience">
                   <ItemTemplate> 
                        <asp:Label ID = "lblEmpExp" runat = "server" Text = '<%# Eval("Emp_exp") %>'></asp:Label> 
                   </ItemTemplate> 

                                  <EditItemTemplate>
                                           <asp:TextBox ID="txtempexp" runat="server" Text='<%#Eval("Emp_exp") %>'></asp:TextBox>
                                  </EditItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField HeaderText="Address">
                    <ItemTemplate> 
                        <asp:Label ID = "lblEmpAddress" runat = "server" Text = '<%# Eval("Emp_address") %>'></asp:Label> 
                    </ItemTemplate> 

                                <EditItemTemplate>
                                            <asp:TextBox ID="txtempaddress" runat="server" Text='<%#Eval("Emp_address") %>'></asp:TextBox>
                                </EditItemTemplate>
    </asp:TemplateField>
                <asp:CommandField ShowEditButton="true" ButtonType ="Button"  
            HeaderText="Edit" ControlStyle-BackColor= "#15524A" >
<ControlStyle BackColor="#15524A"></ControlStyle>
        </asp:CommandField>
                <asp:CommandField ShowDeleteButton="true" ButtonType="Button" HeaderText="Delete" />  
    </Columns>

        <EditRowStyle BackColor="#7C6F57" />
        <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#E3EAEB" />
        <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#F8FAFA" />
        <SortedAscendingHeaderStyle BackColor="#246B61" />
        <SortedDescendingCellStyle BackColor="#D4DFE1" />
        <SortedDescendingHeaderStyle BackColor="#15524A" />
    </asp:GridView>

The code behind is :

public partial class _Default : System.Web.UI.Page

{
    SqlConnection connstr = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
            protected void EmployeeGridView_Sorting(object sender, GridViewSortEventArgs e)
    {
        Session["sortBy"] = e.SortExpression;
        FillGrid();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        Session["sortBy"] = null;
        if (!Page.IsPostBack)
        {
            FillGrid();
            BindGrid();
        } 

    }
    public void FillGrid()
    {
        SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
        con.Open();
        SqlCommand cmd = new SqlCommand("GetEmployeeInfo", con);
        SqlDataReader dr = cmd.ExecuteReader();//it reads froword only data from database
        DataTable dt = new DataTable();//object of data table that uses to conatin whole data
        dt.Load(dr);//Sql Data reader data load in data table it is DataTable Method.
        EmployeeGridView.DataSource = dt;
        EmployeeGridView.DataBind();

    }
    private void BindGrid()
    {
        string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select Id, Name from tblFiles";
                cmd.Connection = con;
                con.Open();
                GridView1.DataSource = cmd.ExecuteReader();
                GridView1.DataBind();
                con.Close();
            }
        }
    }
    protected void EmployeeGridView_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
    {
        EmployeeGridView.EditIndex = -1;
        FillGrid();

    }
    protected void EmployeeGridView_RowEditing(object sender, GridViewEditEventArgs e)
    {
        EmployeeGridView.EditIndex = e.NewEditIndex;
        FillGrid();

    }

    protected void EmployeeGridView_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        int empid = Convert.ToInt32(EmployeeGridView.DataKeys[e.RowIndex].Value.ToString());//Get Each Row unique value from DataKeyNames
        string name = ((TextBox)EmployeeGridView.Rows[e.RowIndex].FindControl("txtempname")).Text;//get TextBox Value in EditItemTemplet that row is clicked
        string experience = ((TextBox)EmployeeGridView.Rows[e.RowIndex].FindControl("txtempexp")).Text;
        string address = ((TextBox)EmployeeGridView.Rows[e.RowIndex].FindControl("txtempaddress")).Text;
        SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
        con.Open();
        SqlCommand cmd = new SqlCommand("EmployeeUpdate", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@emp_id ", empid);
        cmd.Parameters.AddWithValue("@emp_name ", name);
        cmd.Parameters.AddWithValue("@emp_exp ", experience);
        cmd.Parameters.AddWithValue("@emp_address ", address);
        cmd.ExecuteNonQuery();//Sql Command Class method return effected rows use for insert,update, delete
        EmployeeGridView.EditIndex = -1;// no row in edit mode
        FillGrid();
    }
    protected void EmployeeGridView_RowDeleting(object sender, GridViewDeleteEventArgs e)
    {
        int empid = Convert.ToInt32(EmployeeGridView.DataKeys[e.RowIndex].Value.ToString());
        SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
        con.Open();
        SqlCommand cmd = new SqlCommand("DeleteEmployee", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@emp_id ", empid);
        cmd.ExecuteNonQuery();
        FillGrid();

    }

    protected void EmployeeGridView_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        EmployeeGridView.PageIndex = e.NewPageIndex;
        FillGrid();
    }

    protected void buttonDelete_Click(object sender, EventArgs e)

    {
        foreach (GridViewRow row in EmployeeGridView.Rows)
        {
            var chk = row.FindControl("chkDelete") as CheckBox;
            if (chk.Checked)
            {
                var lblID = row.FindControl("lblID") as Label;
                Response.Write(lblID.Text + "<br>");

                SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
                SqlCommand comm = new SqlCommand("Delete  from tbl_employee where Emp_id=@emp_id", conn);
                // comm.CommandType = CommandType.StoredProcedure;
                conn.Open();
                comm.Parameters.AddWithValue("@emp_id", int.Parse(lblID.Text));

                comm.ExecuteNonQuery();
                conn.Close();
            }
       }
        FillGrid();
    }
    protected void buttonUpdate_Click(object sender, EventArgs e)
    {
        foreach (GridViewRow row in EmployeeGridView.Rows)
        {

            var chk = row.FindControl("chkDelete") as CheckBox;
            if (chk.Checked)
            {

                SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);

                var lblID = row.FindControl("lblID") as Label;
                var lblEmpName = row.FindControl("lblEmpName") as Label;
                var lblEmpExp = row.FindControl("lblEmpExp") as Label;
                var lblEmpAddress = row.FindControl("lblEmpAddress") as Label;
                //Response.Write(lblFirstName.Text + "<br>");  
                SqlCommand comm = new SqlCommand("EmployeeUpdate", conn);
                comm.CommandType = CommandType.StoredProcedure;
                comm.Parameters.AddWithValue("@emp_id", int.Parse(lblID.Text));
                comm.Parameters.AddWithValue("@emp_name", EmpName.Text);
                comm.Parameters.AddWithValue("@emp_exp", EmpExp.Text);
                comm.Parameters.AddWithValue("@Emp_address", EmpAddress.Text);

                conn.Open();
                comm.ExecuteNonQuery();
                conn.Close();
                EmpName.Visible = false;
                EmpExp.Visible = false;
                EmpAddress.Visible = false;
            }

        }
        FillGrid();
    }
}

For the column Name I need to make a hyperlink and when clicked the popout should come to edit and view data

Answer 1

不确定我是否完全了解您需要什么，但是您可以查看MS AJAX工具包中的模式弹出窗口的工作方式，并尝试模拟下载随附的示例代码。