Display ASP.Net GridView Row Value in TextBox inside Modal Popup on Button Click using jQuery

Hi Aashish682,

I have created a sample which full your requirement.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<div>
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" AutoGenerateEditButton="true"
        AutoGenerateDeleteButton="true">
        <Columns>
            <asp:TemplateField HeaderText="CustomerID">
                <ItemTemplate>
                    <asp:Label ID="lblCustomerID" Text='<%#Eval("CustomerID") %>' runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                    <asp:Label ID="lblName" Text='<%#Eval("Name") %>' runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Country">
                <ItemTemplate>
                    <asp:Label ID="lblCountry" Text='<%#Eval("Country") %>' runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <div id="editDialog" style="display: none" align="center">
        <table>
            <tr>
                <td>
                    Name:-
                </td>
                <td>
                    <asp:HiddenField ID="hfCustomerID" runat="server" />
                    <asp:TextBox ID="txtName" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Country:-
                </td>
                <td>
                    <asp:TextBox ID="txtCountry" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnUpdate" Text="Update" runat="server" />
                </td>
                <td>
                    <asp:Button ID="btnClose" Text="Cancel" runat="server" />
                </td>
            </tr>
        </table>
    </div>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#editDialog").dialog({
                modal: true,
                autoOpen: false,
                title: "Edit Dialog",
                width: 300,
                height: 200
            });
            $('a').click(function () {
                if ($(this)[0].innerHTML == "Edit") {
                    $('[id*=hfCustomerID]').val($(this).closest('tr').find("[id*=lblCustomerID]")[0].innerHTML);
                    $('[id*=txtName]').val($(this).closest('tr').find("[id*=lblName]")[0].innerHTML);
                    $('[id*=txtCountry]').val($(this).closest('tr').find("[id*=lblCountry]")[0].innerHTML);
                    $('#editDialog').dialog('open');
                }
                return false;
            });
            $("#btnClose").click(function () {
                $('#editDialog').dialog('close');
            });
            $("#btnUpdate").click(function () {
                var customerId = $('[id*=hfCustomerID]').val();
                var name = $('[id*=txtName]').val();
                var country = $('[id*=txtCountry]').val();
                //here you need to write ajax function for updating the records.
            });
        });
    </script>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindGrid();
    }
}

public void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
    SqlConnection con = new SqlConnection(constr);
    string query = "SELECT TOP 5 CustomerID,Name,Country FROM Customers";
    SqlCommand cmd = new SqlCommand(query, con);
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    sda.Fill(dt);
    gvCustomers.DataSource = dt;
    gvCustomers.DataBind();
}

ScreenShot