Hi Waghmare,
Please refer below sample.
HTML
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Bootstrap-4-Dropdown-Select-Plugin-jQuery/dist/css/bootstrap-select.css" />
<script type="text/javascript" src="https://www.jqueryscript.net/demo/Bootstrap-4-Dropdown-Select-Plugin-jQuery/dist/js/bootstrap-select.js"></script>
</asp:Content>
<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
<asp:ScriptManager ID="Manager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="upPanelMain" runat="server">
<ContentTemplate>
<div class="form-horizontal ">
<div class="form-group">
<asp:Label ID="lblCountry" runat="server" CssClass="control-label col-lg-offset-1 col-md-offset-1 col-lg-2 col-md-2"
Text="Country Name" />
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
<asp:DropDownList ID="drpCountry" runat="server" class="selectpicker" OnSelectedIndexChanged="drpCountry_SelectedIndexChanged"
AutoPostBack="true" data-live-search="true">
</asp:DropDownList>
</div>
</div>
<asp:Label ID="lblCity" runat="server" CssClass="control-label col-lg-2 col-md-2"
Text="Country Name" />
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
<asp:TextBox ID="txtCity" runat="server" MaxLength="150" placeholder="City Name"
AutoPostBack="true" OnTextChanged="txtCity_TextChanged" CssClass="form-control"
Style="text-transform: uppercase">
</asp:TextBox>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-lg-offset-2 col-md-2 col-lg-2 " style="margin-bottom: 12px"
runat="server" id="divSave">
<asp:LinkButton ID="btnSave" runat="server" CssClass="btn btn-success btn-block btn-md"
OnClick="btnSave_Click" ValidationGroup="First"><span class="fa fa-download"></span> Save</asp:LinkButton>
</div>
<div class="col-md-2 col-lg-2 " style="margin-bottom: 12px" runat="server" id="divUpdate">
<asp:LinkButton ID="btnUpdate" runat="server" CssClass="btn btn-warning btn-block btn-md"
OnClick="btnUpdate_Click" ValidationGroup="First"><span class="fa fa-pencil"></span> Update</asp:LinkButton>
</div>
<div class="col-md-2 col-lg-2 " style="margin-bottom: 12px" runat="server" id="divDelete">
<asp:LinkButton ID="btnDelete" runat="server" CssClass="btn btn-danger btn-block btn-md"
OnClick="btnDelete_Click" ValidationGroup="First"><span class="fa fa-bitbucket"></span> Delete</asp:LinkButton>
</div>
<div class="col-md-2 col-lg-2 ">
<asp:LinkButton ID="btnClear" runat="server" CssClass="btn btn-default btn-block btn-md"
OnClick="btnClear_Click"><span class="fa fa-repeat"></span> Clear</asp:LinkButton>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
ApplySelectPicker();
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
ApplySelectPicker();
}
});
};
function ApplySelectPicker() {
$('[id*=drpCountry]').selectpicker({
style: 'btn-info',
size: 5
});
};
</script>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Namespaces
C#
using System.Data;
VB.Net
Imports System.Data
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindCountry();
}
}
private void BindCountry()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("ID"), new DataColumn("Name") });
dt.Rows.Add("1", "India");
dt.Rows.Add("2", "Sri Lanka");
dt.Rows.Add("3", "Pakistan");
dt.Rows.Add("4", "Bangladesh");
dt.Rows.Add("5", "Australia");
dt.Rows.Add("6", "South Africa");
dt.Rows.Add("7", "West Africa");
dt.Rows.Add("8", "Newzeland");
dt.Rows.Add("9", "West Indies");
dt.Rows.Add("10", "England");
drpCountry.DataSource = dt;
drpCountry.DataTextField = "Name";
drpCountry.DataValueField = "ID";
drpCountry.DataBind();
}
protected void btnSave_Click(object sender, EventArgs e)
{
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
}
protected void btnDelete_Click(object sender, EventArgs e)
{
}
protected void btnClear_Click(object sender, EventArgs e)
{
}
protected void drpCountry_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void txtCity_TextChanged(object sender, EventArgs e)
{
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindCountry()
End If
End Sub
Private Sub BindCountry()
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn(1) {New DataColumn("ID"), New DataColumn("Name")})
dt.Rows.Add("1", "India")
dt.Rows.Add("2", "Sri Lanka")
dt.Rows.Add("3", "Pakistan")
dt.Rows.Add("4", "Bangladesh")
dt.Rows.Add("5", "Australia")
dt.Rows.Add("6", "South Africa")
dt.Rows.Add("7", "West Africa")
dt.Rows.Add("8", "Newzeland")
dt.Rows.Add("9", "West Indies")
dt.Rows.Add("10", "England")
drpCountry.DataSource = dt
drpCountry.DataTextField = "Name"
drpCountry.DataValueField = "ID"
drpCountry.DataBind()
End Sub
Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btnDelete_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btnClear_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub drpCountry_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub txtCity_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Screenshot
