The referenced files:
I am going to cheat at this point. The Modal Popup is an ASP.NET AJAX behaviour, and needs to be attached to an html element to act as its trigger. I had no suitable element at this stage, but I knew that later on I would need a button to add a Presenter to the database. I therefore added a button to my webpage, and gave it the id NewPresenterButton and the type button. I also added a div with id PopupDiv to be the actual popup window.
In this div, I put a table to display data about a presenter, as well as OK and Cancel buttons. To turn the table into a DataView, I added two attributes to the table tag:
The binding syntax is the same as we used in a previous post, but this time it is used to specify the content of input and textarea controls. This is because we want to be able to edit data in the details view. To style the popup window, I just copied the css from the example given on the ASP.NET AJAX Control Toolkit samples page.
To turn PopupDiv into a ModalPopup control, I added some code to the init event handler we saw earlier:
I wanted the Modal Popup to show when I selected a presenter in my DataView. To do this, I had to make some changes to my web page.
The onCommand function, which handles the command event of the DataView is as follows:
The commandName and commandArgument are contained in the args object, and can be retrieved by using the get_commandName and get_commandArgument methods. First, we check whether the command name is Select. If it is, we retrieve the associated data that we passed in as the commandArgument. We then find the DataView in the popup window, and use its set_data method to bind it to the correct presenter. We then find the ModalPopup control, and use its show method to make it visible.
When a presenters name is clicked, we now see this popup.