John Mendez

Before I wrote a post about how to create a simple jquery image rotator in asp.net. I'v expanded on that code to include the ability to "browse images" in the slideshow by clicking on a number for the image. The end result now looks something like this. Please ignore the size and width (these can be set) and this is just for pure example. Also please ignore the bad looks of the play button as well. Again, just for example. I will also include a zip file as well.

Since I'm expanding on my first post, I will just be adding the code I changed to to make this happen. 

Let's start with the code behind file.  Our goal here it to create the numbers that users can use to navigate the slideshow we created.  Also, we are adding a simple title text saying "Browse Image".  We will be doing this by taking a count of how many images we have and writing out a div container with nested div's.  Please see the code snippet below. 

That is it for the changes to our code behind file. The rest is for javascript and CSS.

The CSS aspect is pretty self explanitory.  As you can see from the code snippet above we gave our div's ID's. This is how we will use CSS with them.  Below are the CSS classes I added to this solution.

Ok, now for the javascript code.  Which, by the way, if any of you have suggestions on how to make this more simple or more efficient please let me now. As I was coding this it just seemed as though I could have done it a better way, but this worked so I'm sticking with it :)  I changed enough code here that I will paste the javascript as is on my control.  I have comments below in the code to help make some sense of it.

That is about it.  Again, please read my first post about this so it makes more sense.  The first post also shows you how to apply the user control to a page and set it's properties that it needs.  Below is the zip file as well.

ImageRotator.zip (3.13 kb)

ASP.NET, Javascript

I needed to be able to remove a session variable from javascript so this post will talk about how to call a webmethod from javascript to remove a session item.  I will be utilizing a JS file, ASP.NET page with a WebMethod exposed in it and an asp.net user control.

The basis of this is a few things:

First we need an <asp:ScriptManager> on the ASPX page with the EnablePageMethods property set to true:

Second we need to expose a static function in our ASPX code behind so it can be available to our javascript file.

Note the [WebMethod] above the function and that the function is static. This is what allows us to make it available to the javascript file.  

Please make sure to add the statement using System.Web.Services; into the ASPX page, otherwise [WebMethod] will throw an error when compiling.

Third we need a ScriptProxyManager on the ASCX control with a reference to your JS file. This will also take care of including the JS file for your control as well so there is no need to add the <script src=....> tag. Put this as the first thing in your ASCX control.

Fourth we need the code from the JS file to bring it all together:

--------------------------------------------------------------

Anywhere in your javascript you can call the ClearSessionItem() method. Such as

function MyFunction(item){
    
    ClearSessionItem("MySessionItem");
}

Also you could call it via an onclick event with an HTML element such as:

<span onclick="ClearSessionItem('MySessionItem')">Clear Item</span>

---------------------------------------------------------------
Of course you can use this concept for almost about anything.  It allows you to not have a seperate ASMX file (Web Service) in your project.  Again, the concept here allows you to call a server side method inside javascript.


Resources:

http://www.asp.net/ajax/documentation/live/Tutorials/ExposingWebServicesToAJAXTutorial.aspx
http://www.asp.net/ajax/documentation/live/ViewSample.aspx?sref=Sys.Net.PageMethod%23PageMethod.aspx
http://www.asp.net/AJAX/Documentation/Live/ViewSample.aspx?sref=Sys.Net.PageMethod/cs/PageMethod.js


Good luck...leave questions if you got them and I'll do my best to answer  

ASP.NET, Javascript javascript, asp.net

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