Adding a Popup Details View

Most of the examples I have seen of Master-Details scenarios in ASP.NET AJAX 4 have had the master and details views visible simultaneously.  In some cases, however, the page might be too small to contain both views at the same time.  I decided to show the details view in a popup window.  For this project, I used the AJAX Control Toolkit’s Modal Popup control.  I copied the necessary javascript files into the MicrosoftAjax folder of my website, and added references to my page.  The files I required were listed on Matt Berseth’s blog, along with a comparison of its size with the size of the jQuery ThickBox control.  The files for the Modal Popup added up to 131Kb, over twice the size of its jQuery rival.  For a real website, a leaner solution might be preferable; but for this example, the Modal Popup was fine.

The referenced files:

ModalFiles

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.

PopupDiv

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:

  • sys:attach=”dataview”
  • class=”sys-template”

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.

PopupStyle

To turn PopupDiv into a ModalPopup control, I added some code to the init event handler we saw earlier:

CreateModalPopup

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.

SelectEnabledDataView

Three parts of this web page are of interest.  First, I have replaced the First Name and Last Name columns with a single column called Name.  This can then form the element that when clicked will show the popup.  To display two fields from the database in a single table cell, I have used the {{ }} syntax, which evaluates arbitrary javascript code.  Furthermore, I have put the name inside an anchor tag.  Second, I have added a dataview:oncommand attribute to the tbody tag, and told it to call the onCommand function whenever a command event is raised in the DataView.  Third, I have added sys:command and sys:commandargument attributes to the anchor tag just mentioned.  The sys:command attribute causes a command event to be raised whenever the anchor tag is clicked.  Since I have set the value of sys:command to Select, the word Select will be passed as the commandName to the handling function.  The handling function can also be passed a commandArgument, by using the sys:commandargument attribute.  In this case, I have used the special $dataItem, which passes to the handling function the actual data item to which that item in the DataView is bound.

The onCommand function, which handles the command event of the DataView is as follows:

onCommandFunction

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.

Popup

Advertisements

2 Responses to “Adding a Popup Details View”

  1. ASP.NET AJAX Preview 4 Samples - Jim Wang's Blog Says:

    […] AJAX Control Toolkit Integration: Adding a Details View using ModalPopup […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: