Adventures In Development » JavaScript

How to Implement an ASP.NET Color Picker

Matthew Paulson — Fri, 12 Jun 2009 20:28:18 +0000

One of the components of the 360 Web Content Management System (website in progress) that I wanted to develop was an events calendar that allowed you to post events into color-coded categories. You can see a demo of it here. At first, I had it so that users would manually enter in a 6-character HTML color code, but it was very non-intuitive for anyone who’s never worked with HTML before. Eventually I stumbled upon the ASP.NET Color Picker control. It’s a custom ASP.NET control that you can add to a page much in the way that you can add a text box, radio buttons, or a drop down list.

Here’s how to implement the ASP.NET Color Picker Control

(1) Download the library and add it to your project

First, download the library from the ASP.NET Color Picker Control website. Make sure to download the latest binary release from the website. Currently that version is ASP.NET Color Picker v.1.4.10423.1 Binary. Once you get the zip file, it will contain a library that you should extract to the /bin/ folder of your website.

(2) Register the library on your page

ASP.NET provides a set of standard controls that you can add to a page that start with the “ASP” prefix, such as “. Any custom controls will have their own prefix that you specify by registering the library on the page. It’s another line of code that you add to the top of the page next to your page definition. It should look something like this:

<%@ Register Assembly=”Karpach.WebControls” Namespace=”Karpach.WebControls” TagPrefix=”cc1″ %>

(3) Add the control to your page

Now that you have the library referenced, you can add the control to your page and make use of it. For the purpose of this demo, I’m going to set the AutoPostBack property to true and run a function whenever the color is changed. This will show us the color that we picked inside of a label (also shown below) after we select a new color.

(4) Create Your C# Function

After we choose a color, we have to do something with it. With the ColorPicker control above, I’m using the OnColorChanged property to call the “chngColor” function, which in C# will look something like this. This will also demonstrate how to programmatically read the color chosen with the .Color property of the ASP.NET Color Picker Control

protected void chngColor(object sender, EventArgs e)
{
lblResults.Text = “

Sample Text

”;
}

(5) Success

So far, we’ve added the library to our project, registered the library on the page, added the control to the page, and done something with the color chosen by the user. Your page should look something like this:

You can download my sample program here.

Create a Sortable HTML Table with JQuery and TableSorter

Matthew Paulson — Fri, 05 Jun 2009 15:29:19 +0000

One of the more useful features of ASP.NET’s GridView control is that users can sort the information in the table they are seeing by any number of fields. To allow this sorting to happen, ASP.NET sends a post-back to the server and the web server re-renders the page with the GridView re-sorted in the order requested. Now, there’s a way to display a table that can be sorted by any number of fields using only JavaScript. There’s no communication back and forth with the web-server wasting bandwidth and processing power on the web-server.

The JQuery library that allows this to happen is called Tablesorter. Tablesorter has a ton of very useful features, including having a very small code base, the ability to sort across multiple columns and is compatible with just about every web-browser that’s currently being used, even IE 6. It has sort parsers for a number of types of formats, including text, URIs, integers, currency, floats, IP addresses and dates, so whatever type of data you have in the table, chances are it will be able to intelligently sort it.

Here’s how to create a sortable table with TableSorter and JQuery

(1) Get the required libraries and reference them.

You’ll want to download the minfiied version of Tablesorter from the Tablesorter website. The slimmed-down version comes in at 12 KB. You can download that here. You’ll also want to get a copy of the latest version of JQuery which is available form the JQuery Website. Once you get those two files downloaded, you’ll want to add references to them in your page’s . They should look something like this depending on where you placed your files:

(2) Make an HTML Table

Here’s a demonstration table that the Tablesorter website provides for us to use. Simply add this to the body of your page:

 id="myTable">
>
>
    >Last Name
    >First Name
    >Email
    >Due
    >Web Site


>
>
    >Smith
    >John
    >jsmith@gmail.com
    >$50.00
    >http://www.jsmith.com

>
    >Bach
    >Frank
    >fbach@yahoo.com
    >$50.00
    >http://www.frank.com

>
    >Doe
    >Jason
    >jdoe@hotmail.com
    >$100.00
    >http://www.jdoe.com

