AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
Questions & Answers
Tips & Tricks
 Ajax ModalPopup Extender in Asp.Net GridView Control
Posted by Moderator1 on 7/18/2007 5:16:14 PM Category: AJAX
Total Views : 391588
Add to my favorites
Email to friend
  
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.
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 HyperLink
 
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="WebService.asmx" />
</Services>
</asp:ScriptManager>

<asp:Panel ID="Panel1" runat="server" BackColor="LightGray" Height="269px" Width="428px" style="display:none">
Customer # : <asp:Label ID="lblCode" runat="server" Text="Label"></asp:Label> <asp:HiddenField ID="hidCusCode" runat="server" /> <br/>
Name: <asp:TextBox ID="txtName" runat="server"></asp:TextBox><br/>
Gender: <asp:DropDownList ID="cmbSex" runat="server"> <asp:ListItem Value="M">Male</asp:ListItem> <asp:ListItem Value="F">Female</asp:ListItem> </asp:DropDownList><br/>
City:<asp:TextBox ID="txtCity" runat="server"></asp:TextBox><br/>
State:<asp:TextBox ID="txtState" runat="server"></asp:TextBox><br/>
Type:<asp:DropDownList ID="cmbType" runat="server" > <asp:ListItem Value="Retailer">Retailer</asp:ListItem> <asp:ListItem Value="Wholesale">Wholesale</asp:ListItem> </asp:DropDownList><br/>
<asp:Button ID="Button1" runat="server" Text="Update" OnClick=" Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Cancel" />
</asp:Panel>

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" TargetControlID="Panel1" BackgroundCssClass="modalBackground" CancelControlID="Button2" OnCancelScript="HideModalPopup()"> </cc1:ModalPopupExtender>  
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.
Click here to view our Sample ModalPopup with GridView control
 
Viewer's Comments
Posted by Jakal on 7/27/2007 11:16:00 AM
Thanks for the article. Found it very useful in implementing modal popop dynamically.
 
Posted by shrouk on 7/30/2007 11:47:39 PM
hi, your sample code for ScriptManager, ModalPopup Extender and the Panel control does not show! is that an collapsible panel, becuase it is not working, neither the link beside it (the one that says: Click here to view Source Code HyperLink) please check! your code has been most helpful for me so far. But i can not do anything without that part Thnx in advance shrouk
 
Posted by Mia on 8/3/2007 9:42:57 AM
Hi shrouk, the sample code doesn't show if you link through 123asp, but it shows in http://www.aspdotnetcodes.com/Ajax_ModalPopup_PostBack_GridView.aspx
 
Posted by kevin on 8/14/2007 2:54:26 PM
Great article, I'm trying to implement this in a site that I'm building. I'm using the Clubsite starter kit, and am working in VB, so obviously these steps need to be tweaked a bit. Is there an guide on how to implement this in VB? I think I've got the WebService created in VB, but nothing else. Thanks! Kevin
 
Posted by Angela on 8/14/2007 9:28:11 PM
I am so grateful for people who give examples on the web. I am working with creating my own simple page that allows someone to enter categories...However, the hyperlink is not working...I am extremly new to 2.0 and am an old web developer is classic asp who has worked with the messy side for DOM and AJAX programming client side. I am finding it fustrating trying to go through another layer to get what I want done (which I could simply write).. Feel like I am an old Assembly coder...trying to l
 
Posted by Angela on 8/14/2007 9:30:29 PM
okay previwous comment got truncated would have been nice to know upfront instead of a light greay back ground saying 500 letters in a place my eye would not follow to when filling out this form. Anyway, is there any chance you could give a full example including the .cs and the aspx code? It would help me out greatly....
 
Posted by Odiaz on 8/29/2007 3:31:55 PM
Greate Article. I am getting an error when the modal screen popsup. WebService is undefined. When I invoke the webservice outside of this app i see the dataset comming back the way its supposed to. Anyone else have this challenge? thanks
 
Posted by Ratnakar Garikipati on 10/8/2007 6:29:40 PM
nice post but would have been even better if you could show the changed values in the grid without refreshing the page.
 
