Here’s the ASP.NET code for this utility. The following section is the code behind file that shows how data is selected (you could use any method to databind the gridview) and copy the selected item details to the page. The item which took time to figure out is the ability to Show the ModalPopupExtender from the server side…that’s not obvious from normal usage. You must add the Ajax Control Toolkit to use the extender. When the Search button is clicked, the gridview is populated server-side, then the ModalPopupExtender called to show results. The RegisterStartupScript function is used to create a client side script which sets the details.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

namespace Techybit
{
    public partial class gridpopup : System.Web.UI.Page
    {

        protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
        {
            // When user selects an item, pass item details to client side script
            string name = ((GridView)sender).SelectedRow.Cells[1].Text;
            string description = ((GridView)sender).SelectedRow.Cells[2].Text;
            string price = ((GridView)sender).SelectedRow.Cells[3].Text;
            string func = "FillData("" + name + "", "" + description + "", "" + price + "");";
            // Use ScriptManager since using AJAX to work properly
            ScriptManager.RegisterStartupScript(this, this.GetType(), "test", func, true);
        }

        protected void btnSearch_Click(object sender, EventArgs e)
        {
            groceryDataContext dc = new groceryDataContext();

            // Search data and bind to gridview using LINQ
            var results = from p in dc.Products
                          where p.Name.StartsWith(TextBox1.Text.Trim())
                          select new { p.Name, p.Description, p.Price };

            gvResults.DataSource = results;
            gvResults.DataBind();

            // Sleep for a while to simulate a lengthy server side operation
            System.Threading.Thread.Sleep(2000);

             // Force the modal popup panel to show on client from server holding gridview results
            pnlPopup1_ModalPopupExtender.Show();          

        }
    }
}

Here is the HTML markup for this page.

    Gridview .NET Ajax Popup Example
    

    http://scripts/jquery-1.4.1.js

    

    
        // Called from server with the selected item details from gridview
        function FillData(xname, xdescription, xprice) {
            $('#').text(xname);
            $('#').text(xdescription);
            $('#').text(xprice);
        }
        
    

    
        .style1
        {
            width: 116px;
        }
        .style2
        {
            width: 1005px;
        }
    


    
    

    
    

        Back to applications page
             
        Back to Techybit main page
        

        

    
    

        Techybit Ajax Gridview Popup Example
    
    
    
    
    

        
            
                Please Wait...
                
        
    
    

        This page illustrates a modal popup that shows the results of a search using the
        Ajax Control Toolkit and jQuery. The UI is blocked until the user selects something.
        When the user selects an item, the item details are displayed below the search box.
        Leave the searchbox blank to search for all items.
    
    
    
        
            

                
                    
                    
                    _
                    

                
            
            

                

                    The item details are:

                     

                        

                            

                                  Name:
                            
                            

                                 
                                
                            
                        
                        

                            

                                  Description:
                            
                            

                                 
                                
                            
                        
                        

                            

                                  Price