Category >
ASP.NET
|| Published on :
Monday, November 30, 2015 || Views:
15527
||
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