John Mendez

While working on a current project I wanted to use jquery to show a modal dialog for product information.  However, I wanted to do this within a ListView and without having to having multiple dialogs rendered out to the page.  With this solution you have one ListView and one modal dialog. Within the ListView you setup parameters to pass into the javascript function.  I will give snippets of code to keep it clean.

Environment:

• ASP.NET 3.5 SP1
• VS 2008 SP1
• jQuery 1.3.2
• jQuery 1.7.2 UI (js file, css and images)

Assumptions: You are somewhat familiar with jQuery and know how to call a dialog using jQuery.  If you are unfamiliar with this please look at this page.

Before I go on with the rest, I went ahead and downloaded a custom jQuery UI package here:

http://jqueryui.com/download

I unpackaged the theme and integrated it into my website.  This was basically copying the CSS, JS and image files from the package created from jQuery.

I will not get into how to integrate it into your website because the directory structure could be different.  Make sure that your CSS matches up with where your images are though.

Ok so here is the code snippets to accomplish having a ListView and showing a jQuery modal dialog box.

NOTE: Please make sure to add the reference to your stylesheets and javascript files within your page this will be on.

Set the DIV for the modal dialog to none

Javascript function that populates the fields within the DIV for the modal dialog

ItemTemplate within your ListView (this is mine)

DIV used for jquery modal dialog

This may seem a bit too much at first, but once applied to your code it's not much at all.  You may need to tweek this a bit to fit your solution as this is a solution for a project I was working on.  However, it shouldn't take much tweeking once you have it in place.  The concepts above will provide you with a solution. A review of the concepts again:

• implementing jQuery and jQuery UI
• Have a DIV on the page to act as the modal dialog
• Set the style of the DIV to display none
• Within your ListView use string.format to write out a span tag that with an onclick event will pass in parameters to a javascript function
• The javascript function will take care of calling the jQuery dialog and populate the HTML elements within your DIV. 

Questions leave a comment or send an email.  Good luck

ASP.NET, Javascript jquery