MSDN Magazine Launch Issue - February 15, 2008 - (Page 24) the source code for the client behavior, you’ll see additional code to intercept markup that was downloaded from the server as a constituent part of the host page, and you can style it for display. For this reason you can’t make changes to the template or content of the popup once the page has been served. Consider the following scenario. Your user chooses a customer from, say, a dropdown list and views some details. Next, he may want to edit some of the customer information. In a traditional Web application, you just redirect the user to a new page or, perhaps, make a postback to load a different view. In ASP.NET 2.0 and newer versions, this is what the DetailsView control does. In a desktop application, you would use a modal dialog box. For AJAX-enabled applications, a Web dialog box is now an option. The dialog box used to edit a customer, however, has a fixed layout that is populated with new content every time it is going to pop up. Suppose that you originate a full postback when a customer is selected. In the selection-changed event, you update the customer Figure 5 Using Partial Rendering to Update the Customer View Customers Customer ID: Company Name: Contact Name: Country: view and optionally the controls in the modal popup. In this way, when the button is clicked to pop up the dialog box the latest information is already loaded. But an AJAX application doesn’t normally perform full postbacks. Figure 5 shows a fragment of an ASP.NET AJAX page that uses partial rendering to update a customer view instead. The updatable region is linked to the SelectedIndexChanged event on the child dropdown list control. The dropdown list, in turn, has the AutoPostBack property set to true. The net effect is that whenever the user changes the selection in the dropdown list, the table in Figure 5 is updated without a full page reload. So far, so good. The next step entails updating the panel in Figure 6, which represents the content of the modal popup. The panel must be in sync with the customer’s view. You can update the panel being displayed in the popup when a new customer is displayed or just before the popup is displayed: If you update the popup content just before display (the approach I recommend), then your dialog initialization code needs to run on the server, but you won’t have any postback event from any control that brings up the modal dialog. And even if you did, it would be too late for you to edit the controls in the dialog box. The ModalPopup extender, in fact, adds a client-side onclick event handler to the target control and prevents the default action—in this case, a postback—from taking place. The idea, then, is to use a fake target control for the ModalPopup extender so that the extender will never be automatically kicked off out of your control. How would you then trigger the modal popup? Here’s an example. When the button below is clicked, it executes its server-side OnClick handler over a partial rendering operation: This has two benefits. First, no full refresh affects the page. Second, the OnClick server code can be used to properly initialize the popup panel and then order the extender to show the popup: protected void btnEditText_Click(object sender, EventArgs e) { InitDialog(); ModalPanel1.Update(); ModalPopupExtender1.Show(); } The InitDialog method contains the internal code required to initialize all controls in the panel in Figure 6. This code is sufficient to change the state of involved controls but doesn’t modify their markup. This is because you’re executing the code over a partial rendering postback. So in the next step, you explicitly refresh the updatable panel. Finally, call the Show method on the ModalPopup 24 msdnmagazine Cutting Edge http://ASP.NET http://ASP.NET
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.