F9 Group Marketing and Technology Blog

Back in May 2010 I wrote a three-part article series titled Building a Store Locator ASP.NET Application Using Google Maps API , which showed how to build a simple store locator application using ASP.NET and the Google Maps API. The application consisted of two ASP.NET pages. In the first page, the user was prompted to enter an address, city, or postal code ( screen shot ). On postback, the user-entered address was fed into the Google Maps API’s geocoding service to determine whether the address, as entered, corresponded to known latitude and longitude coordinates. If it did, the user was redirected to the second page with the address information passed through the querystring. This page then queried the database to find nearby stores and listed them in a grid and as markers on a map ( screen shot ). Since the WebForms store locator application was published, several readers have emailed me to ask for an ASP.NET MVC version. I recently decided to port the existing WebForms application to ASP.NET MVC. This article, the first in a two-part series, walks through creating the ASP.NET MVC version of the store locator application and pinpoints some of the more interesting and challenging aspects. This article examines creating the ASP.NET MVC application and building the functionality for the user to enter an address from which to find nearby stores. Part 2 will examine how to show a grid and map of the nearby stores. Read on to learn more! Read More >

Many websites that support user accounts require users to enter an email address as part of the registration process. This email address is then used as the primary communication channel with the user. For instance, if the user forgets her password a new one can be generated and emailed to the address on file. But what if, when registering, a user enters an incorrect email address? Perhaps the user meant to enter me@example.com , but accidentally transposed the first two letters, entering em@example.com . How can such typos be prevented? The only foolproof way to ensure that the user’s entered email address is valid is to send them a validation email upon registering that includes a link that, when visited, activates their account.

Earlier this year I wrote an article about Twitterizer , an open-source .NET library that can be used to integrate your application with Twitter . Using Twitterizer you can allow your visitors to post tweets, view their timeline, and much more, all without leaving your website. The original article, Integrating Twitter Into An ASP.NET Website , showed how to post tweets and view a timeline to a particular Twitter account using Twitterizer 1.0. To post a tweet to a specific account, Twitterizer 1.0 uses basic authentication . Basic authentication is a very simple authentication scheme. For an application to post a tweet to JohnDoe’s Twitter account, it would submit JohnDoe’s username and password (along with the tweet text) to Twitter’s servers. Basic authentication, while easy to implement, is not an ideal authentication scheme as it requires that the integrating application know the username(s) and password(s) of the accounts that it is connected to. Consequently, a user must share her password in order to connect her Twitter account with the application. Such password sharing is not only insecure, but it can also cause difficulties down the line if the user changes her password or decides that she no longer wants to connect her account to certain applications (but wants to remain connected to others)

A common question I receive from clients, colleagues, and 4Guys readers is for recommendations on how best to store and display dates and times in a data-driven web application. One of the challenges in storing and displaying dates in a web application is that it is quite likely that the visitors arriving at your site are not in the same time zone as your web server; moreover, it’s very likely that your site attracts visitors from many different time zones from around the world. Consider an online messageboard site, like ASPMessageboard.com , where each of 1,000,000+ posts includes the date and time it was made. Imagine a user from New York leaves a post on April 7th at 4:30 PM and that the web server hosting the site is located in Dallas, Texas, which is one hour earlier than New York. When storing that post to the database do you record the post’s date and time relative to the visitor (4:30 PM), the relative to the web server (3:30 PM), or some other value? And when displaying this post how do you show that date and time to a reader in San Francisco, which is three hours earlier than New York? Do you show the time relative to the person who made the post (4:30 PM), relative to the web server (3:30 PM), or relative to the user (1:30 PM)? And if you decide to store or display the date based on the poster’s or visitor’s time zone then how do you know their time zone and its offset? How do you account for daylight savings, and so on? This article provides guidance on how to store and display dates and times for visitors across different time zones and includes a demo that gives a working example of some of these techniques. Read on to learn more! Read More >

Over the years I’ve worked on a number of projects where users could customize some aspect of the site. One such application surveyed a group of employees with and then made recommendations on how to best organize the employees into teams. Companies could buy a certain number of surveys and then direct their employees to the site to complete the survey. Before sending their employees to the site, a company could adjust the survey’s look and feel, uploading their own logo and choosing background and foreground colors, among other customizations. A common requirement for such customizable websites is the ability for the user to select one or more colors

Whenever a browser makes an HTTP request to a web server, it sends along several HTTP headers . These HTTP Headers are used to provide the web server with information to assist with handling the request. For instance, if the browser supports compression it will send along an Accept-Encoding HTTP Header, which lets the web server know what compression algorithms the browser can work with. Any cookies previously set by the web server are sent from the browser back to the server via the Cookies HTTP Header. The browser also sends the User-Agent HTTP Header, which the web server can parse to determine the browser (IE, Firefox, Safari, etc.), the version number, the operating system, and other information. Similarly, the web server includes a number of HTTP Headers when it sends back the contents of the requested resource. These headers are used by the browser to determine how to render the content and for how long to cache the content.

Many of the web applications I help build can be classified as in-production line of business applications that receive frequent and ongoing feature enhancements. Typically, these applications have dozens if not hundreds of users who rely on the site each and every day to accomplish tasks necessary to keep the company running smoothly. Every week or so the latest code is deployed to the production servers, bringing with it bug fixes and, very often, new features or changes to existing features. One challenge I’ve bumped into when working on such applications is how to best alert users of the new features and the changes to existing features?

Each series in a chart is composed of a set of data points, which are modeled via the DataPoint class. For most chart types, the two key attributes of a data point are its X and Y value. For example, in a line chart the X value indicates the position of the data point along the X axis, while the Y value represents the position of the data point along the Y axis. Ditto for a column chart, although it may help to think of the Y value as the height of the column.

Creating a Filtering User Interface With jQuery In a Web Forms Application: Part 1 looked at how to use jQuery in an ASP.NET Web Forms application to build a collapsible filtering user interface. When the page is loaded into the user’s browser the filtering interface is collapsed. Clicking the filtering interface’s title toggles the interface between its collapsed and expanded states. When expanded, a user can interact with the filtering controls – DropDownLists, TextBoxes, CheckBoxes, and so on – to narrow down the results displayed in the report beneath the filtering interface. While the filtering interface created in Part 1 certainly works, the collapsed/expanded state of the interface is not remembered. Consequently, on any postback or anytime a user leaves the page and comes back, the filtering interface returns to its collapsed state, regardless of whether the user had it expanded. The good news is that with a touch of AJAX we can have the collapsed/expanded state of the filtering user interface remembered for the duration of a user’s session. This article explores how to add such functionality. Read on to learn more! If you’ve not yet read Part 1 , please do so before tackling Part 2. Read More >

The Microsoft Chart controls make it easy to take data – such as sales numbers, website traffic statistics, and so on – and turn it into a chart, which can be saved to an image file or displayed from a web page. In Plotting Chart Data we examined a myriad of ways to turn data into a chart, including: plotting the chart data point by point; binding data to the Chart’s Points collection; programmatically binding data structured data to the chart; and declaratively binding data using one of ASP.NET’s data source controls, such as the SqlDataSource or ObjectDataSource. Oftentimes, web pages that display charts include user interface elements that let the user filter or sort the plotted data. For example, when viewing a chart of expenses, the user may want to only show expenses between two dates, or may want to sort the expenses by category. One way to provide such functionality is to sort or filter the data before binding it to the chart. Alternatively, you can bind the original data to the chart and then instruct the Chart control to sort the data, or to apply a filter. This article shows how to use these sorting and filtering capabilities. Read on to learn more! Read More >