>
    >Conway
    >Tim
    >tconway@earthlink.net
    >$50.00
    >http://www.timconway.com

(3) Sort Your Table

The only thing left to do to make our quick and dirty demo of the table sorter to work is to call the sorting library using the document.ready() function that’s frequently used with JQuery. That will look something like this:

(4) Further Development

The next logical step is to add some CSS formatting that will give the user a better idea of which sort direction they’re doing. You can see a demo of how to style the different sort directions on the Tablesorter website, which would be a must on any production site. You might also want to play around with doing multi-column sorts and with their widget system.

Click here to download my example code (24 KB).

JQuery Date Picker: One Step Torwards Making Forms That Work

Matthew Paulson — Thu, 28 May 2009 13:37:00 +0000

While attending Microsoft Mix earlier this spring, I stumbled upon a book called “Making Forms That Work“, which was written by Caroline Jarrett and Gerry Gaffney. The book focused on building web-forms that aren’t intimidating and that people will actually fill out. One of the focuses was making sure to use the right controls for the right question you have for your user. You certainly don’t want a drop down list of 1000 names to have the user pickout their name, and you definitely don’t want to give them a text-box to type in their gender.

On that same line of reasoning, it’s probably not a good idea to have users manually type in dates. Considering all of the formats possible for entering a date, say “5/28/2009″, “5/28/09″, “Thursday, May 28th, 2009″, “May 28 09″, etc, you would need quite the number of regular expressions to determine if what the user entered in actually was a date. One solution to this is to draw a small calendar on the page and have the user click which date they want, but those often take up a lot of screen real estate.

Instead, I usually recommend some sort of pop-up date picker. For ASP.NET, I’ll typically use the AJAX Control Toolkit Date Picker. For other situations, I”ll make use of Kevin Luck’s JQuery DatePicker. For more advanced date picking, you might also look into the JQuery Date Range Picker.

For today’s project, we’ll make a basic implementation of Luck’s JQuery Date Picker. Here’s how to get started:

(1) Download the libraries

For this project, we’re actually going to need a couple different libraries. We’ll need the JQuery library it self. You’ll also need the date methods extension for JQuery. After we have those two helper-libraries in place, we can download the JQuery Date Picker library it self and the associated CSS file.

(2) Create header references

Now that we’ve got all of the libraries, we need to add some references in the header that should (for the most part, depending on where you put the files) look like this:

(3) Create an input field for your datepicker

With the datepicker, you’ll actually click the textbox itself or an associated image, and that will load the javascript popup that lets you pick out a date, and then the date picker will fill the value you choose into that textbox. Add an input tag to your page. Make sure to give it a class of “date-pick”.

<input name="date1" id="date1" class="date-pick" />

(3) Call the date picker script

Somewhere in the header, we’ll need to call the date picker script so that it loads when the page does. That code should look like this:

(4) You’re done

At this point, you should have something that looks like this (after you click on the “Choose Date” text):

Right now, it’s pretty ugly. The neat little calendar icon won’t be there, but you can add that by modifying the css.You’ll probably also want to modify the color scheme to match the theme of your site. You can download my quick and dirty example code here (36 KB).

Make an AJAX-like Multiple File Uploader with Uploadify

Matthew Paulson — Wed, 20 May 2009 18:40:41 +0000

I’m currently working on an file manager that will be integrated with the content management system software that we developed. In doing this, I’ve been looking for a solution that would allow users to upload multiple files at once, does so in a very easy to use way and shows a progress bar. For this project, I don’t really need to interact with ASP.NET at all for a database, so I can look at some of the JavaScript & Flash solutions that are out there. The solution that I eventually settled on was Uploadify. The tool is actually a combination of Flash and JQuery. It’s very customizable in the functionality that it offers as well as the design of the system.

I was at first concerned because the solution only supports PHP, however members of the Uploadify development community have developed a replacement server-sidescript that will replace the “upload.php” file with a .NET version. You can find that code on their forums here.

Here’s what Uploadify looks like in action:

Implementing Uploadify

Getting Started:

So how do we implement Uploadify? It’s actually easier than many JQuery modules that are out there. The first thing you’ll need is the Uploadify Core that can be downloaded from the Uploadify website. You can also download code for several examples of implementations of code. The core it self comes with a PDF manual as well.