Posted by raghav on 10/9/2007 11:16:57 AM
hello... can u send me ur "Grid view, modal popup " solution in asp.net "vb" language. I hv tried so many days but I m unable update contains in "modal popup". Plz help me...... waiting for ur help.
 
Posted by Stéphane on 10/19/2007 9:29:35 PM
Really, really great article. It's just what I was looking for (for a few days...). I found a lot of examples with an update panel to hide the postback to the server but your example fit the bill perfectly. Thanks a lot
 
Posted by Kalpen on 10/30/2007 1:06:04 PM
Thank you very much for this article. I have used this one and customised it to fit my need but I am running into couple of problems. 1) When I click on a grid item, unlike your sample application, my page does complete post back, loads all the data on the page and then it displays ModalPopup panel. It would be great if simply displays the panel without reloading the entire page. 2) Also, I have a dropdown and a checkbox on that panel. I can operate dropdown and change selection to whatever
 
Posted by Hannah on 11/13/2007 11:11:46 AM
For some reason, I can't get the modal to popup! Can anyone give me a hand? Please... Thx.
 
Posted by Ambuj on 11/16/2007 5:13:25 AM
Excellent article, solved my problem!
 
Posted by Ben on 11/26/2007 5:54:54 AM
Fantastic Article! Thank you so much for doing this! As a helper to anyone else out there who can't invoke the WebService through javascript lamke sure that you have _ defined just before the Class definiyion. _ _ Public Class WebService This allows javascript to see the WebService class for calling.
 
Posted by Ben on 11/26/2007 5:56:53 AM
Sorry my post got rendered as html. make sure that ScriptService() is defined just before the class definition in your WebService.asmx < ScriptService() >_
 
Posted by Ajax on 12/14/2007 7:31:07 AM
werrrrrrrrrrrrrrrrrrrr
 
Posted by subramanyam on 12/15/2007 8:41:36 AM
good article! very use full thanku very much
 
Posted by Mark on 12/19/2007 10:55:25 AM
Great one. Wish this was in VB.Net
 
Posted by nmnm on 12/31/2007 4:47:45 AM
bnmmmmmmmmmmmmmmmmmmm
 
Posted by nmnm on 12/31/2007 4:48:39 AM
wwwwwwwwwwww
 
Posted by nmnm on 12/31/2007 4:48:51 AM
df
 
Posted by von on 1/7/2008 9:44:02 AM
can anyone send full source code...? thanks!
 
Posted by Ramy BEN KHOUD on 1/19/2008 1:21:00 AM
I sepent a few days trying to understand why I am getting an error with $find, Identifier expected. I would appreciate you can provide
 
Posted by gorhal on 1/27/2008 1:54:46 AM
Good article! Ramy here is a great article from Mattt Berseth(as always) and of course there is sourcecode: http://mattberseth.com/blog/2007/07/modalpopupextender_example_for.html
 
Posted by keerthana on 2/4/2008 11:20:43 PM
Thanks a lot for posting this article..
 
Posted by Good on 2/13/2008 5:58:04 AM
I am not abale to call webserviess method from javascript...is nay thing missing? please Help me
 
Posted by Sougandh Pavithran on 2/29/2008 12:48:02 PM
Thanks a lot for this posting. Trust me you saved my life. I was trying really hard to get a break through with this. And your article was really of tremendous help. Best Regards Soggi.
 
Posted by Sougandh Pavithran on 2/29/2008 12:48:05 PM
Thanks a lot for this posting. Trust me you saved my life. I was trying really hard to get a break through with this. And your article was really of tremendous help. Best Regards Soggi.
 
Posted by Aditi on 3/6/2008 2:27:31 AM
awesome article, thanx
 
Posted by Dan on 3/14/2008 10:31:24 AM
For anyone struggling to invoke the WebService from javascript, add System.Web.Script.Services.ScriptService() before the Public Class WebService in your asmx server code .
 
Posted by Nishant Saxena on 3/17/2008 4:20:56 PM
Good Effort.....very helpful example....thxs
 
