Update Record in GridView Using Modal Popup Extender

Today I am going to show you the use of the Ajax Model Popup Extander control and in this article I am going to explain how to update a record in a GridView using a modal popup extender.

Prerequisites

Visual Studio 2005, 08, or 10
SQL Server 2005, 08
AjaxControlToolkit.dll

If you don't have ajaxcontroltoolkit then you can download it from here:

http://ajaxcontroltoolkit.codeplex.com/releases/view/90063

After downloading it install it via toolbox in Visual Studio; create a new tab in toolbox via right-click and add a new tab, rename it to ajax and then right-click on it and choose item and then browse to the location where you have downloaded the ajaxcontroltoolkit35.dll to and add it and click ok.

Save this connection string into you web.config file:

</connectionStrings>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

<Ajax:ToolkitScriptManager ID="ToolkitScriptManager1"

runat="server"/>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:GridView ID="GridView1" runat="server"

AutoGenerateColumns="False"

DataKeyNames="EmployeeID"

DataSourceID="SqlDataSource1"

onrowcommand="GridView1_RowCommand" BackColor="White"

BorderColor="#CC9966" BorderStyle="None"

BorderWidth="1px" CellPadding="4" Width="550px">

<asp:ButtonField Text="Edit" CommandName="OpenPopUp"/>

<asp:BoundField DataField="EmployeeID" HeaderText="ID"

InsertVisible="False" ReadOnly="True"

SortExpression="EmployeeID"/>

<asp:BoundField DataField="FirstName" HeaderText="FirstName"

SortExpression="FirstName"/>

<asp:BoundField DataField="LastName" HeaderText="LastName"

SortExpression="LastName"/>

<asp:BoundField DataField="Country" HeaderText="Country"

SortExpression="Country"/>

</Columns>

</asp:GridView>

<asp:Label ID="lblMessage" runat="server"/>

<asp:Button ID="btnPopUp" runat="server"

style="display:none" />

<Ajax:ModalPopupExtender ID="modalPopUpExtender1"

runat="server"

TargetControlID="btnPopUp"

PopupControlID="pnlModalPopUp"

BackgroundCssClass="modalBackground"

CancelControlID="btnCancel"

X="20"

Y="100">

</Ajax:ModalPopupExtender>

<asp:Panel runat="Server" ID="pnlModalPopUp" BackColor="Azure"

BorderColor="Beige" BorderStyle="Inset">

<asp:GridView ID="EditGridView" runat="server"

AutoGenerateColumns="False"

DataKeyNames="EmployeeID"

DataSourceID="SqlDataSource2">

<asp:ButtonField Text="Update" CommandName="Update"/>

<asp:TemplateField HeaderText="First Name">

<asp:TextBox ID="txtFirstName" runat="server"

Text='<%# Bind("FirstName") %>'/>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Last Name">

<asp:TextBox ID="txtLastName" runat="server"

Text='<%# Bind("LastName") %>'/>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Country">

<asp:TextBox ID="txtCountry" runat="server"

Text='<%# Bind("Country") %>'/>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource2" runat="server"

onupdated="SqlDataSource2_Updated"

ConnectionString=

"<%$ ConnectionStrings:HoneyConnectionString %>"

SelectCommand="SELECT [EmployeeID], [LastName], [FirstName],

[Country] FROM [normal]

WHERE ([EmployeeID] = @EmployeeID)"

UpdateCommand="UPDATE [normal] SET [LastName] = @LastName,

[FirstName] = @FirstName, [Country] = @Country

WHERE [EmployeeID] = @EmployeeID">

<asp:Parameter Name="EmployeeID" Type="Int32" />

</SelectParameters>

<asp:Parameter Name="EmployeeID" Type="Int32" />

<asp:Parameter Name="FirstName" Type="String" />

<asp:Parameter Name="LastName" Type="String" />

<asp:Parameter Name="Country" Type="String" />

</UpdateParameters>

</asp:SqlDataSource>

<asp:Button ID="btnCancel" runat="server"

Text="Cancel"/>

</asp:Panel>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString=

"<%$ ConnectionStrings:HoneyConnectionString %>"

SelectCommand="SELECT [EmployeeID], [LastName],

[FirstName], [Country] FROM [normal]">

</asp:SqlDataSource>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Your default.cs file will be like this:

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)

{

if (e.CommandName == "OpenPopUp")

{

lblMessage.Text = "";

int rowIndex = Convert.ToInt32(e.CommandArgument);

int id = Convert.ToInt32(GridView1.DataKeys[rowIndex].Value);

SqlDataSource2.SelectParameters["EmployeeID"].DefaultValue = id.ToString();

modalPopUpExtender1.Show();

}

protected void SqlDataSource2_Updated(object sender, SqlDataSourceStatusEventArgs e)

{

GridView1.DataBind();

lblMessage.Text = "Record Updated";

}

Your code will look in design view like this:

And when you click on Edit then a modalpopup will popup and in this window you can update a record via clicking on the update button or you cancel the update. The following is the modalpopup window.

Just Change the field value you want and the output will be like this below:

Enjoy coding. I hope you will like my article.

4 Comments

Join the conversation! Your thoughts help the community grow.

Santosh Yadav13y ago
very nice post.
tom linker14y ago
This article really helpful for us. because it works without any database.
Swati Agarwal14y ago
good article,it helps me a lot..
Varshika Jain14y agoedited
If i want to delete the record then how can i do it.....