How to Ajax ModalPopup Extender in Asp.Net GridView Control

October 3, 2009
Filed under: ASP.NET, ASP.NET 2.0, Featured, JavaScript 
Introduction
This article helps you more to explore the ModalPopup Extender integrated with Asp.Net GridView control. By reading this article, you will understand the way to show dynamic data in the ModalPopup, edit the data in the ModalPopup extender and save it into database by making a postback.
What we are going to do?

The basic idea of this article is to fetch data from the database, bind it with Asp.Net GridView control, and then we are going to show the values in the server controls placed in the ModalPopup extender and perform an edit/update function from the ModalPopup extender itself. To achieve this, we are going to use WebService which will return the required data as XML, this XML data is captured in the client-side by JavaScript’s XMLDOM object, then we are going to process the XML to fill the controls in the ModalPopup extender. These data can be changed and on postback, these data will be saved in the database. You can place any server controls in the ModalPopup extender.

Sample Scenario

For demonstration, we are going to use customer information from a table called Customers. The primary key column is customer code and its field name is ‘Cus_Code’. The other columns in the customer table is customer name [Cus_Name], Gender [Cus_Gender], City[Cus_City], State [Cus_State] and Customer Type [Cus_Type]. We are going to use TextBox, DropDownList and HiddenField controls in the ModalPopup extender to manipulate these data.

Make GridView control

In your Ajax enabled website’s aspx page, add a GridView control in it and set the DataKeyNames to your primary key (in this case it is Cus_Code), and bind it with your Data source control. Or if you want to bind the GridView control from code-behind, create a private method to fetch data from the database and bind it as follows

private void FillGridViewWithCustomerInfo()
{
string sql = “Select * from customers”;
SqlDataAdapter da = new SqlDataAdapter(sql, “Your connection string”);
DataTable dt = new DataTable();
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
In the Page Load event, call this method to bind the GridView control with the data from the database. Then add a TemplateField column to the GridView. In the ItemTemplate section of this column, drag and drop a HyperLink control, specify the Text property as ‘Edit’. We have to add an client-side onclick event to this hyperlink to show the ModalPopup extender. In the GridView control’s RowDataBound event, add the following code.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HyperLink HyperLink1 = (HyperLink)e.Row.FindControl(“HyperLink1″);
HyperLink1.Attributes.Add(“onclick”, “ShowMyModalPopup(‘” + GridView1.DataKeys[e.Row.RowIndex].Value + “‘)”);
}
}
The second line of the above code, adds the onclick attributes to the HyperLink1, with ShowMyModalPopup as a JavaScript function which takes the value from the DataKeyNames of the GridView control. A DataKeyNames property is an array that contains the names of the primary key fields for the items displayed in a GridView control.

So far, we made all the basic things ready for the GridView control to display data. Now you run the application, the GridView control will be populated with data from the customer table. When the hyperlink is clicked, the ModalPopup extender should come to action with the corresponding data from the selected row. We are going to do this with the help of Webservice method, which will return specific row data in an XML format. This webservice method will be called by the JavaScript method ShowMyModalPopup, and then we will process the XML and extract the data to display in the controls of the ModalPopup extender.

