MODAL PopUp


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();
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}


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.

[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();
}


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


[System.Web.Script.Services.ScriptService]


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');
modal.show();
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";
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 "CustomerName":
document.getElementById('txtName').value = xmlvalue;
break;
case "CustomerCity":
document.getElementById('txtCity').value = xmlvalue;
break;
case "CustomerState":
document.getElementById('txtState').value = xmlvalue;
break;
case "CustomerType":
document.getElementById('cmbType').value = xmlvalue;
break;
case "CustomerGender":
document.getElementById('cmbSex').value = xmlvalue;
break;
}
}
}
}


To close the Modal Popup




function ModalPopup()
{
var modal = $find('ModalPopupExtender1');
modal.hide();
}


To Edit Modal Popup



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


function ClickUpdate(sender, e)
{
__doPostBack(sender,e);
}


follow the usual procedure to update using the button click event


Comments

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
Aloso,
if(svar==1)
{
MPE.show();
}
else
{
MPe.hide();
response.redirect(~/Page2.aspx")
}
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:
    Email: