Edit Update ASP.Net GridView row using Bootstrap Modal Popup

Hi Chriz,

I have update the code please check it.

HTML

<script type='text/javascript'>
    function OpenModal() {
        $('[id*=myModal]').modal('show');
    }
</script>
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" ShowFooter="true"
    AllowPaging="True" PageSize="10">
    <Columns>
        <asp:TemplateField Visible="true">
            <ItemTemplate>
                <asp:HiddenField runat="server" ID="hfId" Value='<%# Bind("Id") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txtName" CssClass="form-control" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
            </EditItemTemplate>
            <FooterTemplate>
                <asp:TextBox ID="txtName" runat="server" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Country">
            <ItemTemplate>
                <asp:Label ID="lblValue" runat="server" Text='<%# Bind("Country") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txtValue" CssClass="form-control" runat="server" Text='<%# Bind("Country") %>'></asp:TextBox>
            </EditItemTemplate>
            <FooterTemplate>
                <asp:TextBox ID="txtCountry" CssClass="form-control" Width="50px" runat="server"></asp:TextBox>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField ItemStyle-Width="150">
            <ItemTemplate>
                <asp:Button ID="btnModal" runat="server" Text="Edit" OnClick="btnModal_Click" />
            </ItemTemplate>
            <FooterTemplate>
                <asp:Button ID="btnAdd" Text="Add" runat="server" OnClick="OnInsert" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
            <h5 class="modal-title">
                Modal</h5>
        </div>
        <div class="modal-body">
            <table>
                <tr>
                    <td style="padding: 5px">
                        <asp:Label ID="lblID" runat="server" Text="ID"></asp:Label>
                    </td>
                    <td style="padding: 5px">
                        <asp:Label ID="lblIndex" Text='<%# Eval("Id") %>' runat="server" />
                    </td>
                </tr>
                <tr>
                    <td style="padding: 5px">
                        <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
                    </td>
                    <td style="padding: 5px">
                        <asp:TextBox ID="txtName" Text='<%# Eval("Name") %>' Width="100px" CssClass="form-control"
                            runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 5px">
                        <asp:Label ID="lblCountry" runat="server" Text="Country"></asp:Label>
                    </td>
                    <td style="padding: 5px">
                        <asp:TextBox ID="txtCountry" Text='<%# Eval("Country") %>' Width="100px" CssClass="form-control"
                            runat="server"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </div>
        <div class="modal-footer">
            <asp:Button ID="btnOK" Text="Update" OnClick="OnUpdate" CssClass="form-control" runat="server" />
            <asp:Button ID="btnCancel" Text="Cancel" CssClass="form-control" data-dismiss="modal"
                runat="server" />
        </div>
    </div>
</div>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        dt.Rows.Add(5, "Rohit", "India");
        ViewState["dt"] = dt;
        this.BindGrid();
    }
}

protected void BindGrid()
{
    gvCustomers.DataSource = ViewState["dt"] as DataTable;
    gvCustomers.DataBind();
}

protected void OnInsert(object sender, EventArgs e)
{
    DataTable dt = ViewState["dt"] as DataTable;
    GridViewRow row = ((sender as Button).NamingContainer as GridViewRow);
    string name = (gvCustomers.FooterRow.FindControl("txtName") as TextBox).Text;
    string country = (gvCustomers.FooterRow.FindControl("txtCountry") as TextBox).Text;
    dt.Rows.Add("",name, country);
    ViewState["dt"] = dt;
    this.BindGrid();
}

protected void gvCustomers_RowEditing(object sender, GridViewEditEventArgs e)
{
    gvCustomers.EditIndex = e.NewEditIndex;
    this.BindGrid();
}

protected void gvCustomers_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
    GridViewRow row = (GridViewRow)gvCustomers.Rows[e.RowIndex];
    string name = (row.FindControl("txt1") as TextBox).Text;
    string country = (row.FindControl("txtValue") as TextBox).Text;
    DataTable dt = ViewState["dt"] as DataTable;
    dt.Rows[row.RowIndex]["Name"] = name;
    dt.Rows[row.RowIndex]["Country"] = country;
    ViewState["dt"] = dt;
    gvCustomers.EditIndex = -1;
    this.BindGrid();
}

protected void btnModal_Click(object sender, EventArgs e)
{
    GridViewRow row = ((sender as Button).NamingContainer as GridViewRow);
    lblIndex.Text = (row.FindControl("hfId") as HiddenField).Value;
    txtName.Text = (row.FindControl("lblName") as Label).Text;
    txtCountry.Text = (row.FindControl("lblValue") as Label).Text;
    ClientScript.RegisterStartupScript(this.GetType(), "Pop", "OpenModal();", true);
}

protected void OnUpdate(object sender, EventArgs e)
{
    DataTable dt = ViewState["dt"] as DataTable;
    string id = lblIndex.Text;
    string name = txtName.Text;
    string country = txtCountry.Text;

    foreach (DataRow dr in dt.Rows)
    {
        if (dr["Id"].ToString() == id)
        {
            dr["Name"] = name;
            dr["Country"] = country;
        }
        dt.AcceptChanges();
    }
    ViewState["dt"] = dt;
    this.BindGrid();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        dt.Rows.Add(5, "Rohit", "India")
        ViewState("dt") = dt
        Me.BindGrid()
    End If
End Sub

Protected Sub BindGrid()
    gvCustomers.DataSource = TryCast(ViewState("dt"), DataTable)
    gvCustomers.DataBind()
End Sub

Protected Sub OnInsert(ByVal sender As Object, ByVal e As EventArgs)
    Dim dt As DataTable = TryCast(ViewState("dt"), DataTable)
    Dim row As GridViewRow = (TryCast((TryCast(sender, Button)).NamingContainer, GridViewRow))
    Dim name As String = (TryCast(gvCustomers.FooterRow.FindControl("txtName"), TextBox)).Text
    Dim country As String = (TryCast(gvCustomers.FooterRow.FindControl("txtCountry"), TextBox)).Text
    dt.Rows.Add("",name, country)
    ViewState("dt") = dt
    Me.BindGrid()
End Sub

Protected Sub gvCustomers_RowEditing(ByVal sender As Object, ByVal e As GridViewEditEventArgs)
    gvCustomers.EditIndex = e.NewEditIndex
    Me.BindGrid()
End Sub

Protected Sub gvCustomers_RowUpdating(ByVal sender As Object, ByVal e As GridViewUpdateEventArgs)
    Dim row As GridViewRow = CType(gvCustomers.Rows(e.RowIndex), GridViewRow)
    Dim name As String = (TryCast(row.FindControl("txt1"), TextBox)).Text
    Dim country As String = (TryCast(row.FindControl("txtValue"), TextBox)).Text
    Dim dt As DataTable = TryCast(ViewState("dt"), DataTable)
    dt.Rows(row.RowIndex)("Name") = name
    dt.Rows(row.RowIndex)("Country") = country
    ViewState("dt") = dt
    gvCustomers.EditIndex = -1
    Me.BindGrid()
End Sub

Protected Sub btnModal_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim row As GridViewRow = (TryCast((TryCast(sender, Button)).NamingContainer, GridViewRow))
    lblIndex.Text = (TryCast(row.FindControl("hfId"), HiddenField)).Value
    txtName.Text = (TryCast(row.FindControl("lblName"), Label)).Text
    txtCountry.Text = (TryCast(row.FindControl("lblValue"), Label)).Text
    ClientScript.RegisterStartupScript(Me.[GetType](), "Pop", "OpenModal();", True)
End Sub

Protected Sub OnUpdate(ByVal sender As Object, ByVal e As EventArgs)
    Dim dt As DataTable = TryCast(ViewState("dt"), DataTable)
    Dim id As String = lblIndex.Text
    Dim name As String = txtName.Text
    Dim country As String = txtCountry.Text
    For Each dr As DataRow In dt.Rows
        If dr("Id").ToString() = id Then
            dr("Name") = name
            dr("Country") = country
        End If
        dt.AcceptChanges()
    Next
    ViewState("dt") = dt
    Me.BindGrid()
End Sub