UI Tip
LANGUAGE: HTML | JavaScript | All .NET Languages
ASP.NET VERSIONS: 1.0 | 1.1
Create a Context-Sensitive Menu
Give your users a customized menu they can use when right-clicking in your ASP.NET apps.
By Brad McCabe
One of the common features in Windows applications is the ability to right-click on a section of an application or form and get a context-sensitive menu. If a user right-clicks in an ASP.NET application, however, the browser shows its own menu. This is rarely helpful for the user, and in some cases causes unexpected results in the application.
In this week's tip we'll take a look at creating a simple context menu. We'll enhance this menu in an upcoming installment of this column.
The base for this browser-based context menu is the contextMenu event that Internet Explorer raises on the client side when a user right-clicks on a Web page. We'll begin by looking at the client-side JavaScript that will be used to render the menu, then view how the code is created on the Web server.
The first thing that needs to be done in Internet Explorer is to create a popup-style window. This is done with the following line of code:
var PopWindow = window.createPopup();
The createPopup function will return a pointer to the newly created (and hidden) popup window. For more information on this function you can visit http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/createpopup.asp.
Once you have the reference to the popup window, you need to wire the client-side event, onContextMenu, to your own JavaScript function:
document.oncontextmenu = function() { dopopup(event.x,event.y);return false; }
This line of code couples the onContextMenu event to a function called doPopUp. When this function is invoked, the x and y coordinates of the mouse are passed to the function.
Now that the window has been created and the event wired up, the only thing left to do is write the code to handle the event:
function dopopup(x,y) {
var PopupHTML = PopWindow.document.body;
PopupHTML.innerHTML = ;
PopWindow.show(x, y, 140, 220, document.body);
}
The first line of the doPopUp function gets a pointer to the contents of the window that you created earlier. Since this is a complete window you have access to the body object to add any HTML that you would like to add.
Next, the HTML for the popup menu is inserted. This can be any HTML that you would like to have in the popup, although tables work best for maintaining formatting. Still, experiment with other tags here based on your needs.
After the HTML is inserted, the window is shown and positioned at the x and y position of the mouse. The height and width can be adjusted as needed to contain the HTML that you are inserting.
Figure 1 shows the basic code that can be added in your page load event to generate a basic 11-item pop up menu, shown in Figure 2.
Dim HTML As New System.Text.StringBuilder()
With HTML
.Append("
| _
Line 1 |
| _
Line 2 |
| _
Line 3 |
| _
Line 4 |
| _
Line 5 |
| _
Line 6 |
| _
Line 7 |
| _
Line 8 |
| _
Line 9 |
| _
Line 10 |
| _
Line 11 |
End With
Dim Script As New System.Text.StringBuilder()
With Script
.Append("")
End With
RegisterStartupScript("ContextMenu", Script.ToString)
End Sub
Figure 1. Use this code in your page load event to generate a basic 11-item pop-up menu.
Figure 2. The code in Figure 1
creates this simple pop-up menu.
In the next installment of this column we'll look at building on this foundation to add more features, such as mouse-over on the menu items, images, and other functionality.
Got a UI question, tip, or idea for a topic you'd like me to cover? I'd love to hear it. E-mail me at [email protected].
The sample code in this article is available for download.
Brad McCabe is the technical evangelist for Infragistics. Brad also has been a systems architect and consultant for Verizon Communications and many other clients, and he was a leading .NET evangelist within Ajilon Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networking technologies. E-mail him at [email protected].
