1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml">
5: <head runat="server">
6: <title>ContextMenu in ASP.NET</title>
7: <!-- Emulate IE7 -->
8: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
9: <!-- Load jQuery -->
10: <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 1:
2: <!-- Context Menu Js Script -->
3: <script src="Scripts/jquery.contextmenu.js" type="text/javascript">
1: </script>
2: <!-- Context Meny Styles and Theme -->
3: <link href="jquery.contextmenu.css" rel="stylesheet" type="text/css" />
4: <!-- Modal Popup CSS -->
5: <link href="Style.css" rel="stylesheet" type="text/css" />
6: <script type="text/javascript">
7: // Create Context Menu
8: var ctxtMenu = [
9: { 'Copy to Other Textbox': function (menuItem, menu) { TriggerCopyText(); } }, 10: $.contextMenu.separator,
11: { 'Browser Version': function (menuItem, menu) { alert("Browser Version: " + window.navigator.appName); } }, 12: $.contextMenu.separator,
13: { 'Undo Copy': { disabled: true} } 14: ];
15:
16: // Assign Context-Menu to Control
17: $(function () { 18: var txt1 = "#" + "<%= txtName.ClientID %>";
19:
20: // Attach Context-Menu to Control
21: $(txt1).contextMenu(ctxtMenu, { theme: 'vista' }); 22: });
23:
24: /*** User-Defined Function ***/
25:
26: // Triggers/Initiates Copying Text
27: function TriggerCopyText() { 28: var txt1 = document.getElementById("<%= txtName.ClientID %>"); // First TextBox ID 29: var txt2 = document.getElementById("<%= txtCopyName.ClientID %>"); // Second TextBox ID 30: var mpeId = "<%= mpeCommon.ClientID %>" // Get ModalPopupExtender Id
31:
32: /***
33: Check whether the Text is Empty or not
34: If Empty, prompt a Modal Popup Extender to accept value
35: and copy it to the other TextBox
36: ***/
37:
38: if (txt1.value.length == 0) { 39: // Display Popup
40: $find(mpeId).show();
41: }
42: else { 43: // Copy Text
44: txt2.value = txt1.value;
45:
46: alert("Text successfully copied"); 47: }
48: }
49:
50: // Copies Text from Modalpop to the Second Textbox
51: function CopyText() { 52: var txt2 = document.getElementById("<%= txtCopyName.ClientID %>"); // Second TextBox ID 53: var txtPopup = $get("<%= txtPopup.ClientID %>"); // Popup Control ID 54: var mpeId = "<%= mpeCommon.ClientID %>" // Get ModalPopupExtender Id
55:
56: // Copy Value
57: txt2.value = txtPopup.value;
58:
59: // Hide ModalPopupExtender
60: $find(mpeId).hide();
61:
62: alert("Text successfully copied"); 63: }
64:
</script>
11: </head>
12: <body>
13: <form id="form1" runat="server">
14: <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
15: </asp:ToolkitScriptManager>
16:
17: <div style="border-color: #e9eaf1; border-width: 1px; padding: 10px; border-style: solid; width: 300px; margin: 200px 0px 0px 500px;">
18: <table style="width: 300px;">
19: <tr>
20: <td>Name:</td>
21: <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
22: </tr>
23: <tr>
24: <td> </td>
25: <td> </td>
26: </tr>
27: <tr>
28: <td>Copied Name:</td>
29: <td><asp:TextBox ID="txtCopyName" runat="server"></asp:TextBox></td>
30: </tr>
31: </table>
32: </div>
33: <!-- Modal Popup : Panel -->
34: <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup">
35: <table style="width: 400px;">
36: <tr>
37: <td> </td>
38: <td align="right">
39: <asp:HyperLink ID="hlnkclose" NavigateUrl="javascript:void(0);" runat="server">X</asp:HyperLink>
40: </td>
41: </tr>
42: <tr>
43: <td>Enter Text to be Copied:</td>
44: <td><asp:TextBox ID="txtPopup" runat="server"></asp:TextBox></td>
45: </tr>
46: <tr>
47: <td> </td>
48: <td> </td>
49: </tr>
50: <tr>
51: <td> </td>
52: <td><input id="htmlBtnOk" type="button" onclick="CopyText();" value="Copy Text" /></td>
53: </tr>
54: </table>
55: </asp:Panel>
56: <!-- ModalPopup Extender -->
57: <asp:ModalPopupExtender ID="mpeCommon" PopupControlID="pnlPopup" TargetControlID="btnDummy"
58: CancelControlID="hlnkclose" BackgroundCssClass="modalBackground" runat="server">
59: </asp:ModalPopupExtender>
60: <!--
61: Dummy Button:
62: -> used to set the Default TargetControlID of the ModalPopuExtender
63: -->
64: <asp:Button ID="btnDummy" Style="display: none;" runat="server" Text="Button" />
65: </form>
66: </body>
67: </html>