Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET

Right Click Menu using JQuery ASP.NET using C#

Rate me:
Please Sign up or sign in to vote.
4.91/5 (18 votes)
18 May 2010CPOL2 min read 103.2K   5.9K   57   15
Jquery Context Menu control

Introduction

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

Background

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.

HTML
<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>
</ul>

JQuery

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

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

        $("#addNewCustomerInstructionsImg").click(function(ev) {
            toggleAddCustomerInstructions();
        });

        $("#addNewCustomerInstructionsLink").click(function(ev) {
            ev.preventDefault();
            toggleAddCustomerInstructions();
        });

        $("#addNewCustomerInstructionsClose").click(function(ev) {
            ev.preventDefault();
            toggleAddCustomerInstructions();
        });

        $("#customerResponse").fadeOut(5000);

        $(".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() + "?";
                        $("#HiddenFieldRowId").val($(el).find("#customerid").text());
                        confirm(msg);
                        break;
                    }
                case "insert":
                    {
                        $("#TextBoxContactName").val("");
                        $("#TextBoxContactTitle").val("");
                        $("#TextBoxCountry").val("");
                        $("#TextBoxPhone").val("");

                        $("#addNewCustomer").modal({
                            close: true,
                            onOpen: modalOpenAddCustomer,
                            onClose: modalOnClose,
                            persist: true,
                            containerCss: ({ width: "500px", height: "275px", 
					marginLeft: "-250px" })
                        });
                        break;
                    }

                case "edit":
                    {
                        alert(
                                '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) {
       dialog.data.fadeOut('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:

Properties

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

Events

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

HTML
<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:

HTML
<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.

Conclusion

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

History

  • 18th May, 2010: Initial post

License

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


Written By
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 www.aspxtutorial.com and dotnetplace.com. He is a Microsoft Certified and SEO professional too. He is capable of coordinating off-shore high level web development projects.


asp.net Tutorial, sample code and demo

Comments and Discussions

 
QuestionCan this thing implement on MS Chart if yes then how Pin
Muhammad Raheel Yousuf27-Dec-13 21:12
professionalMuhammad Raheel Yousuf27-Dec-13 21:12 
AnswerRe: Can this thing implement on MS Chart if yes then how Pin
composeme30-Dec-13 23:51
composeme30-Dec-13 23:51 
GeneralRe: Can this thing implement on MS Chart if yes then how Pin
Muhammad Raheel Yousuf3-Jan-14 22:14
professionalMuhammad Raheel Yousuf3-Jan-14 22:14 
GeneralRe: Can this thing implement on MS Chart if yes then how Pin
composeme23-Feb-14 18:43
composeme23-Feb-14 18:43 
GeneralMy vote of 5 Pin
Prasyee27-Sep-12 22:20
Prasyee27-Sep-12 22:20 
Questionwant selected Column and Row Index Pin
Member 774080617-Sep-12 0:23
Member 774080617-Sep-12 0:23 
AnswerRe: want selected Column and Row Index Pin
composeme16-Oct-12 22:11
composeme16-Oct-12 22:11 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey7-Feb-12 21:40
professionalManoj Kumar Choubey7-Feb-12 21:40 
GeneralMy vote of 4 Pin
raj ch14-Sep-11 22:45
raj ch14-Sep-11 22:45 
GeneralMy vote of 3 Pin
Member 775531417-Mar-11 23:34
Member 775531417-Mar-11 23:34 
Generaluse context menu Pin
marzieh minooyee20-Aug-10 18:17
marzieh minooyee20-Aug-10 18:17 
GeneralMy vote of 5 Pin
anhduongxanh12-Jul-10 18:31
anhduongxanh12-Jul-10 18:31 
GeneralImages Pin
AspDotNetDev3-Jun-10 20:05
protectorAspDotNetDev3-Jun-10 20:05 
GeneralGood job my vote 1 Pin
aimosh25-May-10 1:07
aimosh25-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.