While working on the WeBlog project I realized that I needed a star rating system for blog posts. A star rating allows your readings to rate content based on a 0-5 scale.   A fully lit star represents a full point on the rating scale. Therefore in order to give half point increments each star uses two images.  Left off: Left on: Right off: Right on: When you put a left and a right image together it forms a complete star. So If you have a rating a 3.5 you would have the following stars displayed: Star #1 left on, right on #2 left on, right on #3 left on, right on #4 left on, right off #5 left off, right off. Displaying the Current Rating In MVC, the logic to determine which stars (images) should be initially displayed is best accomplished with a HTML helper: public static string Ratings(this HtmlHelper helper, PostModel post) { StringBuilder sb = new StringBuilder(); sb.AppendFormat("<span class='rating' rating='{0}' post='{1}' title='Click to cast vote... [More]

I was watching a video named "Mastering jQuery" on Tekpub a few days ago and I heard the term "Unobtrusive JavaScript". Basically unobtrusive JavaScript is a technique that emphasizes the separation of your functional layer from your presentation layer. In layman's terms this means that your JavaScript is NOT placed directly in your HTML. Instead it is placed in a separate external file. Hopefully, you are already doing this with your cascading style sheets. Why? So you can change the look and feel of your website without having to modify each page. The same principal applies to Unobtrusive JavaScript. Here is an example... In the old days it was very common to add a control to your HTML and wire up the event directly on the controls. Although this works fine it does not give you flexibility in your design. If you have similar controls on other pages that call the same function you will have to modify each page if you change the method signature or rename the func... [More]

It seems like url shorteners have become very popular these days. Especially with applications like twitter who limit your messages to only 140 characters. The cool thing is that most of the URL shorteners have API's that you can use if you want to integrate them into your application. If you are interested in test driving the bit.ly engine then here are the steps: Go to the bit.ly website and create a free account. Once registered you will receive a username and an API key. You will need these later on when we write the code so make sure you keep these values handy. Since I am using jQuery for this project you will need to add a reference to the jQuery library. I like to use the Google CDN servers when possible but you can always download your own copy of jQuery. <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT> Now we can create the HTML that will allow the user to enter a long url, click the "... [More]

Update 1/28/2010: This article is Scott Guthrie approved (Corporate Vice President in the Microsoft Developer Division). There are occasions when you are developing a form and you need to have a drop down list that dynamically populates based on the value of another control. The classic example is a contact form that dynamically populates the states and provinces list when a country is selected. For example, when I select "United States" I want the child drop down to have entries like New York, Alabama, Texas and etcetera. When I select "Canada" I would expect to see provinces like Nova Scotia and Ontario. Fortunately, this functionality is very easy to build using ASP.NET MVC and jQuery. Best of all, we can do this without any postbacks using the jQuery Ajax functions. To get started make sure you have a reference to the jQuery library, preferably in the HEAD section of your html. For the purposes of this example I am using jQuery version 1.4. You can either ... [More]

Believe it or not but jQuery has been around for 4 years now. Over the years the library has really become a full-fledged and feature rich API. Late last week, the 1.4 release of jQuery hit the streets and the major focus of the 1.4 release is performance. John Resig, the creator of jQuery did some extensive tuning and found ways to reduce the complexity of the internal function calls which led to some phenomenal results: Obviously, the performance gains found in the 1.4 library make it a worthwhile upgrade. Also as a developer, don't sweat the upgrade. The process should go very smoothly because the jQuery team maintained the signatures of all public functions. Therefore, you will probably not need to change your code. There is a documented list of potentially-breaking changes to be aware of but overall things should go very smoothly. The entire jQuery API site has also been redesigned as well to go along with the 1.4 release. The main landing page has been optimized so you can ge... [More]