ZeroClipboard 用于在 ASP.NET MVC 中复制到剪贴板答案

【问题标题】：ZeroClipboard for copy to clipboard in ASP.NET MVCZeroClipboard 用于在 ASP.NET MVC 中复制到剪贴板
【发布时间】：2013-02-25 14:25:09
【问题描述】：

我想向我的ASP.NET 网页添加复制到剪贴板功能。我找到了ZeroClipboard，但我找不到任何一个有效的例子。我可以让它在本地计算机上运行还是需要上传到服务器进行测试？

请给我一个示例链接。

【问题讨论】：

标签： javascript jquery asp.net asp.net-mvc zeroclipboard

【解决方案1】：

jQuery ZeroClipBoard 可能就是您要找的。 ZeroClipBoard 使用不可见的 Adobe Flash 影片来实现剪贴板功能。我们在我们的项目中使用它，它工作得非常好。

很容易实现。下载 Flash 文件并将其包含在脚本文件夹中，然后按照以下步骤操作。

将 jQuery 和 zClip 添加到您的文档中：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>

在

$(document).ready(function(){
    $('a#copy-description').zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('p#description').text()
    });
    // The link with ID "copy-description" will copy
    // the text of the paragraph with ID "description"
    $('a#copy-dynamic').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){return $('input#dynamic').val();}
    });
    // The link with ID "copy-dynamic" will copy the current value
    // of a dynamically changing input with the ID "dynamic"
});

【讨论】：

两者都使用不可见的 Flash 电影来实现剪贴板功能，我不确定两者是否相同。但这很容易实现并且非常可靠。
嗨@ssilas：代码运行良好。我有一个问题。我在 jquery ui 选项卡中使用 zclip。它在第一个处于活动状态的选项卡中工作正常，但在第二个处于非活动状态的选项卡中不起作用。有什么解决办法吗？
有没有涉及到ajax进程/部分视图更新？
不，只是将它添加到第二个选项卡上，但它不起作用，同样的事情在第一个选项卡中起作用。这是我发布的stackoverflow.com/questions/15087413/… 我认为是因为 div/second 选项卡被隐藏了
实际上有 ajax 但没有在标签更改上。

【解决方案2】：

The documentation 有一个完整的示例说明如何设置它。如果我们假设你使用Razor:

<html>
    <body>
        <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
        <script src="@Url.Content("~/scripts/ZeroClipboard.js")"></script>
        <script type="text/javascript">
            var pathToSWF = '@Url.Content("~/scripts/ZeroClipboard.swf")';
        </script>
        <script src="@Url.Content("~/scripts/main.js)""></script>
    </body>
</html>

然后在你的main.js：

// main.js
var clip = new ZeroClipboard( document.getElementById("copy-button"), {
    moviePath: pathToSWF
} );

clip.on( 'load', function(client) {
    // alert( "movie is loaded" );
} );

clip.on( 'complete', function(client, args) {
    this.style.display = 'none'; // "this" is the element that was clicked
    alert("Copied text to clipboard: " + args.text );
} );

clip.on( 'mouseover', function(client) {
    // alert("mouse over");
} );

clip.on( 'mouseout', function(client) {
    // alert("mouse out");
} );

clip.on( 'mousedown', function(client) {
    // alert("mouse down");
} );

clip.on( 'mouseup', function(client) {
    // alert("mouse up");
} );

【讨论】：

要复制文本的按钮和文本框在哪里？
我的意思是标记？它会在本地工作还是我需要将页面上传到服务器？
1.该按钮位于我发布的标记内。 2.你的服务器上需要有js和swf文件。
如果我想在本地测试呢？实际上我试图在按钮单击时将文本框的文本复制到剪贴板，标记如下： model.DBLinkUniqueURL, new {style="width: 98.5%; width: 98%; "}) %>
那么在本地测试一下。有什么问题？