Click here to Skip to main content
13,631,589 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


57 bookmarked
Posted 18 May 2010
Licenced CPOL

Right Click Menu using JQuery ASP.NET using C#

, 18 May 2010
Rate this:
Please Sign up or sign in to vote.
Jquery Context Menu control


Here, I am going to introduce a JQuery Context Menu control. It is a cross-browser JavaScript class that runs on various browsers.


I have created a context menu to display on a ListView control to perform some actions in a project. The context menu was Internet Explorer specific, and not cross-browser compatible. I am also including jquery HTML. I had created its layout using the HTML table and div elements and displayed it using JQuery. I have developed it as a cross-browser JQuery class.

HTML Markup for the Menu

Menu will appear whenever one of the table rows is right clicked. Menu will appear whenever one of the cells containing a lightning icon is left clicked.

<ul id="myMenu" class="contextMenu">
<li class="insert"><a href="#insert">Add New</a></li>
<li class="edit"><a href="#edit">Edit</a></li>
<li class="delete"><a href="#delete">Delete</a></li>


Adding the HTML markup for the container to be called as well as the fields and ASP.NET validation controls is shown in the image above. I added the jQuery necessary to open and close the popup with animations as well as call the hidden button that actually causes the postback once the data has been validated.

JQuery Script

<script type="text/javascript">
    $(document).ready(function() {

        $("#addNewCustomerInstructionsImg").click(function(ev) {

        $("#addNewCustomerInstructionsLink").click(function(ev) {

        $("#addNewCustomerInstructionsClose").click(function(ev) {


        $(".customerRow").contextMenu({ menu: 'myMenu' }, 
	function(action, el, pos) { contextMenuWork(action, el, pos); });
        $(".openmenu").contextMenu({ menu: 'myMenu', leftButton: true }, 
	function(action, el, pos) { contextMenuWork(action, el.parent("tr"), pos); });

        function contextMenuWork(action, el, pos) {

            switch (action) {
                case "delete":
                        var msg = "Delete " + $(el).find("#contactname").text() + "?";
                case "insert":

                            close: true,
                            onOpen: modalOpenAddCustomer,
                            onClose: modalOnClose,
                            persist: true,
                            containerCss: ({ width: "500px", height: "275px", 
					marginLeft: "-250px" })

                case "edit":
                                'Action: ' + action + '\n\n' +
                                'Element ID: ' + $(el).attr('id') + '\n\n' +
                                'X: ' + pos.x + '  Y: ' + pos.y + 
				' (relative to element)\n\n' +
                                'X: ' + pos.docX + '  Y: ' + pos.docY + 
				' (relative to document)'

   function modalOnClose(dialog) {'slow', function() {
           dialog.container.slideUp('slow', function() {
               dialog.overlay.fadeOut('slow', function() {
                   $.modal.close(); // must call this to have SimpleModal       
                   // re-insert the data correctly and
                   // clean up the dialog elements

This is how to Right Click on ListView:

Confirm Pop Up how to delete a record from ListView:

Comfirm event deleted record Jquery function:


Context menu control has only a public property. It only displays the current version of the context menu control. It does nothing else.


The context menu control has only one event – The Click event that fires when items other than the separator items are clicked.

Note that the Click event handler is a C# style event handler.

Using the Control

Add a reference to the *.js files in your web page under Head Tag, as:

Under Head Tag

<script src="_assets/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="_assets/js/jquery.simplemodal-1.1.1.js" type="text/javascript"></script>
<script src="_assets/js/jquery.contextMenu.js" type="text/javascript"></script>

Style Sheet

Add Style sheet under head tag:

<link href="_assets/css/StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="_assets/css/confirm.css" rel="stylesheet" type="text/css" />   
<link href="_assets/css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />

This method will get called when you click on any item of the context menu. Don’t forget to invoke the Hide method at last in the event handler.


I was working for a long time to create C# like event handlers for the JQuery classes and finally, I’ve done it.


  • 18th May, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior) Dotnetplace
Pakistan Pakistan
Aamir Hasan is a Sr. Software Engineer and Technical Lead in a US based firm, having five years of experiences working in Software Design, Software Analysis, Business Intelligence, Web Development, Consultancy and Training, using SQL Server, .NET Framework and provides consultancy on how to design and develop .NET application with database solutions. Aamir is the founder of and He is a Microsoft Certified and SEO professional too. He is capable of coordinating off-shore high level web development projects. Tutorial, sample code and demo

You may also be interested in...


Comments and Discussions

QuestionCan this thing implement on MS Chart if yes then how Pin
muhammadraheel27-Dec-13 21:12
membermuhammadraheel27-Dec-13 21:12 
AnswerRe: Can this thing implement on MS Chart if yes then how Pin
composeme30-Dec-13 23:51
membercomposeme30-Dec-13 23:51 
GeneralRe: Can this thing implement on MS Chart if yes then how Pin
muhammadraheel3-Jan-14 22:14
membermuhammadraheel3-Jan-14 22:14 
GeneralRe: Can this thing implement on MS Chart if yes then how Pin
composeme23-Feb-14 18:43
membercomposeme23-Feb-14 18:43 
GeneralMy vote of 5 Pin
Prasyee27-Sep-12 22:20
memberPrasyee27-Sep-12 22:20 
Questionwant selected Column and Row Index Pin
Member 774080617-Sep-12 0:23
memberMember 774080617-Sep-12 0:23 
AnswerRe: want selected Column and Row Index Pin
composeme16-Oct-12 22:11
membercomposeme16-Oct-12 22:11 
GeneralMy vote of 5 Pin
manoj kumar choubey7-Feb-12 21:40
membermanoj kumar choubey7-Feb-12 21:40 
GeneralMy vote of 4 Pin
supriya chaladi14-Sep-11 22:45
membersupriya chaladi14-Sep-11 22:45 
GeneralMy vote of 3 Pin
Member 775531417-Mar-11 23:34
memberMember 775531417-Mar-11 23:34 
Generaluse context menu Pin
marzieh minooyee20-Aug-10 18:17
membermarzieh minooyee20-Aug-10 18:17 
GeneralMy vote of 5 Pin
anhduongxanh12-Jul-10 18:31
memberanhduongxanh12-Jul-10 18:31 
GeneralImages Pin
aspdotnetdev3-Jun-10 20:05
memberaspdotnetdev3-Jun-10 20:05 
GeneralGood job my vote 1 Pin
aimosh25-May-10 1:07
memberaimosh25-May-10 1:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.180712.1 | Last Updated 18 May 2010
Article Copyright 2010 by composeme
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid