F9 Group Marketing and Technology Blog

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.

In the .NET Framework 3.5 SP1, Microsoft introduced ASP.NET Routing, which decouples the URL of a resource from the physical file on the web server. With ASP.NET Routing you, the developer, define routing rules map route patterns to a class that generates the content. For example, you might indicate that the URL Categories/ CategoryName maps to a class that takes the CategoryName and generates HTML that lists that category’s products in a grid. With such a mapping, users could view products for the Beverages category by visiting www.yoursite.com/Categories/Beverages . In .NET 3.5 SP1, ASP.NET Routing was primarily designed for ASP.NET MVC applications, although as discussed in Using ASP.NET Routing Without ASP.NET MVC it is possible to implement ASP.NET Routing in a Web Forms application, as well. However, implementing ASP.NET Routing in a Web Forms application involves a bit of seemingly excessive legwork. In a Web Forms scenario we typically want to map a routing pattern to an actual ASP.NET page. To do so we need to create a route handler class that is invoked when the routing URL is requested and, in a sense, dispatches the request to the appropriate ASP.NET page

Charts are typically used to provide a static snapshot of data. The chart’s underlying data might be based on various user inputs, but in the end the chart, once rendered, represents the end of the reporting workflow. However, other scenarios allow for a more interactive user experience. For example, in the Creating Drill Down Reports article we looked at how to configure the Chart control to allow the user to drill into a particular data point. Specifically, the demo contained a column chart showing the number of products in each category in the Northwind database. Clicking on a column whisked the user to a new page that details about the products in that category. Also, in certain situations the data populating the chart might be arriving from a sensor or some other source that is constantly being updated. In that case, we might want a real time chart whose data is periodically (and automatically) refreshed to show the latest data

The Microsoft Chart controls make it easy to take data from a database or some other data store and present it as a chart. As discussed in Plotting Chart Data , the Chart controls offer a myriad of ways to get data into a chart. You can add the data programmatically, point-by-point, or you can bind an ADO.NET DataTable directly to the Chart. You can even use declarative data source controls, like the SqlDataSource or ObjectDataSource controls. In addition to converting your specified data points into a chart image, the Chart controls also include a wealth of statistical formulae that you can use to analyze the plotted data. For example, with a single line of code you determine the mean (average) value for data in a particular series. Likewise, with one line of code you can get the median, variance, or standard deviation. These values can be displayed as text on the page or as a stripe line on the chart itself

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.

Over the years I’ve worked on a number of projects that have shared a common requirement – the ability for users to quickly import large amounts of data into a back end SQL Server database. One such project was a web application used by teachers and other staff members. The software was initially purchased for just two schools in the district, but was soon expanded to encompass other schools. Every few months one or two new schools were brought into the fold; every time a new school was added an administrative user would have to create accounts for the new teachers and staff members so that they could sign into the site. Initially, the application offered a web page for the administrator to create new user accounts one at a time, but this interface quickly became tedious and impractical once larger schools with upwards of 100 users were brought online. To allow school administrators to quickly import new users we created a web page from which a user could upload an Excel spreadsheet that contained the one row for every new user; the columns in the spreadsheet mapped to table columns in the database. After uploading this spreadsheet, the application would walk through each row and insert a record into the table. Through this mechanism an administrator could create the 100+ user accounts by first building an Excel spreadsheet (something many of the schools already had on file) and then upload that spreadsheet. This technique may sound familiar – in Importing an Excel Spreadsheet Using Typed DataSets and TableAdapters , author Nannette Thacker walked through building such an interface. While the described approach works well when importing hundreds of records, it starts to seriously slow down when importing thousands or tens of thousands of records

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 .NET Framework is big. Really big. The System.Web assembly, which contains the guts of ASP.NET, is comprised of nearly 2,000 types, over 23,000 methods, and more than 12,500 properties. And that’s not counting any of the functionality added to ASP.NET since version 2.0. ASP.NET AJAX, the ListView control, Dynamic Data, URL routing, and other features add hundreds of new types and thousands of new methods and properties.