Step by step how to use the Dual List Twitter Bootstrap Bootdey snippet in Asp.Net MVC

        By Carmel Schvartzman

In this tutorial we'll learn how to use the Dual List Twitter Bootstrap Bootdey snippet in Asp.Net MVC. Twitter Bootstrap includes very useful snippets, becoming the more widely used and more popular CSS3 framework,  turning front-end web design very fast and easy.
Bootdey creates very useful and reusable FREE CSS snippets, and you can browse to Bootdey's web site to find many others components for use.
Have you already installed the Bootstrap in your MVC app? If you don't, see  in this tutorial how to install it in a few minutes.

We'll build a responsive web page using the Dual List  Bootdey snippet built on the Twitter Bootstrap   with no effort at all:

To get that results, we just create an Action method and a View:

Then go to the Bootdey web site:

The Dual List Snippet

Search for the Dual List Snippet:

And copy the HTML markup .
And paste it inside the View or in a HTML file.

Now copy the CSS and paste it in a new .css file:

Next, copy the javascript code and paste it in some .js file:

Then make sure you set references to all needed files:

That's all you need to get this nice screen:

Then select some items :

And click the arrow to send them to the other list:

Do the same on the other list:

And send them to the first one:

Now, to get the selected values, insert at the js file the following javascript code:

$("#btn-show").bind("click", function () {    $("div[id*=selected] ul").empty();    $("#list1 a").each(function (index, element) {        if(index == 0) return;        var val = $(this).text();                var item = $("<li>").html(val);        $("div[id*=selected] ul").append(item);    });});

And at the HTML file :

<button id="btn-show" class="btn btn-success">See Values</button>        <div id="div-selected"><h4>Selected values at List 1 :</h4>            <ul></ul>        </div>

Then you get the values at List 1. Do the same for List 2 :

That's all!!  In this tutorial we've learned how to use the Dual List Twitter Bootstrap Bootdey snippet in Asp.Net MVC in 5 minutes.

Happy programming.....

כתב: כרמל שוורצמן