Right Click Menu using JQuery ASP.NET using C#

• Download source - 46.48 KB

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.

    <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

<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

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

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

• 18^th May, 2010: Initial post