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

I wanted a simple simple image rotator and came across this one using jquery.  (Please check out my updated post, Part II, that allows being able to have a number navigation for the images as well). However, because I'm not a fan of static code, I wanted to make it work server side, but this was a great example on how to get started for the static code

http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html

I basically modified the code from the post above and made the image part of it server side.  I left the CSS and Javascript code in place.  Well I switched the rotation from 6 seconds to 4 seconds.

So here is the concept of this code:

• Have a server side ascx control
• Assign the property for the path where the images are stored
• Assign the property for the image file names delimited by a pipe (i.e, image1.jpg|image2.jpg)
• Assign the property of the Width of the images
• Assign the property of the Height of the images
• Assign the property of the Alt Text for the images (all images share this)

As usual I will pretty much do a copy of paste of the code to make this happen. Comments are in the code as needed


NOTE: The path for my images in my test website was /images/

##########################################
Markup of the ImageRotator.ascx control
##########################################

]]>
]]>

##########################################
Codebehind of the ImageRotator.ascx control
##########################################



##########################################
Implementing the control on an aspx page
##########################################





And that is that. As you can see, I pretty much just take the property values needed and write out the HTML needed that the javascript will use.

If you needed to, in the Page Init or before the if statement in Page Load, you could grab the image names from any source and make then a pipe delimited string.  The source could be an XML file or a database, or whatever else you wanted to store the image names.

Well hopefully this helps other out there.  This makes a simple way to have a server side ASCX control that is a jquery image rotator for ASP.NET.

ASP.NET, Javascript jquery