Script References:

You’ll need to reference the latest version of the JQuery Core was well as the Uploadify JavaScript file:

Making a Placeholder:

You’ll need a placeholder DIV that the script can use to draw the upload tool on the page somewhere in the tag:

Calling the Script:

Now, all we need to do is call the uploader when the page loads:

That’s all it really takes to implement Uploadify. You might want to modify some of the settings in it to customize the uploader to your needs, but it’s a really great solution.

Here are some common options that you can play with in the settings:

“CheckScript” and “Script” -> Be sure to change these if you are using the .NET solution
sizeLimit -> Limit the file size of the upload (in bytes)
Height & Width -> Change the dimensions of the container DIV
fileExt -> Limit the type of file extensions that you allow.
ButtonText & ButtonIMG -> Customize the look of the upload button
There’s a full list in the Uploadify Website

Using System.IO to Create, Read, Rename and Delete Files and Folders in C# and Visual Basic

Matthew Paulson — Tue, 19 May 2009 00:19:45 +0000

If you’re making use of C# or Visual Basic for Windows Forms, ASP.NET Web Forms or ASP.NET MVC, you have access to a very powerful file-system access library that’s included with Visual Studio. The library, System.IO, will allow you to create, rename, edit and delete files and folders on your system. If you are using System.IO in ASP.NET, you will be able to access the file system on the web-server assuming that appropriate permissions are set with the Network Service account. For the purposes of this article, all of the code will be in C#, but rest assured, the same functionality is available in Visual Basic, but the syntax might be slightly different.

To get started with the library, add a reference to the System.IO library at the top of your file

Using System.IO;

Here’s how to manipulate folders/directories using the System.IO Library:

Delete a folder:

Directory.Delete(“c:\\directory\\subdirectory\\”); //standard delete

Directory.Delete(“c:\\directory\\subdirectory\\”, true); //delete folder and all subdirectories

Create a folder:

Directory.CreateDirectory(“c:\\directory\\subdirectory\\”)

Check if a folder exists:

Directory.Exists(“c:\\directory\\subdirectory\\”); //returns boolean value

Move/Rename a folder:

Directory.Move(“c:\\directory\\oldlocation\\”, “c:\\directory\\newlocation\\”);

Get a list of files in a folder:

Directory.GetFiles(“c:\\directory\\subfolder\\”); // returns a string array of files in the folder

Here’s how to manipulate files using the System.IO Library:

Delete a file:

File.Delete(“c:\\directory\\filename.text”);

Create a file:

File.Create(“c:\\directory\\filename.text”); //note, the file will be empty. There are some overloads available that will let you create a file with content in it

Check if a file exists:

File.Exists(“c:\\directory\\subdirectory\\filename.text”); //returns boolean value

Move/Rename a file:

File.Move(“c:\\directory\\filename.text”, “c:\\directory\\filenamenew.text”);

Create a copy of a file:

File.Copy(“c:\\directory\\filename.text”, “c:\\directory\\filenamenew.text”);

Read text from file:

string FileContents = File.ReadAllText(“c:\\folder\\filename.text”);

Write text to a file:

File.WriteAllText(“c:\\filename.text”, “contents of file”);

Tips for Using System.IO in ASP.NET

Using Server.MapPath to Convert Relative URLS to Physical File Paths

Remember that the System.IO library always requires that you input a physical file path on the web server’s hard drive. Passing in a file or directory relative to the root of the web server will not work. IE, File.Exists(“/images/file.jpg”) will result in an exception. Fortunately, Microsoft has recognized that this would be an issue ahead of time and has given us the “Server.MapPath” function which will convert relative URLs on the server into physical file paths.

Here’s an example of Server.MapPath in action:

string RelativeURL = "/media/files/mypicture.jpg"; string AbsolutePath = Server.MapPath(RelativeURL); bool FileExists = File.Exists(AbsolutePath);

Setting File and Directory Permissions in IIS for ASP.NET

