使用 jQuery ASP.NET 和 C# 实现右键菜单

• 下载源代码 - 46.48 KB

引言

在这里，我将介绍一个 jQuery 上下文菜单控件。它是一个跨浏览器的 JavaScript 类，可以在各种浏览器上运行。

背景

我创建了一个上下文菜单，用于在 ListView 控件上执行一些操作。最初的上下文菜单是 Internet Explorer 特有的，并且不兼容跨浏览器。我同时包含 jQuery HTML。我使用 HTML 表格和 div 元素创建了它的布局，并使用 jQuery 显示它。我将其开发为一个跨浏览器的 jQuery 类。

菜单的 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

添加 HTML 标记以调用容器以及字段和 ASP.NET 验证控件，如上图所示。我添加了 jQuery，用于使用动画打开和关闭弹出窗口，并调用隐藏的按钮，该按钮在数据验证后实际触发回发。

jQuery 脚本

<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
               });
           });
       });
    }    

这是在 ListView 上右键单击的方法

确认弹出窗口，如何从 ListView 中删除记录

确认事件删除记录 Jquery 函数

属性

上下文菜单控件只有一个 public 属性。它仅显示上下文菜单控件的当前版本。它不执行任何其他操作。

事件

上下文菜单控件只有一个事件 – Click 事件，当单击分隔符以外的项目时触发。

请注意，Click 事件处理程序是 C# 样式的事件处理程序。

使用控件

在 Head 标签下，在您的网页中添加对 *.js 文件的引用，如下所示：

Head 标签下

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

样式表

在 head 标签下添加样式表

<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" />

当您单击上下文菜单的任何项目时，将调用此方法。不要忘记在事件处理程序的最后调用 Hide 方法。

结论

我花了很多时间来为 jQuery 类创建类似 C# 的事件处理程序，最终我做到了。

历史

• 2010 年 5 月 18 日：初始发布