Posted by Conrad Chester on 3/19/2008 9:39:27 AM
I've implemented your code, but I took my own tabel from a SQL 2005 db with only 3 fields. Everything seems to work except that when I click the hyperlink to display the data nothing is displayed in the textbox that I specified. Could you please help with this as I'm struggeling to find the problem.
 
Posted by sridhar on 3/26/2008 6:22:37 AM
i read this article..... it is good.. but i face some problem while doing this article...... actually the problem is........ in gridview itemtemplate section i can place one hyperlink control....regarding this article, but it cannot show like general hyperlink .Just it shows the black letters only... whenever i click the hyperlink no action to be done....... please any one help me advance thanks.............
 
Posted by sivaprakas on 3/27/2008 10:00:54 PM
hi i try this coding i got the javascript error 'WebService is undefinded'
 
Posted by Chris on 3/29/2008 6:06:31 PM
Help...This article is awesome, except the hyperlink is not clickable until I put a NavigateURL in and then it doesn't work... Someone please Help :-)
 
Posted by rakesh kapuriya on 4/19/2008 8:53:32 AM
i got an javascript error when i click on edit link. error is : "webservice" is undefined. I already reference the webservice in aspx page. Why this error come? Awaiting for answer...
 
Posted by ???898 on 4/19/2008 11:27:26 PM
8?899
 
Posted by lovely_today on 4/22/2008 8:39:48 AM
I would really like if someone who has got this to work in vb.net to send me the source code. I have a few problem with it and can´t get it to work. It´s a very nice example.
 
Posted by ws on 4/23/2008 11:21:39 AM
error : "webservice" is undefined. I got this too. My solution was add to webservice(http://asp.net/learn/ajax-videos/video-182.aspx) also, had **** javascript case sensitive differences hope that helps
 
Posted by Ellen on 4/24/2008 2:49:35 AM
I have also problem with that the link is not clickable, I change to div as suggested above but it still doesn´t open the modalpopup.
 
Posted by Shailendra on 4/30/2008 6:05:48 AM
I have the same problem as Chris i.e. onclick of hyperlink does not work here. I m ok till u suggested using div but what code do i write to find the control and pass grid customerid to javascript... pls help ...
 
Posted by Baka on 5/26/2008 6:28:13 AM
do to get the return value from a modal popup?
 
Posted by Pavan kumar on 6/3/2008 3:50:15 AM
The Article is very nice.It will be much better if u give the sample code to download it. anyway thanks.
 
Posted by Rita on 6/4/2008 2:38:27 PM
Thanks for the code.. but i am experiencing a problem.. the webservice's method is being populated with the table's data but when i try to open the popup it is giving me an error in modal.show where it is telling me "Microsoft JScript runtime error: 'null' is null or not an object!!
 
Posted by Norm on 6/17/2008 1:03:32 PM
Is there anyway you could send me the Source code. In C# please. Great article
 
Posted by jj on 6/19/2008 10:54:49 PM
j
 
Posted by Shilpa on 6/19/2008 11:29:09 PM
hello, Thanks for the code, every thing works except that when the page is first loaded and when i click the edit link except the title field value all the others are shown in the panel, but when i click edit link for the last record of the gridview the title value appears in the panel. So if i want to see all the values from the database in the panel i need to click on the last row first. I dont understand why is this happening is it got something to do with the xml.
 
Posted by Hun on 6/24/2008 12:15:37 AM
Thanks for the code.
 
Posted by Muhammad Amjad on 7/2/2008 5:33:36 AM
Edit in Grid View is not working could u please send me complete code.
 
Posted by bryan on 7/2/2008 10:46:34 AM
excellent example... i took it one step further and added a link under the grid view to ADD new records in the same way (using a modal pop-up) ...everyting is fine However sometimes I lose the drop-down-lists in the modal pop-ups (both for update or for adding new) i don't change anything ...just click the edit link to call the modal pop-up for updating and hit cancel to close it then click on the other link to add new and subsequently click cancel to close...i go back and forth and after
 
Posted by bryan on 7/2/2008 10:46:35 AM
excellent example... i took it one step further and added a link under the grid view to ADD new records in the same way (using a modal pop-up) ...everyting is fine However sometimes I lose the drop-down-lists in the modal pop-ups (both for update or for adding new) i don't change anything ...just click the edit link to call the modal pop-up for updating and hit cancel to close it then click on the other link to add new and subsequently click cancel to close...i go back and forth and after
 
Posted by bryan on 7/2/2008 10:47:34 AM
sorry about extra post
 
Posted by bryan on 7/2/2008 10:48:30 AM
...i go back and forth and then suddenly i lose the drop down lists in either modal popups ??? any ideas, do u need to see my solution
 
Posted by Naga on 8/28/2008 5:35:31 AM
Hi, Great example. I am using visual studio 2008, in that it has Ajax extensions how i get the ModalPopupExtender control so......
 
Posted by Feng on 9/3/2008 7:58:26 AM
I don't understand how the sample works as the property of TargetControlID was set as "Panel1", which is not the one to activate the modal popup. If you set TargetControlID ="HyperLink1", then you get the error: A control with ID 'HyperLink1' could not be found
 
Posted by Chris on 9/6/2008 12:07:38 PM
Hi, I want to place checkboxes on the modal update panel. But I don't get them to work. Seems to be an issue of the target control ID of the Extender. Does somebody have a solution for this? Please help!
 
Posted by Smit on 9/17/2008 3:40:40 AM
i got object requierd error for fuction display result
 
Posted by ouz on 9/25/2008 5:17:42 AM
this is not working textbox or dropdownlist are not posting value
 
Posted by Simone on 10/2/2008 9:13:30 AM
I've the error: "The webservice is undefined" but i've set "" in the web service class file. Anyone can help me? Can i've the sample code? thanks Simone
 
Posted by Simone on 10/2/2008 9:15:22 AM
I've the error: "The webservice is undefined" but i've set in the web service class file. Anyone can help me? Can i've the sample code? thanks Simone
 
Posted by Simone on 10/2/2008 9:16:26 AM
I've the error: "The webservice is undefined" but i've set System.Web.Script.Services.ScriptService() in the web service class file. Anyone can help me? Can i've the sample code? thanks Simone
 
Posted by Simone on 10/2/2008 9:31:08 AM
Sorry, all works fine.I wrong the web service path :) Thanks. Simone
 
