In this article, I will show you how to bind dropdown using DDSLICK Jquery Plugin. Create a new Asp.net Project. Go to File Menu and choose New and choose Project. From the New Project Windows, choose Web < Asp.Net Web Application. Specify the name of the project and click to OK.

 

 

It will open a dialog window where you can choose the different type of the project. So, you can choose Web Forms and click to OK.

 

So, Asp.Net project is ready. As we know that here we are going to use “ddstick” jquery plugin to bind the data with dropdown. So, to get this plugin, you just need to download it. So you can go to following link and download it.

https://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.min.js

After downloading it, you just need to place this jquery plugin inside the Scripts folder.

 

I am using some alphabet character images for this demo. So, I have created a folder name with “MyImage” and putted all the images inside it.

 

Now open Default.aspx page and add the references of two scripts file on the page.

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.ddslick.min.js"></script>

 

Now it is time to create the image data for the dropdown, you need to make the following code on the default.aspx page or you can separately use the script file to bind the dropdown. But for this demo I am using the same page for scripting.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DropDownImageDemo._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.ddslick.min.js"></script>
    <script>
        $(function () {
            var ddlAlphabetData = [
                {
                    text:'A',
                    value:1,
                    description:'A for Apple',
                    imageSrc: 'MyImage/A.png'
                },
                {
                    text: 'B',
                    value: 2,
                    description: 'B for Boy',
                    imageSrc: 'MyImage/B.png'
                },
                {
                    text: 'C',
                    value: 3,
                    description: 'C for Cat',
                    imageSrc: 'MyImage/C.png'
                },
                {
                    text: 'D',
                    value: 4,
                    description: 'D for Dog',
                    imageSrc: 'MyImage/D.png'
                },
                {
                    text: 'E',
                    value: 5,
                    description: 'E for Egg',
                    imageSrc: 'MyImage/E.png'
                }
            ];

            $("#ddlAlphabet").ddslick({
                data: ddlAlphabetData,
                width: 400,
                imagePosition:"left"
            });
        });
    </script>
    

    <br />
    <div id="ddlAlphabet"></div>
    <br />
    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
        <p><a href="http://www.asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    </div>



</asp:Content>

Now it is time to run the project. So for running the application, press F5. The program will be executed on specified browser. you can see the following image has a dropdown with selected value as "A".

 

When you click to dropdown, it will open and provide you all the option for selecting. 

You can change the dropdown value, just click to any other value. It will set to dropdown value. As per my demo session I have selected C then it will select "C for Cat".

Conclusion:

So, today you learned how to make dropdown using the DDStick jquery plugin in Asp.Net application.

I hope this post will help you. Please put your feedback using comment which helps me to improve myself for next post. If you have any doubts please ask your doubts or query in the comment section and if you like this post, please share it with your friends. Thanks