ZeroClipboard for copy to clipboard in ASP.NET MVC

Question

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.

score 1 · Accepted Answer · edited May 27 '13 at 20:56

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

edited May 27 '13 at 20:56

Peter Mortensen

30,738
21
105
131

answered Feb 25 '13 at 14:32

ssilas777

9,672
4
45
68

Both uses an invisible Flash movie for clipboard functionality, I'm not sure if both are same. But this is far easy to implement and is quite reliable. – ssilas777 Feb 25 '13 at 14:38
Hi @ssilas: The code worked great. I have one issue. I am using zclip in jquery ui tabs. It wokrks fine in first tab which is active but it doesnt work in second tab which is inactive. any solution to this ? – DotnetSparrow Feb 26 '13 at 11:26
Is there any ajax process/partial view updates involved in it? – ssilas777 Feb 26 '13 at 11:33
No, just added it on second tab and it doesnt work and same thing works in first tab. here is what i posted http://stackoverflow.com/questions/15087413/zclip-not-work-in-jquery-ui-inactive-tab I think it because div/second tab is hidden – DotnetSparrow Feb 26 '13 at 11:42
actually there is ajax but not on tab change. – DotnetSparrow Feb 26 '13 at 11:44

score 0 · Answer 2 · edited May 27 '13 at 20:58

0

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

edited May 27 '13 at 20:58

Peter Mortensen

30,738
21
105
131

answered Feb 25 '13 at 14:30

Darin Dimitrov

1,023,142
271
3,287
2,928

Where is the button and textbox which will have text to be copied ? – DotnetSparrow Feb 25 '13 at 14:38
I mean the markup ? and it will work locally or i need to uplaod page to server ? – DotnetSparrow Feb 25 '13 at 14:38
1. The button is inside the markup I have posted. 2. You need to have the js and swf file on your server. – Darin Dimitrov Feb 25 '13 at 14:42
What if i want to test it locally ? actually i am trying to copy text of a textbox to clipboard on button click and markup is like this: <%= Html.TextBoxFor(model => model.DBLinkUniqueURL, new {style="width: 98.5%; width: 98%;"}) %> – DotnetSparrow Feb 25 '13 at 14:44
Well then test it locally. What's the problem? – Darin Dimitrov Feb 25 '13 at 15:06

ZeroClipboard for copy to clipboard in ASP.NET MVC

2 Answers2

Linked