F9 Group Marketing and Technology Blog

While surfing the web you may have come across websites with images and other multimedia content that, when clicked, were displayed in a floating window that hovered above the web page. Perhaps it was a page that showed a series of thumbnail images of products for sale, where clicking on a thumbnail displayed the full sized image in a floating window, dimming out the web page behind it. Have you ever wondered how this was accomplished or whether you could add such functionality to your ASP.NET website? In years past, adding such rich client-side functionality to a website required a solid understanding of JavaScript and the “eccentricities” of various web browsers. Today, thanks to powerful JavaScript libraries like jQuery , along with an active developer community creating plugins and tools that integrate with jQuery, it’s possible to add snazzy client-side behaviors without being a JavaScript whiz. This article shows how to display text, images, and other multimedia content in a floating window using FancyBox , a free client-side library. You’ll learn how it works, see what steps to take to get started using it, and explore a number of FancyBox demos. There’s also a demo available for download that shows using FancyBox to display both text and images in a floating window in an ASP.NET website. Read on to learn more! Read More >

Cascading Style Sheets , or CSS, is a syntax used to describe the look and feel of the elements in a web page. CSS allows a web developer to separate the document content – the HTML, text, and images – from the presentation of that content. Such separation makes the markup in a page easier to read, understand, and update; it can result in reduced bandwidth as the style information can be specified in a separate file and cached by the browser; and makes site-wide changes easier to apply. For a great example of the flexibility and power of CSS, check out CSS Zen Garden . This website has a single page with fixed markup, but allows web developers from around the world to submit CSS rules to define alternate presentation information. Unfortunately, certain aspects of CSS’s syntax leave a bit to be desired. Many style sheets include repeated styling information because CSS does not allow the use of variables. Such repetition makes the resulting style sheet lengthier and harder to read; it results in more rules that need to be changed when the website is redesigned to use a new primary color. Specifying inherited CSS rules, such as indicating that a elements (i.e., hyperlinks) in h1 elements should not be underlined, requires creating a single selector name, like h1 a . Ideally, CSS would allow for nested rules, enabling you to define the a rules directly within the h1 rules. .LESS is a free, open-source port of Ruby’s LESS library

Twitter is a popular social networking web service for writing and sharing short messages. These tidy text messages are referred to as tweets and are limited to 140 characters. Users can leave tweets and follow other users directly from Twitter’s website or by using the Twitter API. Twitter’s API makes it possible to integrate Twitter with external applications. For example, you can use the Twitter API to display your latest tweets on your blog. A mom and pop online store could integrate Twitter such that a new tweet was added each time a customer completed an order. And ELMAH , a popular open-source error logging library, can be configured to send error notifications to Twitter. Twitter’s API is implemented over HTTP using the design principles of Representational State Transfer (REST) . In a nutshell, inter-operating with the Twitter API involves a client – your application – sending an XML-formatted message over HTTP to the server – Twitter’s website. The server responds with an XML-formatted message that contains status information and data. While you can certainly interface with this API by writing your own code to communicate with the Twitter API over HTTP along with the code that creates and parses the XML payloads exchanged between the client and server, such work is unnecessary since there are many community-created Twitter API libraries for a variety of programming frameworks. This article shows how to integrate Twitter with an ASP.NET website using the Twitterizer library, which is a free, open-source .NET library for working with the Twitter API. Specifically, this article shows how to retrieve your latest tweets and how to post a tweet using Twitterizer

In most usage scenarios, the data displayed in a Microsoft Chart control comes from some dynamic source, such as from a database query. The appearance of the chart can be modified dynamically, as well; past installments in this article series showed how to programmatically customize the axes, labels, and other appearance-related settings. However, it is possible to statically define the chart’s data and appearance strictly through the control’s declarative markup. One of the demos examined in the Getting Started article rendered a column chart with seven columns whose labels and values were defined statically in the <asp:Series> tag’s <Points> collection. Given this functionality, it should come as no surprise that the Microsoft Chart Controls also support serialization . Serialization is the process of persisting the state of a control or an object to some other medium, such as to disk. Deserialization is the inverse process, and involves taking the persisted data and recreating the control or object. With just a few lines of code you can persist the appearance settings, the data, or both to a file on disk or to any stream. Likewise, it takes just a few lines of codes to reconstitute a chart from the persisted information.

Like every Web control in the ASP.NET toolbox, the GridView includes a variety of style-related properties, including CssClass , Font , ForeColor , BackColor , Width , Height , and so on. The GridView also includes style properties that apply to certain classes of rows in the grid, such as RowStyle , AlternatingRowStyle , HeaderStyle , and PagerStyle . Each of these meta-style properties offer the standard style properties ( CssClass , Font , etc.) as subproperties. In ASP.NET 4.0, Microsoft added four new style properties to the GridView control: SortedAscendingHeaderStyle , SortedAscendingCellStyle , SortedDescendingHeaderStyle , and SortedDescendingCellStyle . These four properties are meta-style properties like RowStyle and HeaderStyle , but apply to column of cells rather than a row. These properties only apply when the GridView is sorted – if the grid’s data is sorted in ascending order then the SortedAscendingHeaderStyle and SortedAscendingCellStyle properties define the styles for the column the data is sorted by. The SortedDescendingHeaderStyle and SortedDescendingCellStyle properties apply to the sorted column when the results are sorted in descending order. These four new properties make it easier to customize the appearance of the column by which the data is sorted. Using these properties along with a touch of Cascading Style Sheets (CSS) it is possible to add up and down arrows to the sorted column’s header to indicate whether the data is sorted in ascending or descending order. Likewise, these properties can be used to shade the sorted column or make its text bold.

The previous installment in this ongoing article series showed how to configure the DataPager control to generate an SEO-friendly paging interface. By default, the DataPager renders its paging interface as a series of Buttons, LinkButtons, or ImageButtons that, when clicked, trigger a postback. The problem with postbacks is that they are not crawled by search engine spiders, meaning that with the default behavior only the first page of data will make it into the search engines’ indexes. Fortunately, the DataPager’s paging interface can be configured to include the page number in the querystring. When configured this way, the DataPager renders its paging interface using hyperlinks with URLs like Products.aspx?Page= PageNumber .

Filtering Database Data with Parameters , an earlier installment in this article series, showed how to filter the data returned by ASP.NET’s data source controls. In a nutshell, the data source controls can include parameterized queries whose parameter values are defined via parameter controls. For example, the SqlDataSource can include a parameterized SelectCommand , such as: SELECT * FROM Books WHERE Price > @Price . Here, @Price is a parameter ; the value for a parameter can be defined declaratively using a parameter control . ASP.NET offers a variety of parameter controls, including ones that use hard-coded values, ones that retrieve values from the querystring, and ones that retrieve values from session, and others. Perhaps the most useful parameter control is the ControlParameter, which retrieves its value from a Web control on the page. Using the ControlParameter we can filter the data returned by the data source control based on the end user’s input. While the ControlParameter works well with most types of Web controls, it does not work as expected with the CheckBoxList control. The ControlParameter is designed to retrieve a single property value from the specified Web control, but the CheckBoxList control does not have a property that returns all of the values of its selected items in a form that the CheckBoxList control can use. Moreover, if you are using the selected CheckBoxList items to query a database you’ll quickly find that SQL does not offer out of the box functionality for filtering results based on a user-supplied list of filter criteria. The good news is that with a little bit of effort it is possible to filter data based on the end user’s selections in a CheckBoxList control.

The GridView, FormView, and DetailsView controls all contain built-in paging functionality. By setting a few properties, it’s possible to have any of these controls automatically include a paging interface. The ListView, however, does not include built-in paging functionality. Instead, Microsoft decoupled the paging logic from the ListView and moved it into a separate Web control – the DataPager. Paging Through Data with the ListView and DataPager Controls , an earlier article in this series, explored how to use the DataPager to implement a paging interface for the ListView. By default, the DataPager renders Buttons, LinkButtons, or ImageButtons in the paging interface for the Next, Previous, First, Last, and numeric page number buttons. When clicked, these buttons cause a postback, at which point the appropriate set of records are bound to the ListView. Unfortunately, search engines cannot crawl a site using postbacks; instead, they rely on links they find on your site. Consequently, a search engine will only index the first page of data displayed by a ListView, because it cannot reach the subsequent pages.

The end of the year is upon us, 2009 is about to be in the books. When closing out a year I like to take a look back at the articles I wrote over the year and see which ones resonated the most with readers. Which ones generated the most reader emails? Which ones were read the most? Such a retrospective analysis highlights what content was of most interest to developers in the trenches, and this data is used to guide article topics in the new year. While cataloging this year’s most popular articles I thought others might find the data interesting. Such a “Best Of 2009″ list would give both regular and new readers a chance to discover (or rediscover) the most favored content from the year. So here it is – a list and synopsis of the 2009’s most popular articles on 4GuysFromRolla.com. 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