Posted by bala on 10/9/2008 6:58:47 AM
fine.... if i am clicking the Hyperlink button... every time page s loading.... i am not using updatpanel..
 
Posted by sangeetha on 10/10/2008 12:58:49 AM
Really superb i got lot of ideas to implement the modal popup
 
Posted by Esh on 10/15/2008 12:53:25 PM
Very Good. Full Source code is needed though.
 
Posted by Chai on 10/20/2008 7:44:21 AM
Can we do the postback event on the layer level and keep the layer page up until we hit the save button. I have a project that need to have an update but on the layer I will have some post back control which eveytime I do the post back on the layer it will re-direct me to the main gridview page. thanks, Chai
 
Posted by Asim on 10/28/2008 11:54:09 PM
It is very nice artical, Thanks dear.
 
Posted by Imtiyaz on 10/29/2008 2:44:21 AM
Excellent article. Greatness is in its clarity and simplicity.
 
Posted by Panks on 11/10/2008 2:18:40 AM
Hi It's an excellent concept, however it is giving me an error " The server method 'FetchOneCustomer' failed with the following error:System.Xml.XmlException--Root element is missing" so please guide me.... Thanks
 
Posted by lalithashree on 11/14/2008 12:20:43 AM
hi i have a problem with my modalpopupextender. i have used user control. in that user control i used text box and two buttons first search and last search are the two buttons. based on the input given the text box first search will get the first record from the active directory.general serach will get all the records related to the input. and i am using gridview with in panel to display the records. but if i use the modalpopupextender i am not getting gridview display with modal popup it is w
 
Posted by lalithashree on 11/14/2008 12:23:00 AM
it is working fine without modal popup
 
Posted by Arul on 12/5/2008 3:19:12 AM
Very Excellent article
 
Posted by trinds on 12/12/2008 7:59:26 AM
Nice Artical
 
