MSDN Magazine Launch Issue - February 15, 2008 - (Page 25) Figure 6 The Content of a Modal Popup Supports Partial Rendering Customer ID: Company Name: Contact Name: Country: extender. This last call ensures that the script to show the dialog as the page loads is properly downloaded to the browser. Figure 7 shows a sample page in action designed along these guidelines. Do you really need all those partial rendering regions in the page? Well, if your only purpose is find out how to initialize the dialog box with server code, then you could perhaps save some updatable regions. However, if your dialog requires server-side initialization work, then it likely requires some work to update the underlying page with collected data. In that case you would need to return data to the server. post back when any of the predefined OK and Cancel buttons are clicked. The following code excerpt from the modalpopupbehavior.js source file explains. This code belongs to the built-in handlers of the click event for both the OK and Cancel buttons: var element = $get(this._OkControlID); if (element && !element.disabled) { if (this.hide() && this._OnOkScript) { window.setTimeout(this._OnOkScript, 0); } e.preventDefault(); return false; } function onOK(sender, e) { // refresh the UI Here’s a sample handler for the OK button: Returning Data to the Server The ModalPopup extender allows you to identify controls that serve as the OK and Cancel buttons by using the properties OkControlID and CancelControlID for this purpose. When any of these buttons are clicked, the popup is dismissed and some JavaScript code optionally executes. You may define a JavaScript function to run when the OK and Cancel buttons are clicked by using the OnOkScript and OnCancelScript properties. The popup doesn’t } // if you need to run server code, you // can invoke a Web service method It’s Your Turn To refresh, I didn’t add code to the existing control or client behavior to complete this sample. I simply used the existing set of members (both client and server) to improve the initialization of the dialog and the data exchange with the host page. To avoid full page refreshes, I employed partial rendering whenever it made sense. To replicate the tricks in the sample code discussed here in your own application, install the latest version of the AJAX Control Toolkit and then wrap the modal panel in an UpdatePanel region, paying attention to not include the OK and Cancel buttons in the partial region. Next, bind the ModalPopup extender to an invisible control and display and hide the popup programmatically. Finally, if you need additional buttons in the popup to post without leaving the dialog, all that you have to do is add these buttons to the UpdatePanel that wraps the popup. For more details, have a look at the source code; a line of code is worth a thousand words. Code download available at msdn.microsoft.com/msdnmag/code08.aspx. Send your questions and comments for Dino to cutting@microsoft.com. Figure 7 Modal Dialog Box with Data from Current Context Dino Esposito is the author of Programming ASP.NET 3.5 Core Reference (Microsoft Press, 2008). Based in Italy, Dino is a frequent speaker at industry events worldwide. You can join his blog at weblogs.asp.net/despos. Cutting Edge launch2008 25 http://msdn.microsoft.com/msdnmag/code08.aspx http://ASP.NET http://weblogs.asp.net/despos
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.