This Code Snippet Deals With adding Modal PopUp to the UI

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

GridView Control

In Your aspx Page add a grid view Control and set the DataKeyNames to your primary key and bind it with datasource control

private void FillGridViewWithCustomerInfo()
string sql = "Select * from customers";
SqlDataAdapter da = new SqlDataAdapter(sql, "Your connection string");
DataTable dt = new DataTable();
GridView1.DataSource = dt;

In the page load call this to get your grid view binded 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

if (e.Row.RowType == DataControlRowType.DataRow)
HyperLink HyperLink1 = (HyperLink)e.Row.FindControl("HyperLink1");
HyperLink1.Attributes.Add("onclick", "ShowMyModalPopup('" + GridView1.DataKeys[e.Row.RowIndex].Value + "')");

Make the WebService.asmx

add a new WebService file and write a method to fetch single row from the customer table and return it in XML format.

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();
return ds.GetXml();

In order to access the web service from the client-side javascript add,


Design ModalPopup Extender

Drang and Drop a Script Manager and do as follows

Set ServiceReference Path ="webservice name" in between the services tag inside the scriptmanager

refer to the attachment for the popup set up

Java Script Function to display the Modal popup

function ShowModalPopup(customerid) {
var modal = $find('ModalPopupExtender1');;
WebService.FetchOneCustomer(customerid, DisplayResult);

this function is used to remove the white spaces in the XML Data and process with the compatibility issues and set the value to the corresponding server controls

function Desult(result) {
var doc;
if (window.ActiveXObject) {
doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
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;
case "CustomerName":
document.getElementById('txtName').value = xmlvalue;
case "CustomerCity":
document.getElementById('txtCity').value = xmlvalue;
case "CustomerState":
document.getElementById('txtState').value = xmlvalue;
case "CustomerType":
document.getElementById('cmbType').value = xmlvalue;
case "CustomerGender":
document.getElementById('cmbSex').value = xmlvalue;

To close the Modal Popup

function ModalPopup()
var modal = $find('ModalPopupExtender1');

To Edit Modal Popup

To edit data in the modal popup we have to do some postback

function ClickUpdate(sender, e)

follow the usual procedure to update using the button click event


Author: Learning25 Feb 2011 Member Level: Silver   Points : 1

what if I am not using xml. but just want to display one datakey variable in the MPE
howshould i do this

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: