ZeroClipboard for copy to clipboard in ASP.NET MVC

问题

I want to add a copy-to-clipboard functionality to my ASP.NET webpage. I found ZeroClipboard, but I couldn't find any single example wroking. Can I make it work on local computer or do I need to upload to server to test it?

Please send me an example link.

回答1:

jQuery ZeroClipBoard would probably be what you are looking for. ZeroClipBoard uses an invisible Adobe Flash movie for achieving clipboard functionality. We are using this in our project's and it is working absolutely fine.

It is easy to implement. Download a Flash file and include it in the scripts folder and follow the below steps.

Add jQuery and zClip to your document:

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

Inside of a <script> block, attach zClip to the element which will become your "copy button":

$(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"
});

回答2:

The documentation has a complete example on how you could set this up. If we suppose that you use 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>

And then inside your 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");
} );

来源：https://stackoverflow.com/questions/15069205/zeroclipboard-for-copy-to-clipboard-in-asp-net-mvc

标签

javascript

jquery

ASP.NET

asp.net-mvc

zeroclipboard