Official Blog of Will Strohl

Telerik Insider Program

Mon, 04 Apr 2011 08:00:00 GMT

There has been a program offered by Telerik for some time now, where they will sponsor speakers to give presentations to user groups and code camps. This was partially an effort to further ensure the quality and existence of user groups since they saw a decline in user group activity in 2008. The list was never very long, but until now, I didn’t realize how short the list really is. Telerik announced their Insiders Program today.

The program lists several top-notch speakers who are available to speak at various community events, their bio and abstracts (when available), and any events that they’re already scheduled to speak at. I am very proud and honored to say that I an in their list of insiders.

When I was originally tapped to be in this program, I was concerned since my primary topic of choice tends to be DotNetNuke, but they are completely understanding and accepting of the various talents and passions that their insiders have.

You don’t see my list of abstracts on my bio page there right now, but you will in the future. Some of the other insiders already have abstracts and appearances listed to make it easy for you to see the availability and specialty of each presenter.

While it’s great to boast about something like this because of how exclusive it appears to be, I cannot honestly sit here and do that without acknowledging that I didn’t make it to this list all on my own. Like many of you, I’ve had mentors and a strong family to back my journey up and get me to where I am today. With readers, supporters, user group members, community leaders, and others – I couldn’t accept this exceptional honor to be a Telerik Insider!

Technorati Tags: Telerik,DNN,DotNetNuke,CMS,Content Management,WCMS,Presentations,Community

Use jQueryPad For Your jQuery Editor

Fri, 25 Feb 2011 08:00:00 GMT

This will be a quick post. I just wanted to let all of my readers know about a tool that Rob Chartier found today. It’s called jQueryPad. This is an editor built specifically for jQuery developers to use to build out any jQuery code that they want. Although I have two specific features on my personal wish list, this tool is outstanding!

jQueryPad is a free and open source application, written in WPF. As a result, it’s only available for Windows, but that shouldn’t be a problem to most of my readers. The only downside to how it is distributed is that there isn’t an installer for the program. You can put it nearly anywhere on your computer though, and add it as a shortcut to your start menu, or task bar.

Features

There are several features that will immediately make you happy with the tool:

Able to change the version of jQuery used
HTML pane to add snippets to run code against
jQuery editing pane
Temporary file saved in memory
Ability to open in your installed web browsers
Quick running of the code by pressing F5 on your keyboard
Integrated tips to help you learn any shortcuts to the program

Missing Features

I really wish that there was an installer for the program. Even though it takes minimal effort to make it usable on your system, this is extra time that should not be necessary.

There is no intellisense. However, judging by the comments on the download page, this will probably be the most requested feature for a future version.

If you write any code that throws a JavaScript error, there really isn’t any error-handling. It would be very nice to see these errors trapped and bubbled up to have a meaningful UI response for the developer.

Conclusion

That’s about it…. Overall, I am more than pleased with jQueryPad. I have already begun using it to test how I write jQuery, including with the Widget Suite for DotNetNuke.

Technorati Tags: jQuery

oEmbed API Wrapper for .Net Released

Wed, 03 Feb 2010 23:38:00 GMT

ASP.NetWed, 03 Feb 2010 23:38:00 GMT

I happened across a REST standard for importing remote content today called oEmbed. It uses REST to display embedded content from other websites. This specific method avoids (but doesn’t get rid of) XSS issues that are experienced with importing content from other websites. Using either JSON or XML, you make a GET request using the oEmbed standard, which will return the remote content that you can embed into your own website.

There are many ways to do this, but using this method, you can gain a higher level of usability over user-entered content in your own web applications. For example, imagine your end-user having to add a YouTube video into an online editor. They’d have to:

Find the video on YouTube
Copy the embed HTML
Figure out where and how to paste content into the source of the editor
Paste the HTML source code into the editor
Save the content

For anyone reading my blog, this is a trivial task that can take less than a minute. However, the average website visitor will not be able to or be confident enough to go through those seemingly simple steps. Instead, wouldn’t it be easier to just have them paste the URL of the webpage into the text portion of the editor and just save the content? Of course! That’s where oEmbed steps in.

By implementing oEmbed, you can just have your visitor paste the YouTube URL into the content area, and save it. However, you’d use oEmbed to switch out that URL for the actual content. Turning something like this:

http://www.youtube.com/watch?v=u7zlDicbfhI

Into this:

You can find a code sample for this on the documentation of the oEmbed wrapper for .Net. And the best part is that you are not limited to only YouTube. Using the oEmbed API Wrapper for .Net, you can do this will various videos, photos, and other embeddable content, such as widgets.

In this first release, I have given you all of the tools to make this happen in your own web applications:

Concrete implementations for: Clearspring Widgets, Flickr, Hulu, MyOpera, oohEmbed, Poll Everywhere, Qik, Revision3, Viddler, Vimeo, YouTube
Open implementation to call any other oEmbed provider
Ability to set an Internet proxy for the REST requests

Download and try out this for yourself. I’d love to get your feedback.

Technorati Tags: ASP.Net,REST,oEmbed,Wrapper,API

jQuery Version 1.4 Has Been Released

Fri, 15 Jan 2010 17:03:00 GMT

ASP.NetFri, 15 Jan 2010 17:03:00 GMT

I don’t know about you, but I have begun using jQuery pretty extensively in my UI development. I know not everyone can, and if you’re in that crowd, I am sooo sorry! :) jQuery has quite simply and almost single-handedly had an extremely positive impact on all of my web UI. Through some cool tricks that I’ve picked up here and there, I have created some of the coolest UI’s that I have ever done. Anyhow, that experience is sure to prove to only get better, as I noticed today that a new version of jQuery is finally upon us!

Introducing jQuery Version 1.04!

I have been running with and using version 1.03.02 for a while now, and it’s been very stable for me. However, I was surprised to see that one of the things done in version 1.04 was that they fixed over 200 bugs! Holy crap! I am sure glad I haven’t run into any of those. jQuery has been around for 4 years now. And in this latest version, they’ve increased the speed of many of the common functions that we use, sometimes by 75%!

You can find and download jQuery in it’s normal places:

Minified: http://code.jquery.com/jquery-1.4.min.js
Regular: http://code.jquery.com/jquery-1.4.js
Google: http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

You can find all of the good stuff about this update on their 14 Days of jQuery website. What I will do though, is highlight some of the things that you’ll want to look out for after upgrading your own jQuery file references on your site.

jQuery.ready()

I have been using the long form of the ready statement ever since starting out with jQuery. I’ve done it on purpose, just for the reason I am about to tell you about. I didn’t want to have to go back into my code and fix any short-cuts I might have made in the past. With version 1.04, you have to make the following changes in your code:

   1:  // no worky anymore

   2:  jQuery().ready( function() {

   3:     // your code

   4:  } );

5:

   6:  // gotta do this now

   7:  jQuery(document).ready( function() {

   8:     // your code

   9:  } );

(Of course, you can still use the $ shortcut. I just choose not to, in order to have cleaner, more consistent code throughout.)

Selector Speed

Using IDs for your selector, or at least the first selector will make your code run much faster than if you do not.

   1:  // slower

   2:  var divWrapper = jQuery('.wrapper');

   3:  var pDesc = jQuery('.wrapper p#description');

4:

   5:  // MUCH faster

   6:  var divWrapper = jQuery('#divWrapper');

   7:  var pDesc = jQuery('#description');

“Traditional” AJAX

The AJAX functions have been improved to allow for nested parameter serialization. However, this may cause problems with single parameter requests. In these instances, use one of the following methods to enable the “traditional” AJAX serialization that you’re already used to in v1.03.02.

   1:  // Enables for all serialization

   2:  jQuery.ajaxSettings.traditional = true;

3:

   4:  // Enables for a single serialization

   5:  jQuery.param( stuff, true );

6:

   7:  // Enables for a single Ajax requeset

   8:  $.ajax({ data: stuff, traditional: true });

contentType with AJAX Requests

Previously, if you didn’t specify any data in an AJAX request, jQuery simply didn’t pass contentType along. This has been a huge pain for many ASP.Net developers (including myself). Now, the contentType is always sent, regardless of whether the data parameter is filled or not.

Summary

For a full list of backwards compatibility concerns, please see this URL: http://jquery14.com/day-01/jquery-14#backwards

In summary, it would not be an issue for most sites to upgrade. However, if you’re using any 3rd party plug-ins, you will first want to make sure that those plug-ins will still work. So, I’d suggest an offline or staging test of the upgraded script first. However, if for nothing else, you really should upgrade for the speed benefits in version 1.04. What’s really cool is that if you want the speed, but also want to be backwards compatible, the jQuery team has though about you!

You can be backwards compatible by including the backwards compatibility plug-in on your site. Here’s an example from their site:

   1:  <script src="http://code.jquery.com/jquery.js"></script>

   2:  <script src="http://code.jquery.com/jquery.compat-1.3.js"></script>

I haven’t tried upgrading any of my DotNetNuke® sites yet, but you have better bet I will very soon! :)

Technorati Tags: jQuery,JavaScript

Selecting A List Option Using the Text Attribute via jQuery

Wed, 25 Nov 2009 19:36:00 GMT

ASP.NetWed, 25 Nov 2009 19:36:00 GMT

Here is another blog by request. I blogged not too long ago about using jQuery to change the default option in a listbox. As a result, a comment was added that asked me how to change the selected option using only the text, and not the value. Here is the answer! Doing this is actually quite simple, but may not be straightforward at first.

In order to demo this, we need a listbox (select, combo box, drop down list, etc.). Here is the one I am using for my example:

     <select id="cboList">

        <option value="val1">Text1</option>

        <option value="val2">Text2</option>

        <option value="val3">Text3</option>

        <option value="val4">Text4</option>

        <option value="val5">Text5</option>

        <option value="val6">Text6</option>

    </select>

Just a simple drop down list, right? Right. Now, let’s use jQuery to select the default value that will show to your website visitors.

    jQuery(document).ready(function() {

        jQuery('#cboList option:contains(\'Text5\')').attr('selected', 'selected');

    });

Just (technically) one line of jQuery to make this happen! Imagine doing that on your own using plain old JavaScript. Here it is in action!

Now you can try this on your own!

Technorati Tags: ASP.Net,jQuery,JavaScript

Create a Simple and Quick Web Service Handler

Wed, 25 Nov 2009 14:39:00 GMT

ASP.NetWed, 25 Nov 2009 14:39:00 GMT

There are some cases where a full-blown web service or WCF implementation is just too much for the project you’re working on. In those times, I often resort to building a similar implementation using an ASP.Net handler to accepts posts, and return data, just like a standard web service would do. This is not new. We’ve been doing similar things in Classic ASP and PHP for some time now.

I like doing this, because it’s quick, easy, and usually does the job better than a full-fledged web service when this solution fits the project requirements. Otherwise, this is just stupid! ;)

For my example, I am going to assume you need a handler or web service to return JSON data for an AJAX request, much like you’d need for a jQuery AJAX call.

In its simplest form, JSON data that is returned as a result of an AJAX request looks something like the example below. The collection name and values will vary from application to application. Keeping this example in mind, all you have to do is return a string object to the requesting application.

     { collectionName: ['value1', 'value2', 'value3', 'value4', 'value5'] }
  

First thing is first, add a handler to your project.

When you add the handler, the HTML markup should be relatively empty. That is because all of the action happens behind the scenes, in the code. By default, you will have a class that looks something like this:

This is a great template to start with for what we’re going to do. Now, we simply need to add our own logic to return our data. The format of the data is normally either defined by you, or by the application you’re using or extending.

We are going to assume that we are using an AJAX application that expects to receive a collection of names. We want our resulting JSON data to look like this:

    { fullNames: ['John Dough','Jane Dough','Bart Simpson','Jon Arbuckle','Danger Mouse'] }
  

First, remove this line of code from your class:

    context.Response.Write("Hello World!")
  

Now, whatever we do with our business logic, we are going to return our JSON string using the context.Response.Write() method.

At this point, we’d already have a Data Source in mind to grab our string-based data. It doesn’t matter where it comes from. I can be from another web service, database, XML files, etc. It doesn’t matter. All you need to do is feed your data into a string builder of some kind, and return it.

Here is my example, using a Customer object that gets populated from an imaginary Data Source.

    Dim ctlCustomer As New CustomerController

    ' grab a list of all of the customer

    Dim lstCustomer As List(Of CustomerInfo) = ctlCustomer.GetSortedCustomers()

    Dim sb As New StringBuilder

    sb.Append("{ fullNames:[")

    ' Loop through the available customers

    For Each person As CustomerInfo In lstCustomer.Values

        If Not String.IsNullOrEmpty(person.FullName) Then

            ' We need to replace the forward slash and single quotes, or the JavaScript will choke on them.

            sb.AppendFormat("'{0}',", Regex.Replace(person.FullName, "([/'])", "\$0"))

        End If

    Next

    sb.Append("] }")

    If sb.Length > 0 Then

        context.Response.Write(sb.ToString)

    Else

        context.Response.Write(String.Empty)

    End If

In our code snippet, we are using a StringBuilder to create the string output that we’re looking for, using the List object that we loaded from our Data Source. We simply loop through the collection, adding the customer to the list of full names. Once the customers are iterated through, the handler writes the resulting string as the response.

Now that we have that logic, our class should look something like this:

    Imports System.Web

    Imports System.Web.Services

    Public Class Handler1

        Implements System.Web.IHttpHandler

        Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

            context.Response.ContentType = "text/plain"

            Dim ctlCustomer As New CustomerController

            ' grab a list of all of the customer

            Dim lstCustomer As List(Of CustomerInfo) = ctlCustomer.GetSortedCustomers()

            Dim sb As New StringBuilder

            sb.Append("{ fullNames:[")

            ' Loop through the available customers

            For Each person As CustomerInfo In lstCustomer.Values

                If Not String.IsNullOrEmpty(person.FullName) Then

                    ' We need to replace the forward slash and single quotes, or the JavaScript will choke on them.

                    sb.AppendFormat("'{0}',", Regex.Replace(person.FullName, "([/'])", "\$0"))

                End If

            Next

            sb.Append("] }")

            If sb.Length > 0 Then

                context.Response.Write(sb.ToString)

            Else

                context.Response.Write(String.Empty)

            End If

        End Sub

        ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable

            Get

                Return False

            End Get

        End Property

    End Class

That’s all there is to it! Our resulting response will look exactly like what our AJAX project asked for. Really simple, right?

Technorati Tags: ASP.Net,VB.Net,Handler,JSON,AJAX,Web Service

Using the Autocomplete jQuery Plugin

Wed, 18 Nov 2009 20:06:00 GMT

ASP.NetWed, 18 Nov 2009 20:06:00 GMT

In my day job at RezHub.com, we began using jQuery last December, and there has been no turning back. Our site is a DotNetNuke website, and out main module is the one that facilitates the travel searches, such as the one on the RezHub home page. It was originally built by Arrow Designs, and has since been maintained by us. It functions almost exclusively using jQuery and various jQuery plugins, including the Autocomplete plugin.

The Autocomplete plugin allows the end-user to begin typing a value for a textbox, and the textbox will suggest values that are acceptable to be entered. In our case, we are suggesting travel destinations. This allows for developers to have a real possibility to increase usability on their web forms.

While the example I am giving you is actually more complicated than the code I will be showing you, the functionality and end-result remain the same. It is quite simple to wire up a textbox to take advantage of Autocomplete, but there is a little work that you might need to do first. Make sure that you have the Autocomplete plugin script (and jQuery) included in your page or module.

The first step to making this work is to add the references to your page. I have blogged about this in various forms in several earlier posts, so I will not rehash it here. Besides, I have another post planned this week that will rehash it again anyhow. ;)

Let’s See it Work

After adding the jQuery references to your page, this would be a really simple example of using Autocomplete using the following code:

     <input id="txtCity" type="text" />

    <script language="javascript" type="text/javascript">   1:     2:     jQuery(document).ready(function(){   3:         var data = 'Orlando Jacksonville Pensacola Tallahassee Tampa Clearwater Naples Sarasota Miami'.split(' ');   4:         var options = { lookUp: data }   5:         jQuery('input#txtCity').autocomplete(options);   6:     });</script>

Here is what that might look like:

City Name: (Enter in the first few letters of a city name.)

Hint! Choose one of these cities: Orlando Jacksonville Pensacola Tallahassee Tampa Clearwater Naples Sarasota Miami

That seems easy enough, right? Give it a go!

Using a Web Service

The next step is to attach this to a web service to make it use dynamic data. Assuming that the web service only returns a single string to the Autocomplete, here is how you’d do that:

    // imaginary web service returning a list of String

    var urlService = 'http://www.domain.com/services/service.svc';

    var options = { serviceUrl: urlService }

    jQuery('input#txtCity').autocomplete(options);

That’s not all that difficult, right? The second half of the call allows you to call and set optional settings, such as minChars to designate how many characters to wait for before the autocomplete task begins. I will be blogging in greater detail about the web service implementation later.

Hopefully, that’s enough to get your interest piqued enough to try this on your own.

Technorati Tags: DotNetNuke,DNN,DNN Blogs,jQuery,ASP.Net,Autocomplete,Intellisense

Relocate Selected Table Row Using jQuery

Thu, 05 Nov 2009 05:47:00 GMT

ASP.NetThu, 05 Nov 2009 05:47:00 GMT

This blog entry is a response to a request from an earlier blog entry, where I used jQuery to search an HTML table. The request as I understand it is this. How can I allow the website visitor click on a row in a HTML table, and relocate that row to the top of the table? Even though I cannot think of a use for this functionality myself, I was intrigued. So here is how I accomplish that task.

First of all, I needed a table to test this on. I used the example from the aforementioned post, as shown below:

     <table id="tblCustomer" cellspacing="0" cellpadding="2" border="1" style="width: 500px;">

        <tbody>

            <tr id="rowHeader" style="font-weight: bold;">

                <td>First</td>

                <td>Last</td>

                <td>Address</td>

                <td>City</td>

                <td>State</td>

            </tr>

            <tr>

                <td>John</td>

                <td>Dough</td>

                <td>123 Main Street</td>

                <td>Orlando</td>

                <td>Florida</td>

            </tr>

            <tr>

                <td>Jane</td>

                <td>Dough</td>

                <td>4367 South Washington Avenue</td>

                <td>Bartow</td>

                <td>California</td>

            </tr>

            <tr>

                <td>Bart</td>

                <td>Thompson</td>

                <td>531 Townsend Circle</td>

                <td>Atlanta</td>

                <td>Georgia</td>

            </tr>

            <tr>

                <td>Sherry</td>

                <td>Simpson</td>

                <td>3346 Presario Lane, Apt. 123</td>

                <td>Seattle</td>

                <td>Washington</td>

            </tr>

            <tr>

                <td>Matt</td>

                <td>Damon</td>

                <td>300 Pounds Street</td>

                <td>Boston</td>

                <td>Massachusetts</td>

            </tr>

        </tbody>

    </table>

This table is just a small example of the kind of data you might be working with. In it, we have a listing of “customers” that are displayed. Note that there is a header row that gives context to the information in each column.

The next thing I did was something that I could have and should have done using actual CSS. I added some visual context to the rows to help you visualize what happened. I did it this way to make it easier to add to my blog.

    function setCssRules() {

        // this would be better implemented in a CSS file

        jQuery('#tblCustomer tr:not(\'#rowHeader\')')

            .css('cursor', 'pointer')

            .mouseover(function() {

                jQuery(this).css('background-color', '#c0c0c0');

            })

            .mouseout(function() {

                jQuery(this).css('background-color', '#ffffff');

            });

    }

Looking at the previous code, I just make the little hand show up when the mouse is over a table row. Then, I change the background color for each row, depending on if the mouse is over the row or not.

I used the jQuery(“#tblCustomer tr:not('#rowHeader')”) selector to exclude the first row in the table from the interactive changes.

Next, I add the following jQuery snippet that grabs the clicked row and moves it to the top of the table.

    // wire up the logic to make our function work

    jQuery('#tblCustomer tr:not(\'#rowHeader\')').click(function() {

        // get a reference to the chosen row

        var oRow = this;

        // remove the row from the table

        jQuery(this).remove();

        // add the row to the top of the table

        jQuery('#tblCustomer').prepend(oRow);

        // backtrack to put the header row back at the top of chosen row

        jQuery('#rowHeader').prependTo('#tblCustomer');

        // reset the CSS rules

        jQuery(this).css('background-color', '#ffffff');

        setCssRules();

    });

Notice that the selector is the same as before. Moving the row to the top of the table is easy. However, this table has a header row, so we need to take that into account. The method I used here allows us to move the header row back to the top after the selected row is moved. Finally, we fix the CSS to revert back to our original CSS changes.

Here is the code in action!

First	Last	Address	City	State
John	Dough	123 Main Street	Orlando	Florida
Jane	Dough	4367 South Washington Avenue	Bartow	California
Bart	Thompson	531 Townsend Circle	Atlanta	Georgia
Sherry	Simpson	3346 Presario Lane, Apt. 123	Seattle	Washington
Matt	Damon	300 Pounds Street	Boston	Massachusetts

That’s it! I hope this helps you. Enjoy the complete snippet here:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>Untitled</title>

        <script language="javascript" type="text/javascript" src="/Resources/shared/scripts/jquery/jquery.min.js"></script>   1:     2:     <script language="javascript" type="text/javascript">jQuery.noConflict();</script>   1:     2: </head>   3: <body>   4:     <table id="tblCustomer" cellspacing="0" cellpadding="2" border="1" style="width: 500px;">   5:         <tbody>   6:             <tr id="rowHeader" style="font-weight: bold;">   7:                 <td>First</td>   8:                 <td>Last</td>   9:                 <td>Address</td>  10:                 <td>City</td>  11:                 <td>State</td>  12:             </tr>  13:             <tr>  14:                 <td>John</td>  15:                 <td>Dough</td>  16:                 <td>123 Main Street</td>  17:                 <td>Orlando</td>  18:                 <td>Florida</td>  19:             </tr>  20:             <tr>  21:                 <td>Jane</td>  22:                 <td>Dough</td>  23:                 <td>4367 South Washington Avenue</td>  24:                 <td>Bartow</td>  25:                 <td>California</td>  26:             </tr>  27:             <tr>  28:                 <td>Bart</td>  29:                 <td>Thompson</td>  30:                 <td>531 Townsend Circle</td>  31:                 <td>Atlanta</td>  32:                 <td>Georgia</td>  33:             </tr>  34:             <tr>  35:                 <td>Sherry</td>  36:                 <td>Simpson</td>  37:                 <td>3346 Presario Lane, Apt. 123</td>  38:                 <td>Seattle</td>  39:                 <td>Washington</td>  40:             </tr>  41:             <tr>  42:                 <td>Matt</td>  43:                 <td>Damon</td>  44:                 <td>300 Pounds Street</td>  45:                 <td>Boston</td>  46:                 <td>Massachusetts</td>  47:             </tr>  48:         </tbody>  49:     </table>  50:     <script language="javascript" type="text/javascript">  51:         jQuery(document).ready(function() {  52:    53:             setCssRules();  54:    55:             // wire up the logic to make our function work  56:             jQuery('#tblCustomer tr:not(\'#rowHeader\')').click(function() {  57:    58:                 // get a reference to the chosen row  59:                 var oRow = this;  60:                 // remove the row from the table  61:                 jQuery(this).remove();  62:                 // add the row to the top of the table  63:                 jQuery('#tblCustomer').prepend(oRow);  64:                 // backtrack to put the header row back at the top of chosen row  65:                 jQuery('#rowHeader').prependTo('#tblCustomer');  66:                 // reset the CSS rules  67:                 jQuery(this).css('background-color', '#ffffff');  68:                 setCssRules();  69:             });  70:    71:         });  72:    73:         function setCssRules() {  74:             // this would be better implemented in a CSS file  75:             jQuery('#tblCustomer tr:not(\'#rowHeader\')')  76:                 .css('cursor', 'pointer')  77:                 .mouseover(function() {  78:                     jQuery(this).css('background-color', '#c0c0c0');  79:                 })  80:                 .mouseout(function() {  81:                     jQuery(this).css('background-color', '#ffffff');  82:                 });  83:         }  84:     </script>

    </body>

    </html>

Technorati Tags: jQuery,JavaScript

Sharing Sharepoint for the Holidays with Holliday

Fri, 23 Oct 2009 13:37:00 GMT

ASP.NetFri, 23 Oct 2009 13:37:00 GMT

Well, that’s the title that our Director of Education, James Taylor (JT), at the Orlando .Net User Group has hashed up. I like it. It’s catchy and fun. December user group meetings tend to fade in terms of attendance, so having a catchy title for the meeting might help. Anyhow, this meeting is going to be about SharePoint, and is featuring John Holliday. If you do not know who John is, he is a Microsoft SharePoint MVP and author on the topic.

In doing a bit of research on John, I found that he has not written just one book, but 2 books, and is part of the Microsoft SharePoint 2007 Wrox Box. Here is a run down of the books that he’s written and co-written:

If you’re not impressed with John already, I don’t know what will impress you. :) Maybe these other details will help…

John is a graduate of Harvard and has been developing software for over 25 years. Some of his clients include IBM, Kodak, and AutoDesk. He created a specialized computing language for constructing legal expert systems. In his spare time, he co-founded the Works of Wonder International and the Art of Living Foundation with his wife.

Come on… You’re impressed now, right?

We are not yet sure what his session at the ONETUG will be focused on yet, but I will let you know when I find out. Until then, mark your calendars for John Holliday's session on December 17, 2009. It is sure to be a great time!

Technorati Tags: Orlando .Net User Group,ONETUG,Community,Events,User Group,SharePoint

Using jQuery to Search an HTML Table

Thu, 24 Sep 2009 21:43:00 GMT

ASP.NetThu, 24 Sep 2009 21:43:00 GMT

Whenever I provide a listing of records, I always provide a way to search those records. Typically, the chosen display for these records comes in the form of an HTML table. My search usually consists of a little T-SQL magic in a stored procedure, which would require a PostBack of some kind to the web server to retrieve the filtered records. This has never been efficient. While thinking of this concept earlier today, I had an epiphany. Why not use jQuery?

I could use jQuery to search the records in one of two ways. First, the obvious way is to use the built-in AJAX feature in jQuery to perform the search on the database, and then return just the data needed to change the HTML mark-up on the fly. While that is cool, my current listing of records is not that large. I wanted a faster solution.

I chose to instead use jQuery to filter out the rendered HTML table rows that do not match the given query. Since jQuery has an extensive and flexible selection of selectors, this was going to be both fun and easy!

I remembered that the jQuery library has a :contains(text) selector that allows you to select HTML tags by checking to see if the tag contains the given text. For instance, the example below uses the contains selector to highlight the bullet with DotNetNuke® in the bullet.

ASP.Net
JavaScript
T-SQL
VB.Net
DotNetNuke

The jQuery code necessary to make that happen is a single line of code:

     jQuery('li:contains(\'DotNetNuke\')').css('color', '#0000ff').css('font-weight', 'bold');
  

Pretty cool, huh? Kind of. Unfortunately, I found out the hard way that the :contains(text) selector is case-sensitive. Thinking about the previous example, this means that using “dotnetnuke” in the contains selector would not have worked. Fortunately, I found a great blog post by Rick Strahl that gave a case-insensitive version of the selector. It worked like a charm! (And also showed me the fact that my idea wasn’t new. D’oh!)

An Example

Expanding on this standard functionality, I created an HTML table with a listing of data records, and a search box above it to filter the results. When you enter text into the textbox, the table automatically filters out rows that do not contain the text you’re searching for. Here’s an example:

Search:

First	Last	Address	City	State
John	Dough	123 Main Street	Orlando	Florida
Jane	Dough	4367 South Washington Avenue	Bartow	California
Bart	Thompson	531 Townsend Circle	Atlanta	Georgia
Sherry	Simpson	3346 Presario Lane, Apt. 123	Seattle	Washington
Matt	Damon	300 Pounds Street	Boston	Massachusetts

I don’t know about you, but I think that’s AWESOME! Some features that I had put into this initially was a dynamic cancel search image, cancel search by pressing ESC, and displaying a message when the search has no results.

The Code Review

It was actually quite easy. Here is a breakdown of the code used to make this happen. (Make sure you look in the code comments to have an explanation of what I am doing and why.)

First, I created a function to reset the search, that could be used in a number of places as needed.

    function resetSearch() {

        // clear the textbox

        jQuery('#txtSearch').val('');

        // show all table rows

        jQuery('#tblSearch tr').show();

        // remove any no records rows

        jQuery('.norecords').remove();

        // remove the cancel search image

        jQuery('#imgSearch').hide();

        // make sure we re-focus on the textbox for usability

        jQuery('#txtSearch').focus();

    }

Next, I wrapped all of my code in a .ready() block to make sure it executes when it is supposed to, beginning with the initial steps to set-up the UI.

    // hide the cancel search image

    jQuery('#imgSearch').hide();

    // reset the search when the cancel image is clicked

    jQuery('#imgSearch').click(function() {

        resetSearch();

    });

    // cancel the search if the user presses the ESC key

    jQuery('#txtSearch').keyup(function(event) {

        if (event.keyCode == 27) {

            resetSearch();

        }

    });

Now that I had everything set-up, I was able to write the real magic of the search. This is where the search gets executed and handled. This is also in the.ready() block.

    // execute the search

    jQuery('#txtSearch').keyup(function() {

        // only search when there are 3 or more characters in the textbox

        if (jQuery('#txtSearch').val().length > 2) {

            // hide all rows

            jQuery('#tblSearch tr').hide();

            // show the header row

            jQuery('#tblSearch tr:first').show();

            // show the matching rows (using the containsNoCase from Rick Strahl)

            jQuery('#tblSearch tr td:containsNoCase(\'' + jQuery('#txtSearch').val() + '\')').parent().show();

            // show the cancel search image

            jQuery('#imgSearch').show();

        }

        else if (jQuery('#txtSearch').val().length == 0) {

            // if the user removed all of the text, reset the search

            resetSearch();

        }

        // if there were no matching rows, tell the user

        if (jQuery('#tblSearch tr:visible').length == 1) {

            // remove the norecords row if it already exists

            jQuery('.norecords').remove();

            // add the norecords row

            jQuery('#tblSearch').append('<tr class="norecords"><td colspan="5" class="Normal">No records were found</td></tr>');

        }

    });

The Full Code Snippet

Here is the full snippet of code that you can use to try this yourself.

    <html>

    <head>

        <title>Untitled</title>

        <script language="javascript" type="text/javascript" src="/Resources/Shared/Scripts/jquery/jquery.min.js"></script>   1:     2: </head>   3: <body>   4:     <p style="text-align:right;width:500px;">   5:         <span style="font-weight:bold;">Search:</span> <input type="text" id="txtSearch" name="txtSearch" maxlength="50" />&nbsp;    6:         <img id="imgSearch" src="/images/cancel.gif" alt="Cancel Search" title="Cancel Search" style="width:150px;width:14px;height:14px;" />   7:     </p>   8:     <table id="tblSearch" cellpadding="2" cellspacing="0" border="1" style="width:500px;">   9:         <tr style="font-weight:bold;">  10:             <td>First</td>  11:             <td>Last</td>  12:             <td>Address</td>  13:             <td>City</td>  14:             <td>State</td>  15:         </tr>  16:         <tr>  17:             <td>John</td>  18:             <td>Dough</td>  19:             <td>123 Main Street</td>  20:             <td>Orlando</td>  21:             <td>Florida</td>  22:         </tr>  23:         <tr>  24:             <td>Jane</td>  25:             <td>Dough</td>  26:             <td>4367 South Washington Avenue</td>  27:             <td>Bartow</td>  28:             <td>California</td>  29:         </tr>  30:         <tr>  31:             <td>Bart</td>  32:             <td>Thompson</td>  33:             <td>531 Townsend Circle</td>  34:             <td>Atlanta</td>  35:             <td>Georgia</td>  36:         </tr>  37:         <tr>  38:             <td>Sherry</td>  39:             <td>Simpson</td>  40:             <td>3346 Presario Lane, Apt. 123</td>  41:             <td>Seattle</td>  42:             <td>Washington</td>  43:         </tr>  44:         <tr>  45:             <td>Matt</td>  46:             <td>Damon</td>  47:             <td>300 Pounds Street</td>  48:             <td>Boston</td>  49:             <td>Massachusetts</td>  50:         </tr>  51:     </table>  52:     <script language="javascript" type="text/javascript">  53:         jQuery.expr[":"].containsNoCase = function(el, i, m) {  54:             var search = m[3];  55:             if (!search) return false;  56:             return eval("/" + search + "/i").test($(el).text());  57:         };  58:    59:         jQuery(document).ready(function() {  60:             // used for the first example in the blog post  61:             jQuery('li:contains(\'DotNetNuke\')').css('color', '#0000ff').css('font-weight', 'bold');  62:    63:             // hide the cancel search image  64:             jQuery('#imgSearch').hide();  65:    66:             // reset the search when the cancel image is clicked  67:             jQuery('#imgSearch').click(function() {  68:                 resetSearch();  69:             });  70:    71:             // cancel the search if the user presses the ESC key  72:             jQuery('#txtSearch').keyup(function(event) {  73:                 if (event.keyCode == 27) {  74:                     resetSearch();  75:                 }  76:             });  77:    78:             // execute the search  79:             jQuery('#txtSearch').keyup(function() {  80:                 // only search when there are 3 or more characters in the textbox  81:                 if (jQuery('#txtSearch').val().length > 2) {  82:                     // hide all rows  83:                     jQuery('#tblSearch tr').hide();  84:                     // show the header row  85:                     jQuery('#tblSearch tr:first').show();  86:                     // show the matching rows (using the containsNoCase from Rick Strahl)  87:                     jQuery('#tblSearch tr td:containsNoCase(\'' + jQuery('#txtSearch').val() + '\')').parent().show();  88:                     // show the cancel search image  89:                     jQuery('#imgSearch').show();  90:                 }  91:                 else if (jQuery('#txtSearch').val().length == 0) {  92:                     // if the user removed all of the text, reset the search  93:                     resetSearch();  94:                 }  95:    96:                 // if there were no matching rows, tell the user  97:                 if (jQuery('#tblSearch tr:visible').length == 1) {  98:                     // remove the norecords row if it already exists  99:                     jQuery('.norecords').remove(); 100:                     // add the norecords row 101:                     jQuery('#tblSearch').append('<tr class="norecords"><td colspan="5" class="Normal">No records were found</td></tr>'); 102:                 } 103:             }); 104:         }); 105:   106:         function resetSearch() { 107:             // clear the textbox 108:             jQuery('#txtSearch').val(''); 109:             // show all table rows 110:             jQuery('#tblSearch tr').show(); 111:             // remove any no records rows 112:             jQuery('.norecords').remove(); 113:             // remove the cancel search image 114:             jQuery('#imgSearch').hide(); 115:             // make sure we re-focus on the textbox for usability 116:             jQuery('#txtSearch').focus(); 117:         } 118:     </script>

    </body>

    </html>

Technorati Tags: jQuery,Search

Wizard Control: Programmatically Access the HeaderTemplate Child Controls

Tue, 15 Sep 2009 15:29:00 GMT

ASP.NetTue, 15 Sep 2009 15:29:00 GMT

I just began using the Wizard Web Server Control for the first time recently. (Can you believe it?) As it turns out, this control is very useful, and it allows you to easily manage short, wizard-like workflows within ASP.Net. I am using this control inside of a new custom DotNetNuke® module I am writing, where I take a visitor through an application process.

One of the features of the Wizard control is the HeaderTemplate. The HeaderTemplate allows you to place a header section at the top of the control throughout the defined steps. This is useful for usability to give you another way to visually tell the visitor what they are doing, or what step they’re on. Here is a simplistic example of the control, using the HeaderTemplate feature.

     <asp:Wizard ID="wizSignUp" runat="server" ActiveStepIndex="0" DisplaySideBar="false">

        <HeaderTemplate>

            <asp:Label ID="lblHeader" runat="server" />

        </HeaderTemplate>

        <WizardSteps>

            <asp:WizardStep ID="wizStep_0" runat="server" AllowReturn="true" StepType="Start">

                <h3 id="wizHeaderStep0" runat="server" />

                <p><asp:Label ID="lblWizStep_0" runat="server" /></p>

            </asp:WizardStep>

            <asp:WizardStep ID="wizStep_1" runat="server" AllowReturn="false" StepType="Step">

                <h3 id="wizHeaderStep1" runat="server" />

                <p><asp:TextBox ID="txtWizStep_1" runat="server" ReadOnly="true" /></p>

                <p><asp:CheckBox ID="chkWizStep_1" runat="server" TextAlign="Right" /></p>

            </asp:WizardStep>

            <asp:WizardStep ID="wizStep_2" runat="server" AllowReturn="false" StepType="Step">

                <h3 id="wizHeaderStep2" runat="server" />

                <p><asp:Label ID="lblWizStep_2" runat="server" /></p>

            </asp:WizardStep>

            <asp:WizardStep ID="wizStep_03" runat="server" AllowReturn="false" StepType="Finish">

                <h3 id="wizHeaderStep3" runat="server" />

                <p><asp:Label ID="lblWizStep_3" runat="server" /></p>

            </asp:WizardStep>

        </WizardSteps>

    </asp:Wizard>

In the HeaderTemplate, I have a simple Label control. This could have been anything, as complicated as a table with a variety of controls.

What’s not immediately clear in this example though, is how to access the properties of the Label control programmatically. For example, in DNN, I would obviously want to Localize the text in the label. There unfortunately, is not an event to plug into like we do with controls such as the GridView control to bind the text of the Label.

However, the solution to access the controls in the HeaderTemplate is much more simple than you might think. All you have to do is know that there is a child control created at runtime, called the HeaderContainer. First off, I don’t think anyone knows that the HeaderContainer control exists without some thorough investigation, a good web search, or being told.

Here is an example of binding to my Label control, which I have done in the Page_Load event in my example.

There are obviously more and better places to bind to this control, depending on your use case and business requirements. Remember, this is an example.

    Dim objControl As Object = Me.wizSignUp.FindControl("HeaderContainer").FindControl("lblHeader")

    If Not objControl Is Nothing Then

        Dim lblControl As New System.Web.UI.WebControls.Label

        lblControl = CType(objControl, System.Web.UI.WebControls.Label)

        lblControl.Text = Localization.GetString("WizardHeader.Text", Me.LocalResourceFile)

    End If

There is another variation of this that might be of more use to you, and maybe even faster (I haven’t benchmarked it).

    Dim objControl As Object = Me.wizSignUp.FindControl("HeaderContainer$lblHeader")

    If Not objControl Is Nothing Then

        Dim lblControl As New System.Web.UI.WebControls.Label

        lblControl = CType(objControl, System.Web.UI.WebControls.Label)

        lblControl.Text = Localization.GetString("WizardHeader.Text", Me.LocalResourceFile)

    End If

If you notice, we do not directly reference the HeaderContainer control, but instead include it in our control collection to query, through the control name, HeaderContainer$lblHeader.

Technorati Tags: DotNetNuke,DNN,DNN Blogs,ASP.Net,Localization

Unpacking Compressed JavaScript Code

Tue, 23 Jun 2009 15:31:00 GMT

ASP.NetTue, 23 Jun 2009 15:31:00 GMT

I am working on a project where we have an outside party developing a DotNetNuke® module for us that relies almost entirely on client side code. When I way client-side code, I mean JavaScript, the jQuery library, and various jQuery plug-ins. The module itself is really a beautiful thing. It is actually able to be used outside of DNN without any problems at all.

Well, like any other project in the history of time, things go wrong. This time, I need to troubleshoot part of the the JavaScript chain of code to find out where an object is not getting reassigned. However, the JavaScript code is all compressed using the JavaScript Compressor online utility (based on the Packer by Dean Edward). What does that mean? That means that instead of having line breaks and indents throughout our client-side scripts, they are all removed, along with any code comments. This can significantly reduce page load times, and decrease the time it takes for the page to render in the browser as well. Not to mention that you’d save a ton of bandwidth.

So, instead of something like this:

     /*

    Some header comment here

    */

    var will = 'awesome';

    function awesomeness() {

        if (will == 'awesome') {

            alert('Will is totally wicked awesome!');

        }

    }

    jQuery(document).ready( function() { awesomeness(); } );

You would see something like this:

    var will='awesome';function awesomeness(){if(will=='awesome'){alert('Will is totally wicked awesome!')}}jQuery(document).ready(function(){awesomeness()});

For a JavaScript library or file containing hundreds or thousands of lines of code, you should be able to quickly see how effective this would be overall on a busy website.

Ideally, you would have two copies of every JavaScript file during development. The first file would contain the regular JavaScript, with all of its comments, indentions, line breaks, and so on. The copy of this file would contain the compressed version of the same code. Typically, the files would be something like: YourCompany.js, and YourCompany.compressed.js.

The problem I ran into today, was that our original JavaScript file did not contain the same code that was in the compressed version. To make matters worse, the compressed version of the code was the most recent version that I needed. Unfortunately, the JavaScript Compressor utility that we’ve been using does not yet employ a decompression or unpacking feature for code that was already compressed. That feature only exists for code that was compressed on the previous page load.

Our consultant is on vacation right now, and our client-side bug is live on our site, so please imagine how I panicked. :)

After a little while, and some diligent research, I happened across a blog post talking about “beautifying” JavaScript code. Basically, it was talking about the very thing I am talking to you about right now. It had the direct link to another free online tool. This one has the sole purpose of decompressing or unpacking JavaScript that was previously compressed like mine. Woo hoo!

Within a few clicks and seconds, I used the JavaScript Beautifier to make my JavaScript be human-readable once again. Awesome!

Technorati Tags: DotNetNuke,DNN Blogs,JavaScript

Iterating Through to Find Invalid XML Files

Wed, 25 Feb 2009 01:22:00 GMT

I have custom DotNetNuke module that displays various information about hotels. As you might imagine, this information could become quite lengthy for each hotel. The module looks in the requested URL, and uses the hotel information in the URL to determine where to look for to load its information.

While the hotel information could come from a database table, it instead comes from an XML file. There is a single XML file for each hotel. These XML files are downloaded from a data provider regularly to make sure the information is up-to-date. There are well more than 100,000 XML files in my situation.

Recently, some of these files have become invalid. After some troubleshooting, I found that there are XML fields that now contained HTML. On its own, the new HTML makes the XML files invalid.

Why is HTML Invalid in XML?

By default, you cannot put HTML into an XML document. The XML parser in all languages will throw an error when you try to access the XML document programmatically. This is easily fixed. All you have to do is add the CDATA section elements inside of the invalid XML elements to fix this. For example, the following snippet shows an XML element with invalid content.

<descriptionText>The <u>really cool</u> brown fox ran fast & hard.</descriptionText>

Unfortunately, XML parsers will throw an error when this element is attempted to be parsed. The <, >, and & characters are "illegal" characters and cannot be used. Instead, the previous snippet could be parsed by implementing the CDATA element.

<descriptionText><![CDATA[The <u>really cool</u> brown fox ran fast & hard.]]></descriptionText>

All I did was add the <![CDATA]]> element to wrap the text. Anything inside of the CDATA element is considered "legal", resulting in the parser ignoring any reserved or illegal characters.

Which XML Files are Invalid?

The hard way to find out what files are invalid is to open them one at a time in an editor that parses the file. We obviously wouldn't want to do that. In my situation, the first thing I needed to find out is exactly how many of my 100,000+ XML files are invalid. This would help me decide how to proceed in terms of a solution.

Instead, I wrote a quick and dirty APSX web page to iterate through all of the XML files, attempt to parse them, and display the file name if it is invalid. Here is a screen shot of what that might look like once the web page is run.

I have attached my sample web page to this blog entry. The mark-up and codebehind are commented thoroughly to assist you. You should be able to just download it and place it in your website. In order for it to work though, you first need to go into the codebehind, and change the file path it searches through.

This file searches through the directory specified in the code behind. Then, it attempts to load each XML file into an in-memory XmlDocument object. If an error occurs, the XML file is invalid. It's as simple as that.

This file searched through 100,000+ XML files in less than 30 seconds for me. In addition, it showed me the file path, file name, and made each file clickable. This allowed me to open the file to fix it individually if I decided to do so.

Attached File: FindErroredXMLFiles.zip

Technorati Tags: DNN, DotNetNuke, DNN Blog, XML

Using jQuery to Highlight (Select) All Text in a Textbox

Wed, 11 Feb 2009 10:45:00 GMT

The folks working on jQuery have really done a fantastic job of making the lives of developers across the globe earier. But they do not need me to tell them that. :)

I am so happy that the DotNetNuke Core Team decided to put jQuery support into the DNN Core. That has simplified and decreased UI development time for me exponentially. And it has made UI development more fun too! Moving on...

Here is the scenario that I ran into today. A website visitor enters a value into a textbox, or selects a value from an autocomplete implementation. No matter how much text is in the textbox, the novice web form user will not know how to quickly replace that text. They will simply click once in the textbox, and then use many keystroke of both the <Delete> and <Backspace> keys to remove the text before they enter in new text. This is not a favorable usability experience.

Here is how you might fix that: make the textbox automatically highlight or select all of the text in the textbox when the visitor clicks in it. The main problem has always been getting things like this to work in all browsers. Here is how you would implement this using jQuery.

Let's assume that we have the following text input:

<input type="text" id="txtInput" />

In most cases, we would want to have this feature available to all textboxes across our website, so we would create a function to handle this, and call it as needed. Calling this function with the expected argument will make execute the highlighting of the text.

function selectAllText(textbox) {
    textbox.focus();
    textbox.select();
}

Assuming you are developing against DotNetNuke 5, or have jQuery already imported into your website, add the following jQuery to your site for each textbox. (If you have a lot of textboxes, we could do this differently, but that's for a different post.)

jQuery('#txtInput').click(function() { selectAllText(jQuery(this)) });

Now, when you run the code, you will end up with a working textbox, like the example below.

Technorati Tags: DNN, DotNetNuke, DNN Blog, jQuery, 5.00.00

jQuery - Change the Default Option in a Select Listbox

Wed, 28 Jan 2009 22:20:00 GMT

If you haven't already heard all of the hub-bub about jQuery, it is quite simple. jQuery is an open source JavaScript library. It's main purpose is to make your JavaScript development easier, and faster. Oh BOY does it!!! We have been using it on our production sites for about 2 weeks now.

First Day Using jQuery

Today, I had to change the default selection of a SELECT listbox on the client-side, after page load in a DotNetNuke module. jQuery was the obvious candidate to make this happen. Especially since I've done this before using JavaScript, and I know how much code it can take to make it happen reliably and on all major web browsers.

I set out to make this happen. However, I fell into a learning curve that I didn't expect to hit. It reminded me of when I was trying to first learn VB.Net, and I was thinking of binding data recordset-style instead of the prescribed (at the time) dataset style. I was just thinking in the wrong way. I had to adapt and understand how I was supposed to use the API.

After a full day of using jQuery, I cannot believe how powerful using jQuery can be.

Changing the Default Select Listbox Option

I had a form that had an HTML listbox on the page. It rendered, selecting a default value that I was asked to change to another value. This is an ideal test case. Let's say that we have the following SELECT element on a web page.

<select id="cboDays" name="cboDays">
    <option value="Sunday" selected="selected">Sunday</option>
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>
    <option value="Friday">Friday</option>
    <option value="Saturday">Saturday</option>
</select>

The default selected value is the Sunday OPTION. For our example, let's say that we need for the default value on page load to be Wednesday instead.

We could do this via our typical JavaScript methods, but that is a lot of work. Let's instead use jQuery. First of all, you need to download the jQuery script library and include it on your website/page.

Now I am going to hit you with a huge eye opener. Here is the jQuery script that will solve our problem:

jQuery("select#cboDays option[selected]").removeAttr("selected");
jQuery("select#cboDays option[value='Wednesday']").attr("selected", "selected");

Could it be??? Only two lines of JavaScrip code??? Yes. It works. I could go into very great detail about all of the ins and outs of selectors, but the jQuery documentation already does a great job of it for me.

Basically, the first portion, jQuery(string) is the selector. Selectors always return a collection of Object. Something I LOVE about jQuery is its CSS-style of selecting HTML elements on the page. This makes it incredibly easy to find and manage HTML elements if you've had any experience using CSS at all.

In the first line of code, all OPTION children of the SELECT element with the ID of "cboDays" are selected. In our case, there is only one element. The second method call seeks to remove any SELECTED attributes in the OPTION tag.

The next line of code uses a similar selector, but only returns a single object matching the OPTION child of the same SELECT element. The OPTION element we selected was the one with the attribute, VALUE, having the value of "Wednesday."

Sounds simple enough, right? I am geeking out over this!

I hope that this blog entry gives you a little more confidence to write your own jQuery scripts, or answers a question you've had.

Technorati Tags: DNN, DotNetNuke, DNN Blog, jQuery

String Performance Part Two - String Concatenation

Thu, 04 Dec 2008 17:43:00 GMT

In a follow-up to my previous post about string performance, I decided to do more of side-by-side comparison of the most common string concatenation techniques.

We all know these common techniques to be using the typical concatenation characters (& or +), String.Concat, and the StringBuilder. I have read many times and saw pretty graphs telling me about how high performing the String.Concat method is over the traditional concatenation method. I was highly surprised to find results to contradict these findings in my own testing.

So here is how I set-up this testing... I created a Console Application and created code to build out a list of a string object, and put that information into a dynamically generated HTML table. The code used to perform this is at the bottom of the blog entry. Within the HTML table code, I left it open to repeat the table row generation from the list object. This way, we can run as many iterations through string objects as we want.

The first test went as expected. I ran through a single iteration. The standard concatenation method was the only method to cost more than 0 milliseconds.

Bumping the iterations from 1 to 5 began to show me something I didn't expect. The String.Concat method and standard concatenation ran even with each other at 15 milliseconds, versus the StringBuilder which was still 0 milliseconds.

Doubling the iterations at 10 showed us that the String.Concat method was beginning to slow down in comparison to the standard concatenation method. The StringBuilder was still running under 0 milliseconds.

The previous finding remained true until we approach 500 iterations. Once there, we begin to see the StringBuilder actually spend some ticks getting finished. The other methods take longer, but the percentages are the same.

This puts a kink in the way I do things and what I have witnessed to work (outside of benchmarks). So I am not sure how I will proceed at this point.

Here is the code used to determine these findings:

    Private Sub StringConcatenationCompare()

        Dim strOutput As String = String.Empty

        Dim sbOutput As New Text.StringBuilder

        ' get a list of string objects to concatenate later

        Dim lstCustomer As New List(Of Customer)

        lstCustomer = GetCustomerList()

        ' create the timer objects

        Dim dteStart As DateTime = Nothing

        Dim spnTime As TimeSpan = Nothing

        ' set up a counter to reiterate through concantenations to simulate a high load

        Dim intCount As Integer = 500

        Console.WriteLine(String.Format("Testing the conditions {0} times.", intCount.ToString))

        '

        ' BEGIN NORMAL CONCATENATION

        '

        Console.WriteLine(Environment.NewLine)

        Console.WriteLine("TEST CONDITION:")

        Console.WriteLine("strOutput += ""<td>"" + item.FirstName + "" "" + item.LastName + ""</td>""")

        ' build a table of customers

        dteStart = DateTime.Now

        strOutput = "<table cellpadding=""0"" cellspacing=""0"" border=""0"" width=""100%"">"

        strOutput += "<tr>"

        strOutput += "<td>Full Name</td>"

        strOutput += "<td>First Name</td>"

        strOutput += "<td>Last Name</td>"

        strOutput += "<td>City</td>"

        strOutput += "<td>State</td>"

        strOutput += "</tr>"

        For intI As Integer = 0 To intCount

            For Each item As Customer In lstCustomer

                strOutput += "<tr>"

                strOutput += "<td>" + item.FirstName + " " + item.LastName + "</td>"

                strOutput += "<td>" + item.FirstName + "</td>"

                strOutput += "<td>" + item.LastName + "</td>"

                strOutput += "<td>" + item.City + "</td>"

                strOutput += "<td>" + item.State + "</td>"

                strOutput += "</tr>"

            Next

        Next

        strOutput += "</table>"

        ' display time of output

        spnTime = DateTime.Now.Subtract(dteStart)

        Console.WriteLine(String.Format("Standard concatenation took {0} milliseconds.", spnTime.Milliseconds.ToString))

        ' BEGIN reset

        strOutput = String.Empty

        ' END reset

        '

        ' BEGIN String.Concat CONCATENATION

        '

        Console.WriteLine(Environment.NewLine)

        Console.WriteLine("TEST CONDITION:")

        Console.WriteLine("strOutput = String.Concat(strOutput, ""<td>"", item.FirstName, "" "", item.LastName, ""</td>""")

        ' build a table of customers

        dteStart = DateTime.Now

        strOutput = "<table cellpadding=""0"" cellspacing=""0"" border=""0"" width=""100%"">"

        strOutput = String.Concat(strOutput, "<tr>")

        strOutput = String.Concat(strOutput, "<td>Full Name</td>")

        strOutput = String.Concat(strOutput, "<td>First Name</td>")

        strOutput = String.Concat(strOutput, "<td>Last Name</td>")

        strOutput = String.Concat(strOutput, "<td>City</td>")

        strOutput = String.Concat(strOutput, "<td>State</td>")

        strOutput = String.Concat(strOutput, "</tr>")

        For intI As Integer = 0 To intCount

            For Each item As Customer In lstCustomer

                strOutput = String.Concat(strOutput, "<tr>")

                strOutput = String.Concat(strOutput, "<td>", item.FirstName, " ", item.LastName, "</td>")

                strOutput = String.Concat(strOutput, "<td>", item.FirstName, "</td>")

                strOutput = String.Concat(strOutput, "<td>", item.LastName, "</td>")

                strOutput = String.Concat(strOutput, "<td>", item.City, "</td>")

                strOutput = String.Concat(strOutput, "<td>", item.State, "</td>")

                strOutput = String.Concat(strOutput, "</tr>")

            Next

        Next

        strOutput = String.Concat(strOutput, "</table>")

        ' display time of output

        spnTime = DateTime.Now.Subtract(dteStart)

        Console.WriteLine(String.Format("String.Concat concatenation took {0} milliseconds.", spnTime.Milliseconds.ToString))

        '

        ' BEGIN StringBuilder CONCATENATION

        '

        Console.WriteLine(Environment.NewLine)

        Console.WriteLine("TEST CONDITION:")

        Console.WriteLine("(used the stringbuilder)")

        ' build a table of customers

        dteStart = DateTime.Now

        sbOutput.Append("<table cellpadding=""0"" cellspacing=""0"" border=""0"" width=""100%"">")

        sbOutput.Append("<tr>")

        sbOutput.Append("<td>Full Name</td>")

        sbOutput.Append("<td>First Name</td>")

        sbOutput.Append("<td>Last Name</td>")

        sbOutput.Append("<td>City</td>")

        sbOutput.Append("<td>State</td>")

        sbOutput.Append("</tr>")

        For intI As Integer = 0 To intCount

            For Each item As Customer In lstCustomer

                sbOutput.Append("<tr>")

                sbOutput.Append("<td>")

                sbOutput.Append(item.FirstName)

                sbOutput.Append(" ")

                sbOutput.Append(item.LastName)

                sbOutput.Append("</td>")

                sbOutput.Append("<td>")

                sbOutput.Append(item.FirstName)

                sbOutput.Append("</td>")

                sbOutput.Append("<td>")

                sbOutput.Append(item.LastName)

                sbOutput.Append("</td>")

                sbOutput.Append("<td>")

                sbOutput.Append(item.City)

                sbOutput.Append("</td>")

                sbOutput.Append("<td>")

                sbOutput.Append(item.State)

                sbOutput.Append("</td>")

                sbOutput.Append("</tr>")

            Next

        Next

        sbOutput.Append("</table>")

        ' display time of output

        spnTime = DateTime.Now.Subtract(dteStart)

        Console.WriteLine(String.Format("StringBuilder concatenation took {0} milliseconds.", spnTime.Milliseconds.ToString))

    End Sub

    Private Function GetCustomerList() As List(Of Customer)

        Dim lstCustomer As New List(Of Customer)

        Dim objCustomer As Customer = Nothing

        objCustomer = New Customer

        With objCustomer

            .FirstName = "John"

            .LastName = "Dough"

            .City = "Orlando"

            .State = "FL"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Bill"

            .LastName = "Gates"

            .City = "Seattle"

            .State = "WA"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Barack"

            .LastName = "Obama"

            .City = "Washington"

            .State = "DC"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "John"

            .LastName = "McCain"

            .City = "Phoenix"

            .State = "AR"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Keanu"

            .LastName = "Reeves"

            .City = "Hollywood"

            .State = "CA"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Stephen"

            .LastName = "Colbert"

            .City = "New York"

            .State = "NY"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Jason"

            .LastName = "Bourne"

            .City = "Anytown"

            .State = "USA"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "LaDanian"

            .LastName = "Tomlinson"

            .City = "San Diego"

            .State = "CA"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Clinton"

            .LastName = "Hart"

            .City = "Ocala"

            .State = "FL"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Henry"

            .LastName = "Ford"

            .City = "Detroit"

            .State = "MI"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Michael"

            .LastName = "Turner"

            .City = "Atlanta"

            .State = "GA"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Grant"

            .LastName = "Wilson"

            .City = "Warwick"

            .State = "RI"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Claire"

            .LastName = "Bennett"

            .City = "Costa Mesa"

            .State = "CA"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Michael"

            .LastName = "Schofield"

            .City = "Joliet"

            .State = "IL"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Drew"

            .LastName = "Brees"

            .City = "New Orleans"

            .State = "LA"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Criss"

            .LastName = "Angel"

            .City = "Las Vegas"

            .State = "NV"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Rex"

            .LastName = "Grossman"

            .City = "Chicago"

            .State = "IL"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Antonio"

            .LastName = "Cromartie"

            .City = "Tallahassee"

            .State = "FL"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Dan"

            .LastName = "Marino"

            .City = "Miami"

            .State = "FL"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Hulk"

            .LastName = "Hogan"

            .City = "Tampa"

            .State = "FL"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Michael"

            .LastName = "Winslow"

            .City = "Orlando"

            .State = "FL"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Kurt"

            .LastName = "Angle"

            .City = "Orlando"

            .State = "FL"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "John"

            .LastName = "Travolta"

            .City = "Ocala"

            .State = "FL"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Leo"

            .LastName = "LaPorte"

            .City = "San Francisco"

            .State = "CA"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Kevin"

            .LastName = "Rose"

            .City = "San Francisco"

            .State = "CA"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Mohinder"

            .LastName = "Suresh"

            .City = "New York"

            .State = "NY"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Stephen"

            .LastName = "King"

            .City = "Bangor"

            .State = "ME"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Dan"

            .LastName = "Fouts"

            .City = "San Diego"

            .State = "CA"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Junior"

            .LastName = "Seau"

            .City = "San Diego"

            .State = "CA"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Kurt"

            .LastName = "Warner"

            .City = "Phoenix"

            .State = "AZ"

        End With

        lstCustomer.Add(objCustomer)

        objCustomer = New Customer

        With objCustomer

            .FirstName = "Russ"

            .LastName = "Rollins"

            .City = "Orlando"

            .State = "FL"

        End With

        lstCustomer.Add(objCustomer)

        Return lstCustomer

    End Function

    Public NotInheritable Class Customer

        Private p_FirstName As String

        Private p_LastName As String

        Private p_City As String

        Private p_State As String

        Public Property FirstName() As String

            Get

                Return p_FirstName

            End Get

            Set(ByVal value As String)

                p_FirstName = value

            End Set

        End Property

        Public Property LastName() As String

            Get

                Return p_LastName

            End Get

            Set(ByVal value As String)

                p_LastName = value

            End Set

        End Property

        Public Property City() As String

            Get

                Return p_City

            End Get

            Set(ByVal value As String)

                p_City = value

            End Set

        End Property

        Public Property State() As String

            Get

                Return p_State

            End Get

            Set(ByVal value As String)

                p_State = value

            End Set

        End Property

    End Class

Technorati Tags: Strings ,Performance ,VB

String Performance Benchmarks

Thu, 04 Dec 2008 01:11:00 GMT

I have a public tutorial document that I have just found out needs a little revisioning. Generally, you do not ever want to put string objects together using the standard concatenation character such as "&" or "+". The problem lies in how the string is handled at runtime.

For each concatenation character, a new string object is created in memory, and then the two string objects are put together. It may not sound like it from this short description, but such practices can bring a busy application down to its knees in no time flat.

Generally, for smaller strings, you would never use the StringBuilder object. In those cases, we use String.Concat or String.Format. But which one is more efficient?

I decided to test this out in a console application. I created two loops that each built a string using either the format or concat methods exclusively. Here are the results...

First, I tried something small. This is similar to what you might see on a single page load - if your web page does not havea whole lot of content.

What you see above is nothing out of the ordinary. The two strings are each built 15 times and then the loops quit, reporting the elapsed time it took to build each string.

Once we get to something like 45,000 iterations of the string build, we begin to see some impact where String.Format begins to under-perform by 100%.

This behavior continues through 200,000 iterations.

Now, when we bump the string build iterations to 2,000,000 the time it takes for the strings to build actually reverses!

You can see in the above screenshot that the String.Concat method of building strings actually is over 150% slower now. That is incredible?

What does this happen? I have no idea. But realize this. Unless you are working on a project where you have millions of string builds in a short time period, this final test is useless. Informative, but useless.

So which is faster? String.Concat certainly appears to be the clear winner. However, this is also a very simplified example of putting strings together.

While in instances where there are only a couple of strings being put together at a time there appears to be no benefit either way, I must urge you to remember that even thousandths of a second add up. In no time at all, you could wind up with an under performing application.

The bottom line is that you should perform this same testing yourself against your own application.

Technorati Tags: Strings ,Performance ,VB

"Ouch! I think something up and bit me."

Wed, 19 Nov 2008 15:26:00 GMT

First, a funny quote because I have to share it with SOMEONE!

“I can picture in my mind a world without war, a world without hate. And I can picture us attacking that world, because they'd never expect it.”
- Jack Handy

No matter how long you have been doing a particular job, there are things that will from time to time jump up and bite you in the rear. It would be expected though, if these things were new problems that you had never before encountered or heard of. However, it seems to me that this usually happens not from new problems, but from old problems from long ago that you failed to prevent this one time. So here is a fresh reminder to an old problem.

Case and point…

I was rolling out some code today to update a website I am a part of, called RezHub.com, you may have heard of it. Part of this upgrade was to migrate the website and the remaining child assemblies to .Net Framework version 3.5. Well, upon rolling out the code, I quickly realized when I attempted to view the site that I had not yet upgraded the web.config to compile against the 3.5 framework. That’s not a problem. I quickly diff’d the web.config files from the staging website to the production website.

Time to view the website again… “Uh oh! The site is still not compiling! What in the world is going on?! Everything is there!” Now enter the curse words.

The typical thing would be to either set the web.config to show the error remotely, or to view the site locally (on the same server) if you can. Well, I first set the error to display externally. I changed the customErrors setting to “Off.” When I refreshed the page, the website didn’t appear to compile like it normally does with a web.config change. “Hmmm…”

I double-checked the web.config setting and it was still set to show the compilation error to the world. As a last ditch effort, the dim lightbulb in my head lit up and told me to view the site locally. Duh! I don’t know why I did that to begin with.

Needless to say, but the error showed locally when it wouldn’t show externally, even though the web.config was set to allow it to. If you are confused right now, think about this… The default setting for web applications is to not show the compilation errors externally. So, if the error is not showing externally when you specified it to do so, then there is a problem with your web.config. Either it doesn’t exist in the correct location, or there was a parsing error when reading the XML in the web.config document.

My problem ended up being the latter. When adding the XML for the .Net 3.5 migration, I accidentally added an extra closing element for one of the sections. This resulted in an invalid XML document, and the web server not being able to parse it. Viewing the site locally told me that.

Stupid Will! :)

SubSonic Comes Back with a Vengeance!

Wed, 12 Nov 2008 08:37:00 GMT

I almost exclusively use SubSonic as my DAL to provide a quick, easy, and thoughtless way of getting to my data, and worry about my business logic.

Well, Rob Conery has used his massive brain (and programming laziness, explained in his post - we all have that gene) to put together the best installment of SubSonic yet, in version 3. In his blog post, he details the journey and what is to come. So, I will not bore you with my dribble.

I will leave you with this nugget of information though. He was hired onto the Microsoft team mostly as a result of what he was able to accomplish with SubSonic. Now, he brings his inside knowledge to us by marrying SubSonic and Linq together! Unfortunately though, it's not backwards compatible. I am afraid with the overhaul, that this was not possible.

Seriously, read his blog post! :)

[UPDATE]
11/13/2008 - Rob Conery has another preview blog post:
http://tinyurl.com/6gd9gn
[/UPDATE]

Where is .Net Framework 3.5 for Windows x64?

Mon, 20 Oct 2008 08:18:00 GMT

I have a few 64-bit servers, so for those of you who are not running anything in 64-bit yet, there is great care that should be taken to ensure that you have the correct download and/or install packages for ALL software. While you can indeed run 32-bit software on a 64-bit system, it is recommended to use a 64-bit version is it is available.

That being said, not all software providers offer 64-bit versions of their applications. And of those that do, there are compatibility requirements to look at with existing software packages that may already be installed on your system.

However, once you get by all of those generalities, we come to the topic at hand... Where in the heck is the 64-bit version of the .Net Framework for version 3.5???

I easily found the 3.5 framework to install here:

.Net Framework, version 3.5 Download

Unfortunately, when you read though the download details, it offers no clues as to whether you are supposed to use this download for 32-bit or 64-bit Windows. The rule of thumb is, if it doesn't say, then it is for 32-bit.

Right when I was about to exhaust myself and resort to a post in the ASP.Net forums, I found a link explaining the 3.5 .Net framework in greater detail.

I was both happy and surprised to find out that the .Net 3.5 framework download file is used for both 32-bit AND 64-bit systems. So no you know too!

LinqToXSD? NO!! Linq To Schema...

Mon, 06 Oct 2008 13:45:00 GMT

I had the pleasure of sitting in on a presentation given by Joe Healy about Visual Studio.Net 2008 SP1. As the tagline goes, "It's more than just a service pack." As it turns out, that is SO true.

The feature that stood out to me the most was the built-in support for VB.Net coders like myself to easily program against XML objects. As I remembered it, it was called "Linq To XSD", or "LinqToXSD". After spending a few days looking for it, I have found that it is actually called "Linq To Schema"! Argh!

Here are a couple of important links for this technology. If you are not sure what this is, click the second link first. It shows a demo. The first link is just to download it. I will let the video speak for itself...

http://msdn.microsoft.com/en-us/vbasic/bb840042.aspx

http://msdn.microsoft.com/it-it/vbasic/bb887654(en-us).aspx

INETA Community Champions Program Award - Participant

Tue, 09 Sep 2008 12:00:00 GMT

There are already the somewhat well-known awards for the Champions Program. But there is also the new monthly participant award. This award is randomly awarded once a month to anyone that is participating in the Champions program.

It just so happens that I was chosen this month! Woo hoo!

INETA Community Champion Particpant Award - September 2008

Don't forget about the ODUG meeting tomorrow. See you there!

http://orlando.dotnetnukeug.net/Events.aspx

Multithreaded Woes!

Thu, 17 Apr 2008 12:00:00 GMT

Starting a thread, maintaining it are easy enough. And as long as you have a reference to the thread, it is easy to wait for it. However, this problem that I have just run into really sucks.

I have a web application where the visitor enters information into a search form, and then they are immediately forwarded to an advertisement while the search takes place in the background (hence the thread). This thread does a bunch of stuff. In fact, too much to mention...

Well, I had this all working on my dual core notebook. It was great! With one exception, it worked flawlessly.

As with any application, there comes a time to where it needs to be tested in a psuedo-production environment, and this is the time that I am about to speak of.

I moved this piece of the web application to our test site. I didn't expect anything to go wrong with the thread itself, but rather workflow logic. Well, things nearly never work like we expect, do they?

For some reason, the thread dies somewhere in the process, and I cannot figure out why. This only happens on the server. Argh!

Okay - I am done venting...

FOLLOW UP - Multithreading Woes

Thu, 17 Apr 2008 12:00:00 GMT

Finally, I decided to wrap all of the methods being used by the new thread in TRY CATCH blocks. This revealed a run time error that wasn't being reported by the thread.

I fixed that, and it all works again!

Common MultiThreading Compiler Error

Mon, 14 Apr 2008 12:00:00 GMT

To prefix this, we often run into instances in ASP.Net Programing, when we need to spawn a new thread to take care of some business while the original thread can continue serving the UI to the end user.

This is normally not too complicated of a task, but when you don't use a specific methodology, some of its quirks or requirements can be forgotten. For instance, I could not for the life of me get a new thread to compile. I kept verifying with previously written code that I was doing it right. And sure enough... I was! Yet I was still getting an error like this:

No accessible method '[METHODNAME]' matches the signature of delegate 'Delegate Sub ParameterizedThreadStart(obj As Object)'.

I kept pouring my eyes over the code. Something MUST be different, but what? Well, eventually, the train came tumbling in, and squished all of the blinding thoughts out and I was able to see clearly again. I was calling a Function in the new thread statement, and not a Sub. Duh!

Everything compiled and ran just fine after I changed the method to a Sub.

Strangely enough, I was not able to find any help when searching for it on Google. All of the SERPs were for other situations where multithreading was not involved.

String Performance Guide

Tue, 25 Mar 2008 12:00:00 GMT

I tell many people of one of my favorite string optimization projects. I was asked to lower the response time of a web service from its current response time of approximately 60 seconds to something much faster. With it being a web service, that meant somewhere in the neighborhood of 1-5 seconds.

I immediately looked to see how the strings were being handled throughout the project. With it using a MySQL back-end, there were many static queries in string objects and string XML node comparisons that were all using the standard string handling techniques.

To make a long story short, after only overhauling the string handling throughout the application, I had brought the response time down to 1-3 seconds.

Find my string optimization guide attached to this blog post. I hope it helps you.

SSD_String_Optimization_Guide.pdf

HOW TO: Load an XPathDocument Using a String Object

Fri, 07 Dec 2007 21:01:00 GMT

For some odd reason, the XPathDocument class does not support loading the object using a string. However, this seems to be an integral requirement for some applications where the XML is generated and parsed on-the-fly. Here's how to do that...

Dim byteObj() As Byte
byteObj = System.Text.Encoding.UTF8.GetBytes(SerializedObject)
Dim memStr As System.IO.MemoryStream = New System.IO.MemoryStream(byteObj)
Dim xpathDoc As XPathDocument = New XPathDocument(memStr)

That is only four lines of code. Hey! That's pretty good... But what if you didn't want to use four lines? Can't we bring this down to less lines of code? Yes! Here is the same example in only two lines of code, and less memory overhead, because there are also less objects.

Dim memStr As System.IO.MemoryStream = New System.IO.MemoryStream(System.Text.Encoding.UTF8.GetBytes(SerializedObject))
Dim xpathDoc As XPathDocument = New XPathDocument(memStr)

What if you wanted to globalize this to make it even easier? Couldn't you add this as a shared/static function to an existing class? Sure, but it could get even better...

You can take that a step further by extending the XPathDocument class, for use in your entire application. This way, you have then limited those two lines of code to one - each time you do it. Don't forget that your footprint is also smaller since you are extending an existing class.

Imports System.IO
Imports System.Text
Imports System.Xml
Imports System.Xml.XPath

Namespace MyCompany.Extensions

    Public Class XPathDocument
        Inherits System.Xml.XPath.XPathDocument

        Public Sub New(ByVal xmlString As String)
            MyBase.New(New MemoryStream(Encoding.UTF8.GetBytes(xmlString)))
        End Sub

    End Class

End Namespace

Now, you can call this from anywhere in your code like so:

Dim strXml As String = "<rootNode><element1>somevalue</element1></rootNode>"
Dim xpathDoc As New MyCompany.Extensions.XPathDocument(strXml)

Now, we have reduced this to one line of code! :) Have fun!

HOW TO: Implement a Client-Side Form on .Net Apps

Thu, 15 Nov 2007 04:37:46 GMT

There are times when you need to incorporate a client-side form on your web form, user control, or DNN module. As you probably already know, this will not work. By default, ASP.Net doesn't allow child forms anymore.

An example of this may be if you use a 3rd party provider for services, such as a newsletter provider. In those instances, you typically have two choices. First, you could just send your visitors to their web site. Second, you can implement a submission process right on your own site.