Posted by Abhishek Nigam on 12/18/2008 6:34:18 AM
awesome article dude.....!!!! this will help many programmers......
 
Posted by Baoping on 1/1/2009 5:05:47 AM
What an excellent artical ! Thx alot !
 
Posted by Falak on 1/16/2009 2:33:10 PM
Hi this is really nice but I want to do postback on buttonclick of modalpopup and want to get some value and show them in same modalpop up Here actually onclick of button of modalpopup we get the back screen and loosing modal pop up which i dont want Give me some ideas Thanks In Advance Brilliant Person
 
Posted by Moe on 1/18/2009 12:44:48 AM
For people who are struggling with $find , you might not using the correct client ID, for example if you you are using master page the ID could looks like ctl00_ContentPlaceHolder1_ModalPopupExtender1 to get the exact ID, view the source code on IE or firefox and search for ModalPopupExtender1 so get the full ID. and then use the full id with the find and might $find(ctl00_ContentPlaceHolder1_ModalPopupExtender1) Hope That help
 
Posted by Rachna Kejariwal on 1/27/2009 11:42:43 PM
I had implement almost similar coding in my modalpopup extender, but I dont know why does the popup just appear and vanish even before i can do something. I have used the function EditAccount(varId) { var modal = $find('mdlPopup'); modal.show(); WebService.GetUserAcc(varId, onComplete); return false; } function onComplete(args) { for (i = 0; i < args.length; i++) { document.getElementById('Text1').value = args[i].AccountName; document.
 
Posted by Vj on 1/30/2009 12:35:44 AM
hi, I do display a modal pop up on a link utton click. I use a hidden button as the TargetControlID for the modal pop up. And on link click i give mpe.Show() where mpe is my PodalPopUpExtender. I get a java script error saying "Object Required". Can you help me in this regard?
 
Posted by Vlad on 1/30/2009 3:21:42 AM
Thank u so much, your example include almost all the functioinality that I needed for my project. I have spent too much time looking for something like that.
 
Posted by John Ford on 2/9/2009 9:55:42 AM
Thank U for this article. It really got me started in the right direction. I have covert this to a VB.NET solution and everything is working well. Edit Link in my gridview shows the modalpopup my service excecutes and I have all the fields populating. Looks great so far. Only strange thing in order to get my edit textboxes etc available I add to remove the extender add the fields and the put the extender back on the page. Maybe a VisualStudio Bug??
 
Posted by John Ford on 2/9/2009 9:57:34 AM
*** Correction *** Only strange thing in order to get my edit textboxes etc available I in my code behind I had to remove the extender add the fields and the put the extender back on the page. Maybe a VisualStudio Bug??
 
Posted by HM on 3/10/2009 12:20:43 PM
Where do you add the javascript in? I've tried putting it in a <script> area on the page, but the modal object isn't accessible as it has it's container name prepended to it, but this seems to be updated automatically in your script. Is there anywhere where the complete source code is accessible please? I've had another example on from this site that I had to poke around with a lot to get it working, merely because the explanation wasn't comprehensive and no src was available. Thx HM
 
Posted by Tasnim on 3/24/2009 7:50:44 AM
hi, could u send me the whole sourcecode for this. regards, tasnim.
 
Posted by pravesh on 4/12/2009 8:50:43 AM
your blog is awesome. could u plz send me the soucce code for this complete.
 
Posted by Sreekanth on 4/12/2009 4:26:12 PM
Your blog is good and very helpful. Please send me the source code for this example.
 
Posted by Buven on 4/13/2009 9:28:55 AM
Could you, please send me the source code too? i'm stuck with access to web service.
 
Posted by Wissam Bishouty on 4/30/2009 2:26:37 AM
Greetings, Thank you for the useful article. Instead of creating hidden field you can use the lblCode.Text in updating the Customer Info. Regards.
 
Posted by Madhu on 5/12/2009 10:17:06 AM
Hi, when the model popup display why the dropdown hide in parent screen especially in IE 6
 
Posted by Ashish Chadha on 5/14/2009 12:29:08 AM
Hi nice article.But i tried this example but my Hyperlink button does not work and modal popup is not open..pleae help me out.
 
Posted by Ashish Chadha on 5/14/2009 12:30:28 AM
I am lacking somewhere..So help me out,if possible send the source code for this
 
Posted by ashish on 5/14/2009 2:12:01 AM
Microsoft JScript runtime error: Object doesn't support this property or method.. What is the solution for this error
 
Posted by reza on 5/24/2009 1:47:53 AM
Good job, how can I download the article source code?
 
Posted by Malleswar on 6/6/2009 3:01:11 AM
Modal pop up
 
Posted by Sussai on 6/15/2009 5:57:19 AM
good articles
 
Posted by Vivivkika on 6/15/2009 5:58:35 AM
Very nice article but no proper flow in presenting code
 
Posted by t on 6/22/2009 2:19:10 PM
Excellent! Never knew how to call a web service from client script. Super helpful... makes my UI much better (no postback clicking and flashing).... Thanks very much, two full years after the fact!
 
Posted by Eldhose.K.Joy on 7/1/2009 10:02:14 AM
This article is very good. But if there is no value in a filed in database,is if the field value is empty, its showing javascript error.
 
Posted by Eldhose.K.Joy on 7/1/2009 10:02:35 AM
This article is very good. But if there is no value in a filed in database,is if the field value is empty, its showing javascript error.
 
Posted by aRJean on 7/17/2009 10:31:45 PM
this article is very helpful. Thanks for the info. but how will i use this for an access based project?
 
Posted by nn on 8/2/2009 3:06:33 PM
j
 
Posted by Retox on 8/2/2009 3:07:58 PM
Hi does anyone have the full source code preferably in vb thanks
 
Posted by tim on 8/3/2009 4:43:15 AM
has anyone got this workining in vb please comment back
 
Posted by Sahil on 8/26/2009 9:51:59 AM
I've the error: "The webservice is undefined" but i've set System.Web.Script.Services.ScriptService() in the web service class file. Anyone can help me? Can i've the sample code? thanks Simone
 
Posted by Ruhani on 9/9/2009 11:14:13 PM
Hi I am facing some issue with javascript. function ShowMyModalPopup(customerid) { var modal = $find('ModalPopupExtender1'); modal.show(); WebService.FetchOneCustomer(customerid,DisplayResult); } the code which i referred: But i am not getting the show() intellisense. How to get this. can anyone please explain how to get this.
 
Posted by frustrated on 9/12/2009 1:39:58 PM
Does anyone out there have problem putting this all together? The instructions are incomplete and I am struggling to get the code to work.
 
Posted by ms on 9/12/2009 1:56:41 PM
I do not get this instruction "Add a ServiceReference to the ScriptManager and point it to the WebService.asmx." Can anyone help me on this part? Thanks alot.
 
Posted by Allen on 9/23/2009 11:58:23 PM
WebService.FetchOneCustomer(customerid,DisplayResult); get error with "WebService" is undefined someone can help? thanks,
 
Posted by Shrikanth on 10/17/2009 2:43:25 AM
I have given a iframe in a panel. This panel I opened in the ModalPopupExtender. But the close button is there inside the src page of the Iframe. Now by clicking this cancel buuton I want to hide the Model popup. and also by clicking save I want to close the modal popup and refresh the main page. Please suggest me how can I achieve this with maximum utilization of the client side, and by using javascript also.
 
Posted by Geller on 10/27/2009 2:44:44 AM
hi, I didn't get the hyperlink(edit link) in the Gridview... anyone knows about it??? Thanks
 
Posted by aruna on 11/10/2009 6:29:19 AM
Nice Article
 
Posted by Nash on 11/26/2009 11:22:01 AM
After some testing.. This seems to be working in 'web site' type of projects. However, in 'web application' type of projects, it is poping "WebService is undefined" error. Any1 got any idea why?
 
Posted by Ibrahim Yaser on 12/7/2009 9:28:28 AM
could you please, post the code sample for this article, that will be a great help from you !!!
 
Posted by anand on 12/21/2009 8:01:49 AM
Microsoft JScript runtime error: Object expected Anyone please help me out . I m getting this error msg after implementing above code to modify the gridview using modal popup.
 
Posted by Faust on 12/31/2009 3:28:06 AM
Very useful article. However I have a problem with the gridview_rowdatabound section where I got a NullReferenceException (e.Row.RowIndex). Any idea why guys?
 
Posted by James on 1/8/2010 7:19:54 AM
For those who are experiencing problems with using $find() in a content page (and a suggestion of best practice), using the following: var modal = $find('<%=ModalPopupExtender1.ClientID%>'); This ensures you get the modified client ID when a control is nested in a content page or nested master page.
 
Posted by Rajesh Reddy on 1/20/2010 10:31:32 PM
Nice one
 
Posted by komalnaidu on 2/16/2010 10:17:17 PM
very nice article , iam facing problem in firing the hypderlink click event, modalpup is not populating...can u send me the source coide in c#
 
Posted by Abhishek on 2/17/2010 2:26:47 PM
Can u send me code of this application
 
Posted by Tim on 3/17/2010 9:24:39 PM
This looks like a really good tutorial but I’m having a hard time following it because I’m fairly new to programming. Could you please send me the code or provide a link so I can download it?
 
Posted by Tim on 3/17/2010 9:26:15 PM
I sent the wrong email. This looks like a really good tutorial but I’m having a hard time following it because I’m fairly new to programming. Could you please send me the code or provide a link so I can download it?
 
Posted by Mike on 3/18/2010 2:44:17 AM
Thank you very much it helps me a lot.
 
Posted by Guoxin on 3/21/2010 8:11:30 PM
Excellent. I like this article very much and thanks very much. May I know what is the css of modalBackground? Many thanks.
 
Posted by fred on 3/31/2010 5:50:01 AM
please email me Full Source code Thank you
 
Posted by Josh on 4/12/2010 8:56:42 PM
Could you send me the full source, please? I always have the webservice is undefined error message...
 
Posted by Angus on 4/13/2010 1:31:55 PM
where can i find the source code for this example?
 
Posted by Excellent on 4/15/2010 5:17:33 PM
This is Great!
 
Posted by tanweer on 5/11/2010 4:52:06 AM
hello this was a good post I got help from this so thank you
 
Posted by mahendra suryavanshi on 5/13/2010 10:56:59 PM
how to use ajax modalpopup extender in visual studio 2008
 
Posted by ratan on 5/21/2010 5:58:37 AM
he i tried the above code but getting problem my modalpopup window in not getting filled up when i click on gridviews linkbutton i.e gridviews's data is not going in popups's textboxes
 
Posted by agnieszka on 6/16/2010 3:26:40 AM
Its a very nice article, but the data in popup panel display with delay.
 
Posted by Gaurav Rana on 6/27/2010 6:13:22 AM
It was a really nice article. Can u send me the code of this article? Thanks..
 
Posted by krishna on 7/20/2010 7:28:39 AM
Good Article, can u pls send me the complete code.....
 
Posted by Mark Richman on 7/23/2010 2:58:49 PM
How do you force client-side validators like RequiredFieldValidator to function within fnClickUpdate()???
 
Posted by Seeto on 7/26/2010 10:28:07 PM
I must be missing something, cannot get it to work properly, Can i pls have full source code to?
 
Posted by uityu on 8/9/2010 5:58:47 AM
fgdgsg
 
Posted by Adapa Vijay Kumar on 9/9/2010 12:00:12 AM
Hi Shrouk, Good Morning Can u please Complete code using C#.net which will be help full for me. And i want to show popup when user clicks on a row not on edit button. Can u Please send the code
 
Posted by Ramesh on 10/5/2010 12:18:31 PM
Good one. Can you please send full source with database details to my mail. Thanks Ramesh
 
Posted by Amit on 11/2/2010 8:12:46 AM
I am having a problem line object is not null
 
Posted by Amit on 11/2/2010 8:15:18 AM
please provide me the soloution if any one have because i am facing this problem from last five days and all my work is pending. plz do anything.
 
Posted by Jim on 11/29/2010 1:52:12 PM
I just looked at the source from the working demo and it doesn't exactly match what you have posted in this article. I can see who this would lead to confusion (hence the great number of comments/questions). Do us all a favor and post the "working" source code.
 
Posted by Mohan Gajula on 11/30/2010 6:47:01 AM
Thanks for coming with a superb article.. I'm loving it.. Mohan Gajula http://iMohanG.blogspot.com
 
Posted by Prashant Bhambar on 12/7/2010 2:29:43 AM
thanks for this article, but it's not working in my example. when i clicked on edit button page get refreshed instead of opening Po-pup. Plz help me
 
Posted by Hiranmoy Mondal on 1/12/2011 10:22:38 AM
please give the code of grid that you explained in the above example because there is a problem in hyperlink button it is not opening the modal popup window. pls pls pls......... Thanks in advance
 
Posted by faiz on 3/15/2011 1:24:54 PM
hi i the code is nice and i want to use it but i am confused about ModalPopup how i can get it . please explain for me
 
Posted by britella on 8/24/2011 10:34:42 PM
why is it that my show modal pop up not appear.pls help thnx
 
Posted by barsa on 9/9/2011 12:57:33 AM
hi, can u send me the whole source code
 
Posted by Stu on 9/29/2011 10:21:02 AM
Great presentation. I have tried accessing function to show modal popup 2 ways: 1) javascript function - error "null value" on line "modal.show()". 2) function in code-behind - error "jscript error: object expected". Also error WebService is undefined. Any help would be appreciated. Thank you
 
