Bootstrap style DropDownList example in ASP.Net

Category > ASP.NET || Published on : Monday, November 30, 2015 || Views: 14387 || Bootstrap style DropDownList example in ASP.Net Bootstrap style DropDownList Bootstrap DropDownList


Introduction

Here Pawan Kumar will explain how to implement Bootstrap style DropDownList in ASP.Net using the jQuery Bootstrap Multi-Select Plugin.

Description

In previous post I have explained SQL Server Execute Stored Procedure from Another Stored Procedure with Parameters, Zoom Feature for Query Text and Results Text in SQL Server Management Studio 2012, How to make How to make blinking/flashing text with CSS3 and jQuery, How to replace number from a string in C#, How to create draw a doughnut chart using ChartJS in Asp.net detailed Example, Code Snippet for Deleting a SQL Server stored procedure, and many more articles.

Now I will explain How to Bootstrap style DropDownList example in ASP.Net

So follow the steps to learn Bootstrap style DropDownList example in ASP.Net

Bootstrap style DropDownList example in ASP.Net

Step 1: First, We start by creating an Empty asp.net web site in Visual Studio .NET 2013.

Step 2: Add a new web page name "Default.aspx" with the following codes:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
        rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=lstCountries]').multiselect({
                includeSelectAllOption: true
            });
        });
    </script>
    <asp:ListBox ID="lstCountries" runat="server" SelectionMode="Multiple">
        <asp:ListItem Text="India" Value="1" />
        <asp:ListItem Text="China" Value="2" />
        <asp:ListItem Text="Kenya" Value="3" />
        <asp:ListItem Text="England" Value="4" />
        <asp:ListItem Text="USA" Value="5" />
    </asp:ListBox>
    <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" />
    </form>
</body>
</html>


Step 3: Add the below codes in code behind of the "Default.aspx" file:-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Submit(object sender, EventArgs e)
    {
        string message = "";
        foreach (ListItem item in lstCountries.Items)
        {
            if (item.Selected)
            {
                message += item.Text + " " + item.Value + "\\n";
            }
        }
        ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);
    }
}

Step 4: Run the application by pressing F5

Step 5: Screenshot will be shown below:-

Conclusion:

So, In this tutorial we have learned, Bootstrap style DropDownList example in ASP.Net

Download Source Codes