The trick to doing this, is to "trick" ASP.Net. I built a hybrid class based on the example found at Code Project. You use your normal method to collect the informatoin, and then use client-side code to complete the process.

PLEASE NOTE: This example requires a postback, but in this situation, your end-users will likely expect this anyway.

For example, let's say that you have a form that your vendor wants you to use, and it looks like the following form:

<form name="frmSignUp" id="frmSignUp" action="http://www.somedomain.com/signup.asp" method="get">
    <input type="hidden" name="hidAffiliateId" id="hidAffiliateId" value="12345" />
    First name: <input type="text" name="txtFirstName" id="txtFirstName" />
    <br />
    Last name: <input type="text" name="txtLastName" id="txtLastName" />
    <br />
    E-Mail: <input type="text" name="txtEmail" id="txtEmail" />
    <br />
    <input type="submit" name="cmdSubmit" id="cmdSubmit" value="Submit" />
</form>

The above form allows you to complete this project as expected on a static HTML page. However, we need to perform a work-around to get this to work with ASP.Net.

The first thing we need to do is convert this to a server-side form. Here is the converted example:

First name: <asp:TextBox id="txtFirstName" runat="server" /><br />
Last name: <asp:TextBox id="txtLastName" runat="server" /><br />
E-Mail: <asp:TextBox id="txtEmail" runat="server" /><br />
<asp:Button id="cmdSubmit" runat="server" Text="Submit" />
<asp:Literal id="Literal1" runat="server" />

That part was easy, but now need a way to perform this client to server to client "magic". We need a .Net class that will mimic the properties expressed in the HTML form. Here is an example of my class.

''' <summary>
''' WebForm
''' </summary>
''' <remarks></remarks>
''' <history>
''' [wstrohl] - 20070803 - Created by Will Strohl - http://www.strohlsitedesign.com
''' </history>
Public Class WebForm

#Region " Properties "

    Private p_Fields As SortedList(Of String, String) = Nothing
    ''' <summary>
    ''' A collection of the fields that you need to have as fields in the dynamically generated form.
    ''' </summary>
    ''' <value>SortedList(Of String, String)</value>
    ''' <returns>SortedList(Of String, String) - a collection of the fields that will be inserted into the form</returns>
    ''' <remarks></remarks>
    Public ReadOnly Property Fields() As SortedList(Of String, String)
        Get
            Return Me.p_Fields
        End Get
    End Property

    Private p_Method As String = "post"
    ''' <summary>
    ''' Method - the method that the form will use to submit the field data.
    ''' </summary>
    ''' <value>String</value>
    ''' <returns>String - this property will only accept and return "get" or "post". "post" is the default.</returns>
    ''' <remarks>
    ''' If for some reason a value other than "get" or "post" is assigned to this property, this property will 
    ''' automatically default to "post".
    ''' </remarks>
    Property Method() As String
        Get
            If String.IsNullOrEmpty(Me.p_Method) Then Me.p_Method = "post"
            Return Me.p_Method
        End Get
        Set(ByVal Value As String)
            Dim re As New Regex("^(post|get)$", RegexOptions.IgnoreCase)
            If re.IsMatch(Value) Then
                Me.p_Method = Value
            Else
                Me.p_Method = "post"
            End If
        End Set
    End Property

    Private p_Action As String = String.Empty
    ''' <summary>
    ''' Action - this is the URL or path that the form will submit the information to.
    ''' </summary>
    ''' <value>String</value>
    ''' <returns>String - the URL or path that the form will submit to</returns>
    ''' <remarks>
    ''' If this property is not populated, the "ToString" method of this class will throw an exception.
    ''' </remarks>
    Property Action() As String
        Get
            Return Me.p_Action
        End Get
        Set(ByVal Value As String)
            Me.p_Action = Value
        End Set
    End Property

    Private p_AutoPost As Boolean = True
    ''' <summary>
    ''' AutoPost - this property tells this class whether the form will submit itself onload or not
    ''' </summary>
    ''' <value></value>
    ''' <returns>Boolean - the true or false value whether this form will automatically attempt 
    ''' to submit the dynamically generated form (default is true)</returns>
    ''' <remarks></remarks>
    Property AutoPost() As Boolean
        Get
            Return Me.p_AutoPost
        End Get
        Set(ByVal Value As Boolean)
            Me.p_AutoPost = Value
        End Set
    End Property

    Private p_Name As String = String.Empty
    ''' <summary>
    ''' Name - the name and id of the form that will be created
    ''' </summary>
    ''' <value>String</value>
    ''' <returns>String - the name and id of the form</returns>
    ''' <remarks>
    ''' If you do not add a name, one will be generated for you.
    ''' </remarks>
    Property Name() As String
        Get
            Return Me.p_Name
        End Get
        Set(ByVal Value As String)
            Me.p_Name = Value
        End Set
    End Property

#End Region

#Region " Constructors "

    ''' <summary>
    ''' New - this method instantiates the class
    ''' </summary>
    ''' <remarks></remarks>
    Sub New()
        Me.p_AutoPost = True
        Me.p_Fields = New SortedList(Of String, String)
        Me.p_Method = "post"
        Me.p_Name = String.Concat("Form_", DateTime.Now.ToString("MMddyyyyhhmmss"))
        Me.p_Action = String.Empty
    End Sub

    ''' <summary>
    ''' New - this method instantiates the class
    ''' </summary>
    ''' <param name="FormAction">String - the URL or path that the form will submit to</param>
    ''' <remarks>
    ''' POSSIBLE EXCEPTIONS:
    ''' ArgumentNullException - this will occur if of the argument is Null or Empty
    ''' </remarks>
    Sub New(ByVal FormAction As String)
        '
        ' BEGIN VALIDATION
        '

        If String.IsNullOrEmpty(FormAction) Then _
            Throw New ArgumentNullException("The FormAction argument cannot be NULL or empty!")

        '
        ' END VALIDATION
        '

        Me.p_AutoPost = True
        Me.p_Fields = New SortedList(Of String, String)
        Me.p_Method = "post"
        Me.p_Name = String.Concat("Form_", DateTime.Now.ToString("MMddyyyyhhmmss"))
        Me.p_Action = FormAction
    End Sub

    ''' <summary>
    ''' New - this method instantiates the class
    ''' </summary>
    ''' <param name="FormAction">String - the URL or path that the form will submit to</param>
    ''' <param name="FormMethod">String - the method that will be used to submit the form ("get" or "post")</param>
    ''' <remarks>
    ''' POSSIBLE EXCEPTIONS:
    ''' ArgumentNullException - this will occur if any of the arguments are Null or Empty
    ''' </remarks>
    Sub New(ByVal FormAction As String, ByVal FormMethod As String)
        '
        ' BEGIN VALIDATION
        '

        If String.IsNullOrEmpty(FormAction) Then _
            Throw New ArgumentNullException("The FormAction argument cannot be NULL or empty!")
        If String.IsNullOrEmpty(FormMethod) Then _
            Throw New ArgumentNullException("The FormMethod argument cannot be NULL or empty!")

        '
        ' END VALIDATION
        '

        Me.p_AutoPost = True
        Me.p_Fields = New SortedList(Of String, String)
        Me.p_Method = FormMethod
        Me.p_Name = String.Concat("Form_", DateTime.Now.ToString("MMddyyyyhhmmss"))
        Me.p_Action = FormAction
    End Sub

    ''' <summary>
    ''' New - this method instantiates the class
    ''' </summary>
    ''' <param name="FormAction">String - the URL or path that the form will submit to</param>
    ''' <param name="FormMethod">String - the method that will be used to submit the form ("get" or "post")</param>
    ''' <param name="FormName">String - then name and id that you wish for the form to have</param>
    ''' <remarks>
    ''' POSSIBLE EXCEPTIONS:
    ''' ArgumentNullException - this will occur if any of the arguments are Null or Empty
    ''' </remarks>
    Sub New(ByVal FormAction As String, ByVal FormMethod As String, ByVal FormName As String)
        '
        ' BEGIN VALIDATION
        '

        If String.IsNullOrEmpty(FormAction) Then _
            Throw New ArgumentNullException("The FormAction argument cannot be NULL or empty!")
        If String.IsNullOrEmpty(FormMethod) Then _
            Throw New ArgumentNullException("The FormMethod argument cannot be NULL or empty!")
        If String.IsNullOrEmpty(FormName) Then _
            Throw New ArgumentNullException("The FormName argument cannot be NULL or empty!")

        '
        ' END VALIDATION
        '

        Me.p_AutoPost = True
        Me.p_Fields = New SortedList(Of String, String)
        Me.p_Method = FormMethod
        Me.p_Name = FormName
        Me.p_Action = FormAction
    End Sub

#End Region

#Region " Public Methods "

    ''' <summary>
    ''' AddField - this method allows you to add a field to the form.
    ''' </summary>
    ''' <param name="FieldName">String - the name of the field to add</param>
    ''' <param name="FieldValue">String - the value of the field to add</param>
    ''' <remarks>
    ''' These fields will be rendered as "Hidden" input fields.
    ''' 
    ''' You can send an empty string to the FieldValue argument, but the FieldName is required.
    ''' </remarks>
    Sub AddField(ByVal FieldName As String, ByVal FieldValue As String)
        '
        ' BEGIN VALIDATION
        '

        If String.IsNullOrEmpty(FieldName) Then _
            Throw New ArgumentNullException("The FieldName argument cannot be NULL or empty!")

        '
        ' END VALIDATION
        '

        Me.Fields.Add(FieldName, FieldValue)
    End Sub

    ''' <summary>
    ''' ToString - this override of the ToString method outputs the Form and its required 
    ''' JavaScript.
    ''' </summary>
    ''' <returns>String - the form, its fields, and its JavaScript</returns>
    ''' <remarks>
    ''' If AutoPost is set to True, then the JavaScript will automatically submit the 
    ''' form once the page loads.  Otherwise, you should add a client-side script to call 
    ''' the JavaScript "submitWebForm" function.  There are no parameters.
    ''' </remarks>
    Overrides Function ToString() As String
        '
        ' BEGIN VALIDATION
        '

        If String.IsNullOrEmpty(Me.Action) Then _
            Throw New ArgumentNullException("The ToString() method cannot be processed without the 'Action' property assigned.")
        If Not Me.Fields.Count > 0 Then _
            Throw New ArgumentNullException("The ToString() method cannot be processed without any Fields added.")
        If String.IsNullOrEmpty(Me.Name) Then _
            Throw New ArgumentNullException("The ToString() method cannot be processed without the Form 'Name' property assigned.")

        '
        ' END VALIDATION
        '

        Dim sb As New StringBuilder
        With sb
            ' create the form tag
            .Append("<form id=""")
            .Append(Me.Name)
            .Append(""" name=""")
            .Append(Me.Name)
            .Append(""" action=""")
            .Append(Me.Action)
            .Append(""" method=""")
            .Append(Me.Method)
            .Append(""">")
            .Append(Environment.NewLine)

            ' loop through and add the form fields
            For Each kvp As KeyValuePair(Of String, String) In Me.Fields
                .Append("<input type=""hidden"" id=""")
                .Append(kvp.Key)
                .Append(""" name=""")
                .Append(kvp.Key)
                .Append(""" value=""")
                .Append(kvp.Value)
                .Append(""" />")
                .Append(Environment.NewLine)
            Next

            ' close the form tag
            .Append("</form>")
            .Append(Environment.NewLine)

            ' add javascript to automatically "submit" the form
            .Append("<script type=""text/javascript"" language=""javascript"">/*<![CDATA[*/")
            If Not Me.AutoPost Then .Append("function submitWebForm(){")
            .Append("document.getElementById('")
            .Append(Me.Name)
            .Append("').submit();")
            If Not Me.AutoPost Then .Append("}")
            .Append("/*]]>*/</script>")

        End With

        Return sb.ToString
    End Function

#End Region

    End Class

The above class allows you to generate this form server-side and then automatically execute it client-side. But how do you use this class? Here is an example of the server-side event that we will use to accomplish this.

Protected Sub cmdSubmit_Click(ByVal sender As Object, ByVal e As System.Web.UI.ButtonClickEventArgs) Handles cmdSubmit.Click

    Dim objWebForm As New WebForm("http://www.somedomain.com/signup.asp")
    With objWebForm
        .AddField("hidAffiliateId", "12345")
        .AddField("txtFirstName", txtFirstName.Text)
        .AddField("txtLastName", txtLastName.Text)
        .AddField("txtEmailName", txtEmail.Text)
    End With

    ' add this dynamically created form to the page
    Literal1.Text &= wf.ToString

End Sub

Once you have the above code snippets in place, run your web application, and you will have a fully functional client-side form.

Using JavaScript to change the image on a page

Mon, 17 Sep 2007 19:56:05 GMT

I recently had a project where the home page for a web site called for an image that loaded randomly each time the page is loaded. For example, the first time you viewed the home page, you might be looking at monkeys, the next time a llama, and so on.

This worked fine for a while, but as most ideas do, this grew to where the clients wanted to see the image reload frequently on the homepage while viewing it as well. That is fine, but what is the easiest way to do it?

Most of you probably already know that there are probably 100 different ways to do any single task when it comes to web design. In knowing this, I normally try a new way every time it comes to doing something. I like this approach to design because I feel it keeps me well-rounded and open to new ideas.

One script that I have come to use somewhat frequently is the xGetElementById script from Cross-Browser.com. This is a very easy, fast, and dependable way of using JavaScript to work work with HTML objects on your web page.

Here is what I did this time to accomplish this task... First I created the HTML and accompanying design as usual (HTML, CSS, etc.). Then, where I wanted the image to randomly change, I did not place the image. I instead used CSS to specify the background image for a table cell. In addition, the CSS specified other attributes to make sure that the image would be properly displayed.

Now, before you get started, you need to figure out the CORRECT size in pixels that you want or need your image to be and crop all of the images that will used to switch out to be the same dimensions.

Here is an example of the first CSS snippet. Notice the use of the number "01" in the class name. There should be a class for each image that you have. To keep things simple, it is normally best to name the image something similar to the class name.

.homepage_image_01{

background-image: url(homepage_images/homepage_img_01.jpg);

background-position: top left;

background-repeat: no-repeat;

}

This bit of CSS told the HTML to load the image named "homepage_img_01.jpg" into the background of the element that uses the class name "homepage_image_01".

The HTML where this class name is used, looks like so:

<tr>

<td id="cellImages">

<div class=" style="width: 502px; height: 242px" onclick="switchImage();">&nbsp;</div>

</td>

</tr>

Notice the use of the class "cellImages". This class is telling the table cell to be a specific size - the same dimensions as the size of the images, in pixels. Next, there is a DIV with the name and dimensions of our images. Notice that the class name matches the example above. As an added bonus, I put the name of the JavaScript function in the ONCLICK tag (seen below). This will enable the web site visitor to change the image at will.

The JavaScript that wraps it all up with a neat little bow gets placed at the END OF THE PAGE. This code assumes that there are 10 images. There could be more or less images. You would need to adjust the JavaScript to account for more or less images though. Here is what the script looks like:

/*

(C) 2007 StrohlSiteDesign.com. All rights reserved.

This script and the rights to use it are protected by U.S. and Internationl copyright laws. Copying of any of this code is prohibted by law.

Written by : Will Strohl (wills-at-strohlsitedesign-dot-com)

Date Created : 02/08/2006

Date Last Modified : 01/10/2007

You are free to use this script as long as the above copyright statements are left intact.

*/

// number of miliseconds between each image load

// 7000 = 7 seconds

var numInterval = 7000;

// initialize the timeout object

var toImages = setTimeout('switchImage()',numInterval);

// perform the first 'switch'

switchImage();


// BEGIN xGetElementById

// (the following snippet requires its own copyright)

// xGetElementById, Copyright 2001-2007 Michael Foster (Cross-Browser.com)

// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xGetElementById(e){

if(typeof(e)=='string') {

if(document.getElementById) e=document.getElementById(e);

else if(document.all) e=document.all[e];

else e=null;

}

return e;

}

// END xGetElementById


function switchImage(){

// clear the original timeout so that there are not

// multiple timeouts running at the same time

clearTimeout(toImages);

var rn=Math.floor(Math.random()*10);

switch(rn){

case 0:

xGetElementById('divImages').className='homepage_image_01';

break;

case 1:

xGetElementById('divImages').className='homepage_image_02';

break;

case 2:

xGetElementById('divImages').className='homepage_image_03';

break;

case 3:

xGetElementById('divImages').className='homepage_image_04';

break;

case 4:

xGetElementById('divImages').className='homepage_image_05';

break;

case 5:

xGetElementById('divImages').className='homepage_image_06';

break;

case 6:

xGetElementById('divImages').className='homepage_image_07';

break;

case 7:

xGetElementById('divImages').className='homepage_image_08';

break;

case 8:

xGetElementById('divImages').className='homepage_image_09';

break;

case 9:

xGetElementById('divImages').className='homepage_image_10';

break;

}

// reset the time to call the switch again

toImages = setTimeout('switchImage()',numInterval);

}

Notice that all this script does is locate the DIV with the ID of "divImages" and then it changes the class name to the randomly chosen one.

If the visitor cannot use or has disabled JavaScript, the image used would be the one initially specified in the DIV tag.

Naturally, you could use a GIF animation or Flash to accomplish this. However, like I said before, I like to try different things whenever I can. Have fun!

HOW TO: Select/Deselect All Checkboxes

Wed, 15 Aug 2007 14:45:18 GMT

Invariably, at some point you will have a control that needs to display a list of options as a checkbox list. In order for our application to be user-friendly, we will need to provide the ability for the end-user to Select All checkboxes with a single click, as well as uncheck all checkboxes. With a bit of client-side code, this is easily achieved.

First of all, you will need to have a UserControl or Page that has a CheckBoxList control added to it. Next, you need to have a DataSource loading into the CheckBoxList control. These steps are outside of the scope of this blog entry.

Once you have accomplished the preceding steps, it will be important that you have the checkboxes contained inside of a parent element. If you have the CheckBoxList RepeatLayout set to "table", then this is already done for you. Otherwise, you should have the checkbox list in a DIV or TD with the Id attribute assigned to it. It is imperative that the value you assign to the Id attribute be unqiue on the entire page.

The result should be something like the following:

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="Normal" 
RepeatColumns="3" RepeatDirection="horizontal" RepeatLayout="table" 
TextAlign="right" />

Next, we will need a few client-side events to handle the select all or deselect all action that the end-user will initiate through a click of their mouse. Here are some examples of what you may use:

function selectAllCheckBoxes(){
     var ctrl = document.getElementById('<%= Me.CheckBoxList1.ClientID %>');
     var col = ctrl.getElementsByTagName('input');
     var chkSelected = (!areCheckboxesSelected());

     for (i = 0; i < col.length; i++){col[i].checked = chkSelected;}
     chkSelected = !chkSelected;
}

function validateCheckboxes(){
     var ctrl = document.getElementById('<%= Me.CheckBoxList1.ClientID %>');
     var col = ctrl.getElementsByTagName('input');
     var blnResult = true;
     var intCount = 0;
     for (i = 0; i < col.length; i++){if(col[i].checked){intCount = intCount + 1;}}
     if(intCount == 0){alert('Please check at least one checkbox.');return false;}
     return true;
}

function areCheckboxesSelected(){
     var ctrl = document.getElementById('<%= Me.CheckBoxList1.ClientID %>');
     var col = ctrl.getElementsByTagName('input');
     for (i = 0; i < col.length; i++){if(col[i].checked){return true;}}
     return false;
}

Finally, you will need a link on the page to allow the end-user to initiate the event we will create soon. Really, you can use any HTML element that allows the "onclick" attribute, but we will just use a link here.

<a href="javascript:void(0);" onclick="selectAllCheckBoxes();">Select/Deselect All</a>

Yippee! It works!

Once all of these pieces are in place, you should be able to run your project and see the results. Go ahead and try in Firefox and IE.

Important Side-Note

On a side-note, it would be a great idea for you to install the Firebug plug-in for FireFox, and the IE Developer add-on for Internet Explorer. These tools had proved to be extremely helpful in creating and debugging client-side JavaScript and HTML markup.

HOW TO: Return the Database Name from a Connection String

Mon, 13 Aug 2007 13:44:36 GMT

Have you ever worked with an application that had many different connection strings and databases? It is sometimes necessary to grab some information from those connection strings. I have run into such a situation recently. Here is how to grab the database name from the connection string.

First of all, I am making use of Regular Expression in order to perform this task. In doing so, I am right now assuming that the only parameters in a connection string that specify a database name are "Initial Catalog" and "Database". This is true of SQL Server, but for other datasources, you will need to ammend the regular expression to reflect your own datasource connection string parameters.

Here is the snippet that will return a database name from your connection string:

Public Shared Function GetDatabaseName(ByVal ConnectionString As String) As String
     Dim strValue As String = String.Empty

     If Not String.IsNullOrEmpty(ConnectionString) Then
          Try
               Dim re As New Regex("(Initial Catalog=|Database=){1}([\w-]+)[;]?")
               ' this should match:
               ' $0 = Initial Catalog=DATABASENAME;
               ' $1 = Initial Catalog=
               ' $2 = DATABASENAME
               ' ... OR ...
               ' $0 = Database=DATABASENAME;
               ' $1 = DataBase=
               ' $2 = DATABASENAME

               ' return just the DB name from the connection string
               strValue = re.Match(ConnectionString).Groups(2).Value
          Catch
               strValue = String.Empty
          End Try
     Else
          strValue = String.Empty
     End If

     Return strValue.Trim
End Function

As you can see, we first set a local object to hold our return value. It is automatically set to return an empty string. Next, as long as the argument passed into the method is populated, we test the string against our regular expression.

This regular expression will return three match groups, as long as there is a database parameter in the connection string. The third group is the value we really want. So, we return the trimmed value of that (just in case there are any additional leading or trailing spaces).

HOW TO: Escape Single Quotes for JavaScript Strings

Wed, 27 Jun 2007 07:00:00 GMT

While I was writing a class to allow me to quickly grab preformatted JavaScript functions (i.e., confirm, alert, etc.), I came across the need to ensure that a string passed into those methods would not throw a JavaScript error upon rendering. This could possibly happen if the message contained singles quotes for contractions, quotes, etc.

So, I quickly set upon adding another method to a growing RegularExpress library class that I am working with. Here is the method:

''' <summary>
''' EscapeSingleQuotes - this method allows you to pass a string into it to 
''' update your string with all single quotes escaped to prevent JavaScript errors
''' </summary>
''' <param name="TextToEscape">String - the text that you want to parse</param>
''' <remarks>
''' Use this method to make a string safe for JavaScript routines
''' </remarks>
Public Shared Function EscapeSingleQuotes(ByVal TextToEscape As String) As String
    ' create a new regex object
    Dim re As New Regex("(\w'|\s'|!'|@'|#'|\$'|%'|\^'|&'|\*'|\('|\)'|\-'|\+'|='|:'|;'|""'|,'|<'|\.'|>'|/'|\?'|\['|\]'|\{'|\}'|'')[^\']")



    ' get a collection of the instances of singles to escape
    Dim reMatches As System.Text.RegularExpressions.MatchCollection = re.Matches(TextToEscape)



    ' loop through the matches and escape the single quotes
    For i As Integer = 0 To reMatches.Count - 1
        ' update the single quote with a preceding backslash
        TextToEscape = TextToEscape.Replace(reMatches.Item(i).Value, reMatches.Item(i).Value.Replace("'", "\'"))
    Next



    Return TextToEscape
End Function

It is just that easy. Now all I have to do is to write something like this to take advantage of it:

Dim strString As String = _
    "This is a 'sample' this one \' is escaped, and this one " & _
    "$' !' -' has different puncuation preceding it, and " & _
    "don't forget double single '' quotes"
strString = EscapeSingleQuotes(strString)

Which would return a string like this:

This is a \'sample\' this one \' is escaped, and this one 
$\' !\' -\' has different puncuation preceding it, and 
don\'t forget double single \'\' quotes

Notice that it escaped all of the single quotes EXCEPT the single quote that was already escaped. Have fun!

How To: Loop Through Controls and Change the Label of a Checkbox

Thu, 19 Apr 2007 07:00:00 GMT

From time to time we need to do something that the .Net framework doesn't immediately expose to us (without some finagling). In this instance, I wanted to override the attributes that the labels generated by the CheckBoxList webcontrol. However, I only wanted to modify this one instance of it.

In doing so, I needed to hook into the creation of the item collection of the CheckBoxList control, but I do not know of an event that we can use to do so. So, I instead ran a loop through the controls collection to find the instances of the CheckBoxList control and make the changes I wanted.

Here is an example:

Private Sub ReWriteCheckboxLabels()
     Dim ctl As System.Web.UI.Control
     Dim ctlCheck As WebControls.CheckBoxList
     ' loop through all of the controls in the UpdatePanel
     ' controls collection
     For Each ctl In Me.UpdatePanel1.Controls(0).Controls

          ' make sure that the current control is the right kind
          If ctl.GetType.ToString = 
               _"System.Web.UI.WebControls.CheckBoxList" Then

               ' yippee! it's a checkbox list - change the type
               ctlCheck = CType(ctl, WebControls.CheckBoxList)

               ' only do this if there are items to change
                Select Case ctlCheck.Items.Count
                    Case Is > 0
                         ' force the label text to inherit the 
                         ' correct class
                         Dim item As ListItem

                         ' loop through the items in the current 
                         ' checkbox list
                         For Each item In ctlCheck.Items
                              ' wrap the text within the label 
                              ' to override it's CSS class
                              item.Text = "<span class=""" & _
                                   "YOURCSSCLASSNAME"">" & _
                                   item.Text & "</span>"
                         Next
                    Case Else
                         'do nothing
               End Select
           End If
     Next
End Sub

In the previous example, I have at least one CheckBoxList control nexted within a MS AJAX UpdatePanel. In order to get to the collection of controls, I need to first reference the controls using the
Controls collection of the first Controls instance in the UpdatePanel.

If you are not nesting your controls a similar way, you can simply modify the first FOR EACH loop to be something more like this:

For Each ctl In Me.Controls

This would loop through all of the controls in the current page or user control.

Dynamically Creating a DataTable for Bindable Times

Thu, 19 Apr 2007 07:00:00 GMT

I came across a requirement where I needed to create a DataTable of times for a project. This table didn't need to take up any space on the database since it would never change. The times would need to be listed in 30 minute increments for each hour of the day. This would then get binded mostly by dropdown lists.

Since the requirements said that it could (and should) be dynamically generated, I came up with the following methods for a utility class I have which allow me to do this.

Here is the example:

Public ReadOnly Property TimesKeyName as String
     Get
          Return "timeskey"
     End Get
End Property

Public ReadOnly Property TimesKeyValue as String
     Get
          Return "timesvalue"
     End Get
End Property

Public ReadOnly Property TimesAmPm as String
     Get
          Return "timesampm"
     End Get
End Property

Private _TimesTable As DataTable = Nothing
Public Property Times As DataTable
     Get
          If Me._TimesTable Is Nothing Then
               Me._TimesTable = Me.LoadTimesTable(Me._TimesTable)
          End If
          Return Me._TimesTable
     End Get
     Set(ByVal value As DataTable)
          Me._TimesTable = value
     End Set
End Property

Private Function LoadTimesTable(ByVal tblTable As DataTable) As DataTable
     Dim row1, row2 As DataRow
     tblTable = New DataTable("Times")
     With tblTable
          .Columns.Add(New DataColumn(Me.TimesKeyName, _
               System.Type.GetType("System.String", False)))
          .Columns.Add(New DataColumn(Me.TimesValueName, _
               System.Type.GetType("System.String", False)))
          .Columns.Add(New DataColumn(Me.TimesAmPm, _
               System.Type.GetType("System.String", False)))
     End With

     ' create local variables
     Dim intI, intX As Integer
     ' load the sorted list with times
     For intI = 1 To 24
          ' set an initial value
          row1 = tblTable.NewRow
          row2 = tblTable.NewRow
          ' add the time key/value & add the time to the row
          If intI <= 12 Then
               ' morning hours
               row1(0) = intI.ToString & ":00 AM"
               row2(0) = intI.ToString & ":30 AM"
               ' add the 24 hour time (pad with a zero if needed)
               intX = intI
               row1(1) = _
                    Me.MakeSingleDigitHourDouble(intX.ToString) & "00"
               row2(1) = _
                    Me.MakeSingleDigitHourDouble(intX.ToString) & "30"
               ' append the AM/PM values
               row1(2) = "AM"
               row2(2) = "AM"
          Else
               ' afternoon/evening hours
               intX = intI - 12
               row1(0) = intX.ToString & ":00 PM"
               row2(0) = intX.ToString & ":30 PM"
               ' translate 24 hour time
               row1(1) = intI.ToString & "00"
               row2(1) = intI.ToString & "30"
               ' append the AM/PM values
               row1(2) = "PM"
               row2(2) = "PM"
          End If
          ' add the row to the table
          With tblTable.Rows
               .Add(row1)
               .Add(row2)
          End With
     Next
     Return tblTable
End Function

Private Function MakeSingleDigitHourDouble(ByVal _Hour As String) As String
     ' check to see if the variable is already two numbers
     Dim objRegex As New Regex("^[0-9]{2}?")
     Dim result As Match = objRegex.Match(_Hour)
     If result.Success Then
          ' if it is two numbers, then return it
          Return _Hour
     Else
          ' make sure it is a number
          objRegex = New Regex("^[0-9]{1}?")
          result = objRegex.Match(_Hour)
          If result.Success Then
               ' it is a number
               Return "0" & _Hour
          Else
               ' it is not - throw an error
               ' (that'll teach 'em!)
               Throw New Exception("The _Hour variable must be a " & _
                    "number (String).")
          End If
     End If
End Function

There wasn't anything fancy done here. I just looped to populate a DataTable with three columns. One each for the key and value pair, and an additional column to aid in sorting and other helper functions elsewhere without having to parse the time string.

I am sure I will need to streamline this later on, but here is the first draft of this working and functional code.

.Net Error: The specified path, file name, or both are too long.

Tue, 17 Apr 2007 05:00:00 GMT

Here is an error that kind of irritates me only because Microsoft should have thought this one through. However, we find ourselves thinking or saying that more often then we'd like, huh?

The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.

This error doesn't necessarily refer to your URL as most of us would immediately think. It can and often does refer to the physical file path of the application, its providers, or its controls. For instance, on a default installation of Microsoft Visual Web Developer Express Edition (that's a mouhtful, huh?), the default location for web sites is a path similar to below:

C:\Documents and Settings\[username]\My Documents\Visual Studio 2005\WebSites\[websitename]

However, if we choose to instead create and run our web sites from the root of the drive, this error would likely go away:

C:\Web\[websitename]

I hope this helps!

Regular Expression - Validating Time

Tue, 10 Apr 2007 05:00:00 GMT

I am just an amateur when it comes to regular expression, but I plan on getting a whole lot better at it. There is too much potential there to not want to use it more often. I just came up with a regular expression pattern to validate time format. It has some small checks incorporated for valid times, but it is not 100% inclusive. Here is the expression:

^[0-1]?[0-9]{1}:[0-5]{1}[0-9]{1} (AM|PM|am|pm)$

The preceding pattern will match times such as:

12:29 PM, 12:29 pm, 2:14 AM, 2:14 am, etc.

It will not match:

22:29 PM, 11:69 AM, etc.

However, the catch here is that it will also match times like:

19:00 AM, 13:14 pm, etc.

It may or may not be obvious to you that this not a valid time, but the expression will not find it as obvious. Like I said, I am an amateur here, so let me know if you have a better expression for this.

Regular Expression - Date

Tue, 10 Apr 2007 05:00:00 GMT

I have another one for you! This one will validate a date within the current century. This should be sufficient enough for most current applications.

^([0-1]?[0-9]{1}/[0-3]?[0-9]{1}/20[0-9]{2})$

The preceding regular expression will, like the previous posting on time, validate most date options. The weaknesses with this one is that it will allow the days to go up to 39 and does not account for leap year. Also, the months can go up to 19, instead of our commonly accepted 12 month year. :)

I designed this expression to validate dates from the year 2000 to 2099. I do not plan on this same code being in place in 2099, so I hope this is sufficient enough...

Microsoft AJAX 1.0 - Common Error

Fri, 06 Apr 2007 05:00:00 GMT

I began playing with the Microsoft AJAX 1.0 features today with an actual project instead of simple test scenarios similar to the AJAX videos offered on the ASP.Net web site. I am using AJAX controls to make an asynchronous call to my server which in turns calls an external web service and repopulates a textarea control. The first click of the button that submits the call works perfectly. The call goes out, and in just 'sec my SOAP response is shown in the textarea without a hitch. However, this is where a big brick gets thrown through the window!

If you click the button again without refreshing the page or removing the text from the textarea, an AJAX error will be thrown in the form of an alert that states:

Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 500

Now this was a perplexing error since us .Net developers have become so accustomed to reading errors that include some details about how and where the error occurred. That information would undoubtedly leads us to the "why" of the error. However, this alert doesn't give us a whole lot to go on to troubleshoot the problem.

I proceeded to do what nearly all of us do... I Googled the error. I had a handful of appropriate results show up, but most of them were outdated and none of them had a single clear answer as to how or why this happened. I still do not know the how of my error, but I was able to determine the the why with a few hints from a couple of the search results.

After the first request was sent out as a result of clicking the button, the textarea was loaded with an XML web service response. This obviously consisted of HTML characters like the "greater than" and "less than" symbols. If I attempted to send a subsequent request by clicking the button a second time WITHOUT reloading the page, the error would occur because of the HTML in the textarea. Since the textarea is located within an UpdatePanel, the text within the textarea, I am assuming the error occurs because the HTML could contain harmful content.

Now, I am sure that there is a much more elegant and event easier fix to this, but I have not thoroughly investigated this yet. The quick fix I found for this was to inject a JavaScript snippet into the OnClick event of the button. This would look something like the following:

Dim strScript As String = "document.getElementById('" & _
     Me.txtResponse.ClientID & "').value = '';"
Me.cmdSubmit.Attributes.Add("onclick", strScript)

This clears out any text in the textarea before the request is actually sent from the browser to the web service. Now, I said before that this is probably not the most efficient means to do this. I only did this because it is for a test application that is testing my web service. I wouldn't do this for a production application. But this workaround may do something for you in a situation like this.

If you have the actual fix or want to tell me how horrible of a coder I am, leave some comments. :) Until next time...

Simple, Quick AJAX Thoughts

Sun, 04 Mar 2007 06:00:00 GMT

I have been using AJAX for some time now, though I do not code AJAX as you might think. I have been using the AJAX tools provided from Telerik to do so. Their tools have been straight-forward and easy to use much like any other web control. However, right now I am evaluating whether I should continue to use these tools with my most current project or move on to using Microsoft's AJAX tools. I have been looking through the "How To" videos at the following URL and I must say that this is a very interesting take on providing AJAX tools to developers. However, I believe that there is still too much for the developer to do upfront to always use these tools for your .Net AJAX needs.

http://www.asp.net/learn/videos/default.aspx?tabid=63

As you can see from the following link to the Telerik web site, they are embracing the AJAX tools offered by Microsoft, but those tools do not completely replace the ease of use offered by the Telerik suite of AJAX tools.

http://www.telerik.com/products/ajax/overview.aspx

Migrating Development Software from .Net 1.0 to 2.0

Wed, 05 Jul 2006 05:00:00 GMT

ARGH!!! I have been having the worst time trying to install Microsoft SQL Server 2005 on my development machine at home. Since I had already been burned in the BETA initiation when I installed at work, I already knew to uninstall any .Net 2.0 development software before I began installation (BETA or not).

This time I was met with a HUGE surprise though. Although I had uninstalled everything that Microsoft's web site told us all to, the install of SQL Server 2005 kept telling me otherwise. Even their BETA uninstall tool was not functioning. The newest version would not complete the uninstall due to an XML error, and the one I downloaded with the BETA software many moons ago would just not complete the uninstall, thinking that I was not logged on as an Administrator. Microsoft really screwed us on this one! There should have been a much easier upgrade path from the BETA versions to the release versions of Visual Studio 2005 and SQL Server 2005.

I even went through the hassle of uninstalling my latest MDAC as one forum suggested. Ugh!

After much Googling, I finally found the answer here:

http://support.microsoft.com/default.aspx?scid=kb;en-us;290301

For some reason, Windows sometimes keeps Windows Installation information intact even when you uninstall software. I am using Windows 2000, so I am not sure if this would also be the case with XP. My development machine at work is XP and had a similar problem, but I did not need this tool to sort it out. The link above leads you to the tool that fixes the install information problem. However, be careful with it. It can mess you up if you are not paying attention.

This is a valuable piece of trial and error that I hope gets you out of hot water! :) Enjoy!

How To: Use JavaScript to Set the Page Position

Wed, 03 Aug 2005 05:00:00 GMT

First of all, sorry that I haven't posted in a while. I know all of my readers (namely - ME) have missed me deeply. I hope to find more time to release thoughts and whatnot soon.

If you are a web developer who deals with some kind of server-side programming, I am sure that at some point or another you will find this post useful.

Normally, when you have a LONG page of content (which we never do, do we?) a seemingly good solution to getting your visitor to a specific section of it would be to have a link to an anchor somewhere on the page. For example:

<a href="#content">Click here to go to the content</a>

Then, somewhere down on the page you would have something like this:

<a id="content" name="content"></a><div>My content is here and you have found it!</div>

If you are a developer using ASP.Net, you probably already know where I am going. The rest of you may as well, but in .Net you have the use of Server Controls. Effectively, server controls give you the power to send requests back to the web server without having to worry about most of the details involved with doing so.

In my most recent example, I have a Call Logging form for an online Trouble Ticket System where a user enters in some information about their caller and the problem that is being experienced, then chooses whether to issue a ticket. Well, it would be much easier to determine whether a ticket is necessary or not if they could see if another technician has issued one.

What I have done with this form is made it to when a certain amount of information is given, two DataGrids (tables) containing a listing of previous calls are displayed. One shows previous calls from the same person, and the other shows calls from others which may relate to the same issue. In order to not adversely affect the form itself and to prevent excess windows and postbacks, I have placed these at the bottom of the same page as the call logging form.

Now, hopefully I have not lost you and you can picture a rather large web form with two scrollable tables at the bottom of the page. If the tables just magically appear at the bottom of the page, you wouldn't be able to see them right away. The user would first need to know that they are there, and then scroll down to them. As you can imagine, this is not a very user-friendly approach for the user.

To make this effective, the page needs to scroll down to the two DataGrids so that they are presented to the user immediately. This was not an easy task to even plan, but I have found a way for you to perform this task rather easily.

First, you need to get the source of a JavaScript function which calculates coordinates on a web page from Matt Kruse. (Make sure you give him a donation too.) Here is the link:

http://www.mattkruse.com/javascript/anchorposition/

Add this source to your web page the same way that you normally would.

Now, from here on out you will need to customize my example to fit your needs. I am just going to feed you the simplist way I can to show you the functionality.

Find the section on your page that you want to anchor for a postback event to focus on and add an anchor like so:

<a id="ancRelated" name="ancRelated"></a>

Make sure that you have included the ID and Name attributes, and that they are the same name. Also, it is necessary to have a space between the opening and closing anchor tags for browser compatibility.

Now, add a JavaScript function like the one below:

<script language="javascript" type="text/javascript">

function ScrollToRelated(){

// ancRelated is the anchor name

var pos;

pos = getAnchorPosition('ancRelated');

self.scrollTo(pos.x, pos.y);

}

</script>

In my example, a PostBack causes the need to call this function, so here is an example of calling the JavaScript function from a .Net event:

Dim strScript As String = "<script language=""javascript"" type=""text/javascript"">" & _

"ScrollToRelated();" & _

"</script>"

If Not Page.IsStartupScriptRegistered("AnchorFocus") Then

Page.RegisterStartupScript("AnchorFocus", strScript)

End If

This will insert the JavaScript just before the closing FORM tag in your HTML when it is compiled and sent to the web browser. Essentially, this mimics the action of adding another JavaScript function and calling it from the onload attribute in the BODY tag.

Of course if you have a more complicated example, you would have to make this one more flexibile to accept a parameter or more for multiple anchors, and whatever else you are trying to do - but this should get you started!

How To: Display All Server Variables (ASP.Net)

Tue, 28 Jun 2005 07:00:00 GMT

There are many instances where you might want to either write all of the items in the Server Variables collection, or at least be able to step through them. For instance, you may want to know use this information as part of the text returned from a feedback form to let you know what the user's settings and referring URL were. Or, perhaps you want to know this information as part of an error handling schema you have developed.

A simple example of gathering a single piece of information from the Server Variables collection:

Dim strIpNumber As String = Request.ServerVariables("REMOTE_ADDR")
Response.Write(strIpNumber)
' this should return an IP number like 123.123.123.123

Here is an example of how you can loop through and display or collect all of the available Server Variables.

' prepare variables
Dim strText As String = ""

Dim nvcSV As System.Collections.Specialized.NameValueCollection = Request.ServerVariables
Dim arrKeys() As String = nvcSV.AllKeys
Dim iCnt As Integer = 0

' loop through the collection and write the results
For iCnt = 0 To arrKeys.Length - 1
strString &= UCase(arrKeys(iCnt)) & " - " & nvcSV.Get(iCnt).ToString & vbCrLf
Next

You should be able to look at output similar to this:

ALL_RAW - (a summary of all of the most commonly used variables)
APPL_MD_PATH - /LM/W3SVC/3/Root/
APPL_PHYSICAL_PATH - (file system path where the application resides)
AUTH_TYPE -
AUTH_USER -
AUTH_PASSWORD -
LOGON_USER -
REMOTE_USER -
CERT_COOKIE -
CERT_FLAGS -
CERT_ISSUER -
CERT_KEYSIZE -
CERT_SECRETKEYSIZE -
CERT_SERIALNUMBER -
CERT_SERVER_ISSUER -
CERT_SERVER_SUBJECT -
CERT_SUBJECT -
CONTENT_LENGTH - (size of page or document)
CONTENT_TYPE -
GATEWAY_INTERFACE - CGI/1.1
HTTPS - off
HTTPS_KEYSIZE -
HTTPS_SECRETKEYSIZE -
HTTPS_SERVER_ISSUER -
HTTPS_SERVER_SUBJECT -
INSTANCE_ID - 3
INSTANCE_META_PATH - /LM/W3SVC/3
LOCAL_ADDR - (internal IP address)
PATH_INFO - (path of url)
PATH_TRANSLATED - (local file system path of URL)
QUERY_STRING - (querystring collection)
REMOTE_ADDR - (normally the IP number)
REMOTE_HOST - (normally the IP number)
REMOTE_PORT -
REQUEST_METHOD - (normall GET or POST)
SCRIPT_NAME - (web path of url)
SERVER_NAME - (DNS-qualified name of host server)
SERVER_PORT - (HTTP port used)
SERVER_PORT_SECURE - 0
SERVER_PROTOCOL - HTTP/1.1
SERVER_SOFTWARE - (HTTP Server type)
URL - (the url used)
HTTP_CONNECTION - Keep-Alive
HTTP_ACCEPT - (collection of accepted file types)
HTTP_ACCEPT_ENCODING - gzip, deflate
HTTP_ACCEPT_LANGUAGE - en-us
HTTP_COOKIE - (cookie collection)
HTTP_HOST - (DNS-qualified name of host server)
HTTP_REFERER - (previous url)
HTTP_USER_AGENT - (browser used)

Are you interested in seeing an example of ASP.Net using VB.Net? Just let me know...