学步园

http://mattberseth.com/blog/2007/07/modalpopupextender_example_for.html

ModalPopupExtender Example for Editing Rows in a GridView (Master/Detail Scenario)

The web application I am currently working on is a data-centric, internal facing application targeted at the knowledge workers within our enterprise.  A majority of the pages are our core 'search' pages that contain a GridView and a number of input elements for entering search criteria.  Each row in our GridViews contain a hyperlink to a supporting 'details' page that has additional information for the selected row - usually contained in a DetailsView.  Our standard for implementing this has been to render the values for the GridViews primary key column as a hyperlink that takes the user to the details page passing the PK through the query string.  This all works fine and our users seem to be OK with this type of naviagation.  But when I was recently doing some work with the ModalPopupExtender, I was curious if we could improve this flow by keeping the user on the main search page by moving the DetailsView to the ModalPopupExtender.  See the screen shot below or the live demo for an example.

Live Demo | Download Code

I did a few google searches, and sure enough there were some people doing this (here and here).  I took a similiar approach to the second article, but with a few minor tweaks.  I uploaded a live demo of these pages so you can check out the behavior (I kept the styling to a minimum as usual).  The code for this example is straight-forward except for the following 3 items:

1.  The ModalPopupExtender requires the TargetControlID property to be set.  Because of this I created a hidden button so this error doesn't occur.  For this example, we don't need to set a control to trigger the popup because we are always explicitly calling Show() on the popup when the Details button is clicked).

2.  The DetailsView for the selected row is contained in an updatepanel with the UpdateMode set to Conditional.  This is done because we want to make sure that the control is only updated from the Details button click handler and not when the Customers GridView is sorted or paged through

3.  We are explicitly calling Show on the ModalPopup to display the DetailsView from the 'Details' button click event.  This is the only action that triggers the ModalPopup from being made visible

Also, I didn't actually implement an update because I don'y want my northwind database getting messed up.  Hopefully this will get you enough of a start that implementing the update will not be a huge problem.

Here is the markup for the page, Enjoy!

    
  
    
    /// 

    /// 
    /// 
    /// 
    /// 
    protected void BtnViewDetails_Click(object sender, EventArgs e)
    {
        //  get the gridviewrow from the sender so we can get the datakey we need
        Button btnDetails = sender as Button;
        GridViewRow row = (GridViewRow)btnDetails.NamingContainer;
        
        //  extract the customerid from the row whose details button originated the postback.
        //  grab the customerid and feed it to the customer details datasource
        //  finally, rebind the detailview
        this.sqldsCustomerDetails.SelectParameters.Clear();
        this.sqldsCustomerDetails.SelectParameters.Add("customerid", Convert.ToString(this.gvCustomers.DataKeys[row.RowIndex].Value));
        this.dvCustomerDetail.DataSource = this.sqldsCustomerDetails;
        this.dvCustomerDetail.DataBind();

        //  update the contents in the detail panel
        this.updPnlCustomerDetail.Update();
        //  show the modal popup
        this.mdlPopup.Show();
    }   
    
    
    

Example of using a ModalPopupExtender to edit the indivdual rows of a GridView.
To test out the functionality, click the Details button of any of the rows and watch what happens.

这里的核心思想是手动控制modalpopup的显示，然后它的属性TargetControlID设置成一个不现实的button的id。