Displaying Text in the Browser's Status Bar When Mousing Over a LinkButtonBy Scott Mitchell
|A New Version of skmLinkButton is Available!|
The other day I was perusing the microsoft.public.dotnet.framework.aspnet.webcontrols newsgroup and stumbled upon this question by Brian Hoops:
Is there a way within asp to modify what the status bar text reads when the user hovers above the text for a link-button.I responded to Brian's question, informing him that there were no built-in properties of the LinkButton Web control that would provide this functionality, and that adding said functionality could be accomplished in one of two ways:
- By creating a new custom control that derived from LinkButton and included a property like
StatusBarTextspecifies the text to show in the browser's status bar when the LinkButton is moused over. This behavior is only utilized when the
ShowStatusBarTextis set to True.
ShowConfirm- there are times when you may want to display a client-side confirm dialog box upon a user clicking a LinkButton before posting back to the Web server. These two properties allow you to add such functionality, with
ConfirmMessagespecifying the text to show in the confirm dialog box and
ShowConfirm, a Boolean, specifying whether or not to show the confirm dialog box.
Displaying Text in the Browser's Status Bar and Displaying a Client-Side Confirm Dialog Box
Before we can examine the source code for skmLinkButton, let's first take a moment to understand the client-side script needed to display text in the browser's status bar and display a client-side confirm dialog box.
Displaying text in the browser's status bar is as easy as setting the
window.status property. For a LinkButton,
we'll want the status bar text to be displayed when the user mouses over the LinkButton's rendered hyperlink. Similarly, when
the user moves their mouse out of the LinkButton's hyperlink we'll want to clear out the browser's status bar text.
To accomplish this we need to add a bit of code to the hyperlink's
events. Here's what we want the HTML to look like:
A live demo is shown below - just move your mouse over the hyperlink. You'll notice that in your browser's status bar you see the text, "Hi, Mom!"
Now that we've seen how to display text in the status bar, let's look at the client-side code for displaying a confirm dialog box.
confirm(message) that causes a modal dialog box
to be displayed. This dialog box has two buttons - OK and Cancel - and contains the text specified by the input parameter
confirm(message) function returns a Boolean value:
true if the user
clicked the OK button,
false if they clicked Cancel. Confirm dialog boxes are often used to ensure that a
user wants to take some action. For example, in An Extensive Examination of the DataGrid: Part 8,
I showed how to use confirm dialog boxes to prompt a user to confirm that they really want to delete a record from the DataGrid.
confirm() function generally takes on the following pattern:
Note that the
onclick client-side event handler is returning the result of the
function. Recall that if the user clicks the Cancel button,
false is returned, meaning that clicking the Cancel
button in the confirm dialog box will cancel the form submission. For more on
confirm() and its uses, be sure
Extending the LinkButton Control
One of the main reasons ASP.NET is so powerful is that it's built upon the principles of object-oriented design. The Web controls used in an ASP.NET Web page are merely classes, and as such can be extended through inheritance. (For more on inheritance, be sure to read Ian Stallings' article Using Object-Orientation in ASP.NET.) Thanks to the power of inheritance, we can take an existing control, like the LinkButton, and build upon its existing functionality with minimal effort. I first discussed the ease of extending existing ASP.NET server controls in my article Easily Adding Functionality to ASP.NET Server Controls, and provided a further example in Creating a Row-Selectable DataGrid Control. These same concepts are put to use here in extending the LinkButton class to arrive with the enhanced skmLinkButton.
To start, create a new Web Control Library project in Visual Studio .NET in your language of choice. This will create a
class file for you. Now, you want to have your class derive from the
(Note: the complete code for this article is available as a download at the end of this article.)
The benefit of inheritance is that by simply extending an existing class (LinkButton, in this case), you automatically get all
of the built-in functionality of the base class. So, all that's left to do is add our needed functionality. Start by adding
four public properties:
ConfirmMessage as string properties, and
ShowConfirm as Booleans. You'll want to have these properties' get and set accessors
writing to the
ViewState collection, rather than to private member variables, in order to have programmatically
changed property values persisted correctly across postbacks. (For more on view state be sure to read
Understanding ASP.NET View State.)
The code for your class, at this point, should look like the following (note that the class derives from LinkButton):
At this point, a page developer could add the skmLinkButton to an ASP.NET page and set any of the LinkButton's properties
along with these four, extended properties. However, the skmLinkButton, at this point, would behave no differently
than the standard LinkButton, regardless of whether or not these property values were set. We still need to write
accomplished through the
AddAttributesToRender() method, whose responisbility is to add the attributes for
the rendered HTML element. What we need to do is to override this method, adding our own logic that squirts in the
onclick HTML attributes, as needed.
And that's all there is to it! To complete creation of the skmLinkButton server control, simply build the solution.
This will generate an assembly (a
.dll file) that you will need to include in the
of those Web applications that will use skmLinkButton.
Using skmLinkButton in an ASP.NET Page
If you are using Visual Studio .NET, adding skmLinkButton to an ASP.NET page is a breeze. Start by adding skmLinkButton to the Toolbox. This is accomplished by right-clicking on the Toolbox, choosing Add/Remove Items (or Customize Toolbox in VS.NET 2002), and Browsing to the assembly created when you compiled the project. (Note: at the end of this article you can download a pre-compiled assembly for ASP.NET 1.1, along with the complete source code.) After you've added this assembly to the Toolbox, you can simply drag and drop the skmLinkButton onto your page. You can set the skmLinkButton properties through the Properties pane, just like you normally would with a standard LinkButton.
If you are not using Visual Studio .NET to create your ASP.NET pages then you'll need to take the following steps to start using skmLinkButton:
- Copy the skmLinkButton assembly to your Web application's
- Add the following
@Registerdirective to the top of your ASP.NET page:
<%@ Register TagPrefix="skm" Namespace="Namespace" Assembly="Assembly" %>
(If you use the source code or pre-compiled assembly available at the end of this article, the namespace and assembly values should be
- Add the skmLinkButton to your ASP.NET page using the following declarative syntax:
<skm:skmLinkButton runat="server" ... />
In this article we looked at how to extend the built-in LinkButton to easily display text in the browser's status bar when moused over. We also saw how to have the LinkButton display a confirm dialog box, only causing a postback when the user clicks OK. Thanks to the power of inheritance, extending the functionality of ASP.NET's Web controls is as easy as creating a new class and tacking on the additional features.
skmLinkButton is just one of my handful of free, open-source ASP.NET controls. You can find a list of my personal control projects at the Scott Mitchell's Code Projects page. Another great source for free ASP.NET server controls is Andy Smith's MetaBuilders site.
|A New Version of skmLinkButton is Available!|