Posted by Eduardo on 11/20/2011 8:02:34 AM
Stu, see 'Posted by James on 1/8/2010 7:19:54 AM'
 
Posted by Schap on 12/16/2011 8:46:26 PM
"WebService is undefined" is likely due to a missing namespace reference, which was not necessary in the exampe project provided. For reference: http://omensblog.blogspot.com/2007/07/aspnet-ajax-web-service-calls-from.html
 
Posted by Iris on 5/22/2012 9:18:22 PM
GREAT article. Thanks you VERY MUCH. I got everything work right, but I am having problem on the postback, in which the modalExtenderPopup auto closing after the postback(). I wonder if you could show me how to keep the modal popup remain open until the user performs the update & submit.I have spent a lot of time searching for solution, but could not make it work right. Adding the MyModalPopup.Show() in pageLoad() won't help in my case because it doesn't keep the grid ID value. All m
 
Posted by Iris on 5/22/2012 9:19:54 PM
All my id key were bounded in the _ItemDataBound() event, have been tried many suggestions through the Net, but I could not make it works. PLEASE HELP! MANY THANKS IN ADVANCE FOR YOUR HELP. Regards, --Iris
 
Posted by Rajiv on 1/19/2013 4:07:09 AM
I want code for this articles.
 
Posted by Rajiv on 1/19/2013 4:08:29 AM
could u plz send me the soucce code for this complete.
 
Posted by nanak on 2/20/2013 3:34:47 AM
I am using ModelpopupExtender in Page And Page Call Into Master Page But in child page ,Modelpopup is open but popup button event in now working .
 
Posted by Shubh on 12/6/2013 4:22:43 AM
really nice sir ... you can try another example of it here this is also very helpful... http://www.alltechmantra.com/2013/12/how-to-use-pop-up-control-in-asp.net.html
 
Posted by abhishek on 2/18/2014 9:56:37 AM
can i get the full code of this article .
 
Posted by abhishek on 2/18/2014 12:27:38 PM
hi details are not coming in my modal popup by following your code.please any body help??
 
 Rating & Comments
A word 'Excellent' means lot to the author of this article. You can give comments about this article but not the author.
Rate this Article:
Name:
Email Id:  
We never display your email id anywhere.
Comment/Question: Max. 500 letters
Five plus Fifty Equals To
 
Sponsored by
Programmers Heaven C# School Book - Free 338 Page eBook
Backup and Recovery Best Practices for Microsoft SQL Server 2005
Run Your Own Web Server Using Linux & Apache - Free 191 Page Preview