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

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.

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

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.

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

XML is an increasingly popular way to encode documents, data, and electronic messages. There are a number of ways to programmatically create, modify, and search XML files. Since its inception, the .NET Framework’s System.Xml namespace has included classes for programmatically working with XML documents. For instance, the XmlReader and XmlWriter classes offer developers a means to read from or write to XML files in a fast, forward-only manner, while the XmlDocument class allows developers to work with an XML document as an in-memory tree representation. LINQ to XML is a new set of XML-related classes in the .NET Framework (found in the System.Xml.Linq namespace ), which enable developers to work with XML documents using LINQ’s features, syntax, and semantics. Compared to .NET’s existing XML APIs, LINQ to XML is a simpler, easier to use API. For a given task, LINQ to XML code is typically shorter and more readable than code that uses the XmlDocument or XmlReader / XmlWriter classes.

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

The SqlBulkCopy class provides a mechanism for efficiently importing large amounts of data into a Microsoft SQL Server database. Compared to importing data by executing one INSERT statement for each record to import, SqlBulkCopy is noticeably faster when importing thousands (or more) records. In a nutshell, importing data using SqlBulkCopy entails creating a SqlBulkCopy object, specifying the destination database and table, and providing the data to import in the form of a DataTable , DataRow , or DataReader. In Using SqlBulkCopy To Perform Efficient Bulk SQL Operations we looked at how to use SqlBulkCopy to programmatically import data from an uploaded Excel spreadsheet into a SQL Server database. While Using SqlBulkCopy To Perform Efficient Bulk SQL Operations showed how to use the SqlBulkCopy class, it did not explore how SqlBulkCopy imports fare in the face of an error. What happens if, when importing a total of 10,000 records, an error occurs when importing record number 501?