ZeroClipboard for copy to clipboard in ASP.NET MVC

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

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