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>
<add name="HoneyConnectionString" connectionString="Data Source=adc-pc;Initial Catalog=honey;Integrated Security=True" providerName="System.Data.SqlClient"/>
</connectionStrings>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<Ajax:ToolkitScriptManager ID="ToolkitScriptManager1"
runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<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">
<RowStyle BackColor="White" ForeColor="#330099" />
<Columns>
<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>
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
</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">
<Columns>
<asp:ButtonField Text="Update" CommandName="Update"/>
<asp:TemplateField HeaderText="First Name">
<ItemTemplate>
<asp:TextBox ID="txtFirstName" runat="server"
Text='<%# Bind("FirstName") %>'/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name">
<ItemTemplate>
<asp:TextBox ID="txtLastName" runat="server"
Text='<%# Bind("LastName") %>'/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Country">
<ItemTemplate>
<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">
<SelectParameters>
<asp:Parameter Name="EmployeeID" Type="Int32" />
</SelectParameters>
<UpdateParameters>
<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:
![design-view-ajax-modal-popup-extender.jpg]()
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.
![model-popup-window.jpg]()
Just Change the field value you want and the output will be like this below:
![output-model-popup-window.jpg]()
Enjoy coding. I hope you will like my article.