<script language=”JavaScript” type=”text/javascript”> document.write(‘<a href=”http://a.lakequincy.com/c.ashx?channel=1&format=7&pageid=DCD987EF-88AA-5A30-53D2-3FF976FEB260&publisher=224&&ypos=1157&zone=1&country=IN&userguid=4ea0a588-b3a9-48e4-922d-de374b59731f&placement=4128&creative=3104&” target=”_blank”><img src=”http://view.atdmt.com/MRT/view/179321085/direct/01/”/></a>’); </script><noscript><a href=”http://a.lakequincy.com/c.ashx?channel=1&format=7&pageid=DCD987EF-88AA-5A30-53D2-3FF976FEB260&publisher=224&&ypos=1157&zone=1&country=IN&userguid=4ea0a588-b3a9-48e4-922d-de374b59731f&placement=4128&creative=3104&” target=”_blank”><img border=”0″ src=”http://view.atdmt.com/MRT/view/179321085/direct/01/” /></a></noscript>
Make the WebService.asmx

In your application, add a new WebService file and write a method to fetch single row from the customer table and return it in XML format. The webmethod will be as follows

[WebMethod]
public string FetchOneCustomer(string customerid)
{
string sql = “select * from Customers where cus_code=” + customerid;
SqlDataAdapter da = new SqlDataAdapter(sql, “Your connection string”);
DataSet ds = new DataSet();
da.Fill(ds);
return ds.GetXml();
}
The above method will take customer code as argument and fetch the row and it will return the row as XML. So far GridView contol and WebService is ready. Now we can start to work on the ModalPopup extender to display the data for the corresponding selected row from the GridView control.

In order to access the web service from the client-side javascript, we need to add the ScriptService reference in the web service above the class header as follows.

[System.Web.Script.Services.ScriptService]

Design ModalPopup Extender

Drag and drop a ScriptManager, a ModalPopup Extender and a Panel control. Set the PopupControlID and TargetControlID of the ModalPopup Extender as ‘Panel1’. In the Panel control, you put 3 Textboxes to display Customer name, City and State and 2 DropDownList controls to take Gender and Customer Type. Also add a Hidden field to store Customer Code, and 2 Buttons to perform Update and Cancel action. Add a ServiceReference to the ScriptManager and point it to the WebService.asmx. Below we provide the sample code for ScriptManager, ModalPopup Extender and the Panel control

Click here to view Source Code [Show full code..]

So the ModalPopup extender has to appear on the screen along with the data of the corresponding row whenever the user clicks the HyperLink in the GridView control. For this we have write two JavaScript functions, one to show the ModalPopup window with the data and another function to display the data in the control of the ModalPopup extender.

The first JavaScript function is ShowMyModalPopup, which we already set in the HyperLink’s client-side onclick in the GridView’s RowDataBound event. This JavaScript function will be as follows

function ShowMyModalPopup(customerid)
{
var modal = $find(‘ModalPopupExtender1′);
modal.show();
WebService.FetchOneCustomer(customerid,DisplayResult);
}
In the above function, we find the ModalPopup Extender in the web page and show it. The next line of code is calling the webservice method from the JavaScript by passing the customer code and a JavaScript function name to process the result returned by the webmethod. This is the concept of consuming webservice with Asp.Net Ajax. The DisplayResult function takes an argument which is the resultant XML data come from the webservice method, process it with all browser compatibility issues, remove whitespaces in the XML data and set the values to the corresponding server controls in the ModalPopup Extender’s Panel control. Look carefully at the code below to set the values from XML data to Asp.Net server controls in the ModalPopup window.
function DisplayResult(result)
{
var doc;
if (window.ActiveXObject)
{
doc=new ActiveXObject(“Microsoft.XMLDOM”);
doc.async=”false”;
doc.loadXML(result);
}
else
{
var parser=new DOMParser();
var doc=parser.parseFromString(result,”text/xml”);
}




var root=doc.documentElement.childNodes;
var tags;

for(var i=0;i<root.length;i++)
{
if (root[i].nodeType==1)
{
tags=root[i].childNodes;
}
}

for(var i=0;i<tags.length;i++)
{
if (tags[i].nodeType==1)
{
var xmlvalue=tags[i].childNodes[0].nodeValue;

switch (tags[i].nodeName)
{
case “Cus_Code”:
var label=document.getElementById(‘lblCode’);
label.innerHTML=xmlvalue;
document.getElementById(‘hidCusCode’).value=xmlvalue;
break;
case “Cus_Name”:
document.getElementById(‘txtName’).value=xmlvalue;
break;
case “Cus_City”:
document.getElementById(‘txtCity’).value=xmlvalue;
break;
case “Cus_State”:
document.getElementById(‘txtState’).value=xmlvalue;
break;
case “Cus_Type”:
document.getElementById(‘cmbType’).value=xmlvalue;
break;
case “Cus_Sex”:
document.getElementById(‘cmbSex’).value=xmlvalue;
break;
}
}
}
}

Close ModalPopup Extender from JavaScript

To close the ModalPopup Extender, specify the CancelControlID to the Cancel Button and specify the OnCancelScript values as HideModalPopup(). The JavaScript code for HideModalPopup function is

function HideModalPopup()
{
var modal = $find(‘ModalPopupExtender1′);
modal.hide();
}

Save everything, run the application. You can see the GridView control with customer data, when you click on the HyperLink, ModalPopup Extender will appear and the controls will be filled the the data from the selected row. If you click on the cancel button, the ModalPopup will get closed.

Edit Data From ModalPopup Extender

To edit data in the ModalPopup Extender and to save it in the database, we need to perform PostBack from a ModalPopup Extender. Follow the steps to make postback from ModalPopup Extender,

Step 1: Add the below code in Page load event

Button1.OnClientClick=String.Format(“fnClickUpdate(‘{0}’,'{1}’)”, Button1.UniqueID, “”);

Step 2: Add the below JavaScript function in the <script> section.

function fnClickUpdate(sender, e)
{
__doPostBack(sender,e);
}
These two steps will help the ModalPopup Extender to perform Postback actions, and the Button1’s server side click event will get fired, which in turn takes the data from the ModalPopup controls and save it into the database.

To implement this we need to put a Hidden field inside the Panel control and specify its ID as hidCusCode. This Hidden field will hold the primary key, that is the unique customer code, which we are going to use to update the records in the database. The value for this hidden field will be set in the DisplayResult JavaScript function.

Double click on the Update Button, it will create an Button1_Click event in your code-behind file. Write the code here to update the database record with the modified data and call FillGridViewWithCustomerInfo method to bind the GridView control with the updated data as follows

protected void Button1_Click(object sender, EventArgs e)
{
string sql = “Update Customers Set Cus_Name=’”+txtName.Text+”’, others_fields=other_controls.Text Where Cus_Code=”+hidCusCode.Value;
SqlConnection conn = new SqlConnection(“Your Connection String”);
conn.Open();
SqlCommand cmd = new SqlCommand(sql, conn);
cmd.ExecuteNonQuery();
conn.Close();

FillGridViewWithCustomerInfo();
}

Save your application, view it in your browser. You can view GridView Control with customer data, click on the ‘Edit’ link, ModalPopup Extender will appear with data from the selected row, change something and click on the Update Button. Page will get postback and data will be updated in the database and showed in the GridView control.
More Info : click here

Comments

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!





*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image