If you plan on doing any sort of uploading files, modifying files, deleting files, modifying folders or deleting folders from your web-server, you are going to have to assign additional permissions on the server. To do this, you will need to make modifications to the appropriate folders that you want to be able to modify in IIS or have your web host do it for you. Essentially, you need to give the “network service” account permissions to do anything that you want ASP.NET to be able to do. If you want to be able to delete files, give the Network Service account permissions to delete files in the appropriate folder.

In the next couple of weeks, I’m hoping to create a C#/ASP.NET based file-manager. It’s very likely that we’ll be using a lot of these methods for this project. If there are any features you’d like to see developed in it, don’t hesitate to contact me.

Update – Mar 18 @ 9:00 PM - When I wrote the above commands, I initially neglected to use escape sequences for the file names. Remember to always use a double back-slash or start your string with the @ symbol for your physical file paths to work properly. I’ve updated the commands to reflect the correct way to reference directories.

How to Safely Display Your Email Address Online Without Getting Spammed

Matthew Paulson — Fri, 15 May 2009 12:30:29 +0000

If you have a website or blog, one of your motivating factors is that you’d like to promote yourself, your services or your ideas. Typically most bloggers don’t want to be writing anonymously and would like to provider their readership an easy way to contact them.

Unfortunately, it’s a really bad idea to let your email address set publicly on your website. There are all sorts of bots crawling across the web that download pages and use regular expressions to identify and collect email addresses that are sitting in plain-text on a website. If you do this, chances are you will soon be on the receiving end of a lot of unwanted spam.

Fortunately, there are several ways that you can allow people to contact you without displaying your email address in a way that would expose you to these types of spam-bots. An easy way would be to create an image with the text of your email address on it (that’s what Facebook does). 15 Days of JQuery suggests using AJAX to safely display your address. Some people don’t display their real address and just leave a contact form to allow people to send the messages. If you don’t protect your contact form, you’ll be on the receiving end of another type of spam. Some people obfuscate their email addresses on their sites so that spam-bots cannot read them, such as using name example org instead of name@example.org.

All of these solutions have their pluses and minuses, but there’s a really simple solution that I’d suggest to you which will give the appearance of displaying your address in plain-text without exposing your email address to bots that harvest email addresses from the web. Since these types of bots generally cannot process JavaScript, using a simple JavaScript method to generate the text of your address should suffice to prevent the harvesting of your email address.

Here’s an example of how to do it:

This will display as “name@example.org” after being processed by JavaScript’s interpreter.

How do you protect your email address from getting spammed online? Let me know in the comments!

Building a Simple Image Rotator with JQuery

Matthew Paulson — Fri, 15 May 2009 03:21:17 +0000

I was recently working on a new website for an adult fellowship group at my church and one of the tasks I had was to create an image rotator that had various bible verses on it that would transition every few seconds. Since the site was Joomla-based, I initially searched for a free plugin that would do the trick. I did find one that would do the trick (Flash Rotator Module by JoomlaShack), but it was $19.95. I decided I would keep looking and find a free solution.

Eventually I stumbled upon JQuery Cycle. It’s a free JQuery tool that lets you do an image rotator with a lot of unique transitions. I opted for a basic “fade”, since that’s what the previous version of the site was using. There’s also shuffle, zoom, rotation, and scrolling effects. You can see the results of these efforts on http://www.sfcontext.com/

Here are the steps to recreate a basic image-slideshow using JQuery Cycle:

(1) Reference the JQuery Library and the JQuery Cycle Libraries in your .

(You’ll need the JQuery library as well as the JQuery Cycle library on your web-server, make sure to update your references)

(2) Make a DIV with your images in it where you want the rotator to appear on your page:

Feel free to use as many images as you want in this. You can also change the height and the width, but it’s probably a good idea that they all have the same height and width. You can also use “ALT” and “TITLE” tags since they’re plane-jane HTML image objects.

(3) Use a $document.ready() function to load the JQuery Cycle rotator effects

make sure that the class of the DIV lines up with the class being referenced in the $document.ready() function. You can also replace the “fade” fx with a number of other transitions and change the speed as you desire. The “5000″ represents 5000 miliseconds or 5 seconds.

Overall, I’m very impressed with JQuery Cycle as an image-rotator solution. The library it self is only 28KB when it’s compressed, and if you don’t include all of the transitions, you can shave a few kilobytes off that number.