I wanted to implement Bootstrap dropdown button in asp.net button
Here is Bootstrap Button
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Here i implement upto button but i don't know how to do the dropdown part
<asp:Button ID="btnMore" class="btn btn-danger dropdown-toggle"
data-toggle="dropdown" runat="server" Text="SMS" />
You can see this button in bootstrap Click Here
Two points you need to change.
The button action that make the post back and call your function on code behind and the link on the menu to do the same.
You only need to add the correct CssClass on the asp.net button for the first.
For the menu links you can use the LinkButton asp.net control with out any other settings (css style I mean)
And here is a working tested example:
<!-- Split button -->
<div class="btn-group">
<!-- here is the asp.net button to make post back -->
<asp:Button ID="Button1" runat="server" Text="Action" CssClass="btn btn-danger" />
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<!-- here is the asp.net link button to make post back -->
<li><asp:LinkButton ID="LinkButton1" runat="server">Action</asp:LinkButton></li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
The second button that opens the menu is not need to be asp.net control, is just opens the menu, is not call any code behind function. So you left it as is.
Related
I am very new to both Bootstrap and AngularJS. I've been researching this problem for a while now, and I can't find what's wrong. The dropdown appears, and you can click on it, but nothing happens when you click on the arrow for the drop down.
Here's the code I've been working with:
<div class="form-group">
<div class="dropdown" style="position: absolute; left: 60px; top: 115px;">
<button class=" btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="true" aria-expanded="true">
Select an Office
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="office in ctrl.offices"><a ng- click="moveMap(office.latitude, office.longitude)">{{office.name}}</a></li>
</ul>
I found an example like this at this site: http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/29/how-to-work-with-the-bootstrap-dropdown-in-angularjs.aspx
Any help would be appreciated.
I made a plunker with your code, everything seems to be setup right. I'd double check to make sure you're including jquery and bootstrap's javascripts. Other than that, I'd actually suggest using Angular UI's bootstrap directives. It makes things a whole lot easier.
Stack Overflow made me post code because I have a plunker link... it's weird.
<div class="form-group">
<div class="dropdown" style="position: absolute; left: 60px; top: 115px;">
<button class=" btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="true" aria-expanded="true">
Select an Office
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="office in offices"><a ng-click="moveMap(office.latitude, office.longitude)">{{office.name}}</a></li>
</ul>
</div>
</div>
One way is to use ng-model instead of ng-repeat if that is an acceptable solution for you. Something like this:
<select class="dropdown fullWidth" ng-model="ctrl.offices">
<option value="offices.Name"></option>
</select>
I use a shared view composed of some buttons that are common throughout my app views. I use jquery to detect the button click using a class and not the id, since there may be more than one instance of the view. The script checks who is the parent form and everything works as expected.
There are times however, when it is necessary to change the caption of one or more buttons, or make one of them visible or not. I've an idea about how to it in jquery, but I was wondering if there is anyway to do it directly in the razor view.
// Shared View "CommonBtnsGridTab"
<button type="button" id="" class="btn btn-info btn-xs commonbtns-find"><span class="glyphicon glyphicon-search"></span> Find</button>
<button type="button" id="" class="btn btn-info btn-xs commonbtns-all"><span class="glyphicon glyphicon-list"></span> All</button>
<button type="button" id="" class="btn btn-info btn-xs commonbtns-view"><span class="glyphicon glyphicon-tasks"></span> View</button>
<button type="button" id="" class="btn btn-info btn-xs commonbtns-new"><span class="glyphicon glyphicon-plus"></span> New</button>
/ / Razor view
<div class="tab-pane" id="tabUnits">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="unitTab">
#Html.Partial("CommonBtnsGridTab")
If you want to do it in the Razor view, the conditions that you want to act upon needs to be provided in the PartialView's Model ...So you use the passed in Model's property to construct the elements on the PartialView.
I have a dropdown from boostrap such as this:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<i class="fa fa-bell-o"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
</ul>
</div>
I'd like to add list items to this boostrap dropdown menu from my C# code behind. I'm adding items through a String foreach Loop. How do I access the dropdown id, since its not displayed in the code behind because it requires ASP controls?
You will need a repeater.
Repeater1.DataSource = yourdatasource
Repeater1.Databind()
<asp:Repeater id="Repeater1" runat="server">
<HeaderTemplate><Ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"></HeaderTemplate>
<ItemTemplate>
<li role="presentation">
<a role="menuitem" href="#"> <%# Eval("yourfieldfromcodebhind here") %> </a>
</li>
</ItemTemplate>
</asp:Repeater>
Could anyone give me an idee on how could I generate dynamically this piece od code:
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" runat="server">
<span class="caret"></span></button>
<ul class="dropdown-menu" id="testingPurposes">
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 1</span>
<asp:Image ID="Image1" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 2 </span>
<asp:Image ID="Image2" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
</ul>
</div>
The main idea of this code is to have some kind of dropdown list looking control that would have a span with text, and an image on each row.
This is basicly how my control shoud look when it's clicked:
Text1 img1
Text2 img2
If a user clicks TextN i get an event for that click, and i can update the page based on selected item.
If a user clicks imgN then TextN and imgN would disappear from the list.
I am trying to implement a dropDownList which, on each row to contain two controls: a Label and a Button, but my problem is that I have no clue how to do that.
Searching on google gave me no usefull results, so I don't know from where to start, or perhaps I don't know what to search. This dropDownList should work as a standard one if user clicks on the label, or rise a different event if the button is clicked.
I know this in not the standard type of question here, but if anyone could help me would be greatly appreciated.
Dropdownlist is simply a list. then Why you need Button and label in Dropdownlist ?
The DropDownList is a control. So it is not possible to add buttons and label in dropdownlist
If you need to do some activities when dropdownvalue changed then you can use OnSelectedIndexChanged . You can use it like buttonclick event
If button and Label are necessary for you then add them in a different way Use frames, or in OnSelectedIndexChanged event create your buttons and labels
Try this if you are looking for double options related to dropdownlist then try something like below
css
ul.dropdown-menu li{
width: 500px;
}
ul.dropdown-menu li a.text-left{
float: left;
width: 49%;
}
ul.dropdown-menu li a.text-right{
float: right;
width: 50%;
}
html
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg">big button</button>
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<div>
<a href="#" class="text-left">
full name must align to left
</a>
<a href="#" class="text-right">
short name - align to right
</a>
</div>
</li>
<li>
<div>
left
right
</div>
</li>
<li>
<div>
left
right
</div>
</li>
<li>
<div>
<a href="#" class="text-left">
full name must align to left
</a>
<a href="#" class="text-right">
short name - align to right
</a>
</div>
</li>
</ul>
</div>