The past six articles in this series have looked at how to display a grid of data in an ASP.NET MVC application and how to implement features like sorting, paging,
and filtering. In each of these past six tutorials we were responsible for generating the rendered markup for the grid. Our Views included the
<table> tags, the <th> elements for the header row, and a foreach loop that emitted a series of
<td> elements for each row to display in the grid. While this approach certainly works, it does lead to a bit of repetition and inflates the size
of our Views.
The ASP.NET MVC framework includes an HtmlHelper class that adds support
for rendering HTML elements in a View. An instance of this class is available through the Html object, and is often used in a View to create action links
(Html.ActionLink), textboxes (Html.TextBoxFor), and other HTML content. Such content could certainly be created by writing the markup by hand
in the View; however, the HtmlHelper makes things easier by offering methods that emit common markup patterns. You can even
create your own custom HTML Helpers by adding
extension methods to the HtmlHelper class.
MvcContrib is a popular, open source project that adds various functionality to the ASP.NET MVC framework. This includes
a very versatile Grid HTML Helper that provides a strongly-typed way to construct a grid in your
Views. Using MvcContrib's Grid HTML Helper you can ditch the <table>, <tr>, and <td> markup, and instead use
syntax like Html.Grid(...). This article looks at using the MvcContrib Grid to display a grid of data in an ASP.NET MVC application. A future installment
will show how to configure the MvcContrib Grid to support both sorting and paging. Read on to learn more!
Read More >
The Portable Document Format (PDF) is a popular file format for documents. Due to their ubiquity and layout
capabilities, it's not uncommon for a websites to use PDF technology. For example, an eCommerce store may offer a "printable receipt" option that, when selected,
displays a PDF file within the browser. Last week's article, Filling in PDF Forms with ASP.NET and
iTextSharp, looked at how to work with a special kind of PDF document, namely one that has one or more fields defined. A PDF document can contain various types
of user interface elements, which are referred to as fields. For instance, there is a text field, a checkbox field, a combobox field, and more. Typically, the person
viewing the PDF on her computer interacts with the document's fields; however, it is possible to enumerate and fill a PDF's fields programmatically, as we saw in last
This article continues our investigation into iTextSharp, a .NET open source
library for PDF generation, showing how to use iTextSharp to create PDF documents from scratch. We start with an example of how to programmatically define and piece
together paragraphs, tables, and images into a single PDF file. Following that, we explore how to use iTextSharp's built-in capabilities to convert HTML into PDF. Read
on to learn more!
Read More >
The Portable Document Format (PDF) is a popular file format for documents. PDF files are a popular document format
for two primary reasons: first, because the PDF standard is an open standard, there are many vendors that provide PDF readers across virtually all operating systems,
and many proprietary programs, such as Microsoft Word, include a "Save as PDF" option. Consequently, PDFs server as a sort of common currency of exchange. A person
writing a document using Microsoft Word for Windows can save the document as a PDF, which can then be read by others whether or not they are using Windows and whether
or not they have Microsoft Word installed. Second, PDF files are self-contained. Each PDF file includes its complete text, fonts, images, input fields, and other content.
This means that even complicated documents with many images, an intricate layout, and with user interface elements like textboxes and checkboxes can be encapsulated in
a single PDF file.
Due to their ubiquity and layout capabilities, it's not uncommon for a websites to use PDF technology. For example, when purchasing goods at an online store you may
be offered the ability to download an invoice as a PDF file. PDFs also support form fields, which are user interface elements like textboxes, checkboxes,
comboboxes, and the like. These form fields can be entered by a user viewing the PDF or, with a bit of code, they can be entered programmatically.
This article is the first in a multi-part series that examines how to programmatically work with PDF files from an ASP.NET application using
iTextSharp, a .NET open source library for PDF generation. This installment shows how to use iTextSharp to
open an existing PDF document with form fields, fill those form fields with user-supplied values, and then save the combined output to a new PDF file. Read on to learn more!
Read More >
Chances are, at some point you've tried creating a new user account on a website and were told that the username you selected was already taken. This is especially common
on very large websites with millions of members, but can happen on smaller websites with common usernames, such as people's names or popular words or phrases in the lexicon
of the online community that frequents the website. If the user registration process is short and sweet, most users won't balk when they are told their desired username
has already been taken - they'll just try a new one. But if the user registration process is long, involving several questions and scrolling, it can be frustrating to
complete the registration process only to be told you need to return to the top of the page to try a different username.
Many websites use Ajax techniques to check whether a visitor's desired username is available as soon as they enter it (rather than waiting for them to submit the form).
This article shows how to implement such a feature in an ASP.NET website using Membership and
jQuery. This article includes a demo available for download that implements this behavior in an ASP.NET WebForms application that uses
the CreateUserWizard control to register new users. However, the concepts in this article can be
applied to ad-hoc user registration pages and ASP.NET MVC.
When a browser displays the HTML sent from a web server it parses the received markup into a Document Object Model, or DOM, which models the markup as a hierarchical structure.
Each element in the markup - the <form> element, <div> elements, <p> elements, <input>
elements, and so on - are represented as a node in the DOM and can be programmatically accessed from client-side script. What's more, the nodes that make up the DOM
have functions that can be called to perform certain behaviors; what functions are available depend on what type of element the node represents.
One function common to most all node types is focus, which gives keyboard focus to the corresponding element. The focus function is commonly
used in data entry forms, search pages, and login screens to put the user's keyboard cursor in a particular textbox when the web page loads so that the user can start
typing in his search query or username without having to first click the textbox with his mouse. Another useful function is select, which is available for
<input> and <textarea> elements and selects the contents of the textbox.
This article shows how to call an HTML element's focus and select functions. We'll look at calling these functions directly from client-side
script as well as how to call these functions from server-side code. Read on to learn more!
Read More >
Over the past couple of months I've authored five articles on displaying a grid of data in an ASP.NET MVC application. The first
article in the series focused on simply displaying data. This was followed by articles showing how
to sort, page, and
filter a grid of data. We then examined how to both sort
and page a single grid of data. This article looks at how to add the final piece to the puzzle: we'll see how to combine sorting, paging and filtering when displaying
data in a single grid.
Like with its predecessors, this article offers step-by-step instructions and includes a complete, working demo available for download at the end of the article.
Read on to learn more!
Read More >
Many websites display a news ticker of one sort or another. A news ticker is a user interface element that displays a subset of a list of items, cycling through
them one at a time after a set interval. In December 2010 I wrote an article titled Use jQuery and ASP.NET
to Build a News Ticker that explored how to create your own news ticker widget using jQuery and ASP.NET.
The news ticker's content is defined as an unordered list (<ul>) where each list item (<li>) represents a news headline.
startTicker(id, numberToShow, duration), which begins cycling the headlines in the unordered list with the specified id,
showing numberToShow headlines at a time and cycling to the next headline every duration number of milliseconds.
This installment shows how to enhance the news ticker to enable pausing and resuming. With these enhancements, the ticker can be configured to automatically
pause rotating its headlines when the user mouses over it, and to resume rotating them once the user mouses out. Similarly, with a bit of additional markup and script
you can add pause and play buttons to a ticker, allowing a user to start and stop the ticker by clicking an image or button.
Read on to learn more!
Read More >