I have a dropdown defined within a nav-bar (http://getbootstrap.com/components/#nav-dropdowns) and I want to, when I click on the dropdown a function on server side to be executed.
My dropdown:
<li role="presentation" class="dropdown">
<a href="../#" id="notS" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<span class="glyphicon glyphicon-bell" aria-hidden="true"><span id="not" class="badge">3</span></span>
</a>
<ul id="notificacoes" class="dropdown-menu" role="menu">
<li role="presentation">
<a runat="server" onserverclick="setVisivel" role="menuitem" tabindex="-1" href="../Admin/VerRevisoes?id=1144">
As revisões do caso 1144 estão completas
</a>
</li>
<li role="presentation">
<a runat="server" onserverclick="setVisivel" role="menuitem" tabindex="-1" href="../Admin/VerRevisao?id=7">
Foi adicionada uma nova revisão ao caso 1144
</a>
</li>
<li role="presentation">
<a runat="server" onserverclick="setVisivel" role="menuitem" tabindex="-1" href="../Admin/Casos">
O caso 1145 foi adicionado pelo utilizador 1
</a>
</li>
</ul>
</li>
And my funtion setVisivel it C# and it's on server side:
protected void setVisivel(object sender, EventArgs e)
{
DBConFactory.getInstance().setVisibleNotificacao(int.Parse(Context.User.Identity.GetUserName()));
}
But when I click the dropdown, the function setVisivel is not called!
Make sure that you have set the property of ASP.NET DropDown control: AutoPostBack="True" (like explained in MSDN online:
https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listcontrol.autopostback%28v=vs.110%29.aspx )
Working example, the DropDownList is declared as:
<asp:DropDownList ID="cmbSelectChannel" runat="server" AutoPostBack="true"/>
Hope this may help. Best regards,
in my opinion; try to integrate two different technologies .NET and bootstrap in a way others have tried before.
try to read this:
http://techbrij.com/responsive-menu-twitter-bootstrap-asp-net
then modify your bootstrap CSS and make it look like what your dropdown looks like now.
Related
I'm having a hard time to make <li> class to active when page is loaded. Here's my scenario I copied a sample Dropdown in a certain website to integrate it in my website. I'm using C# Asp.Net
_Layout.cshtml
<body>
<div id="header">
#Html.Partial("_HeaderPartial")
</div>
<!--SIDEBAR Navigation-->
<aside id="menu">
// The Dropdown
#Html.Partial("_SidebarPartial")
</aside>
<div id="wrapper">
#RenderBody()
<footer class="footer">
#Html.Partial("_FooterPartial")
</footer>
</div>
<div id="right-sidebar" class="animated fadeInRight">
#Html.Partial("_RightSidebarPartial")
</div>
</body>
_SidebarPartial
<ul class="nav" id="side-menu">
<li>
<span class="nav-label">Dashboard</span>
</li>
<li>
<span class="nav-label">Analytics</span>
</li>
<li>
<span class="nav-label">Interface</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Panels design</li>
<li>Typography</li>
<li>Colors & Buttons</li>
<li>Components</li>
<li>Alerts</li>
<li>Modals</li>
</ul>
</li>
<li>
<span class="nav-label">App views</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Contacts</li>
<li>Projects</li>
<li>Project detail</li>
<li>App plans</li>
<li>Social board</li>
</ul>
</li>
<li>
<span class="nav-label">Charts</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>ChartJs</li>
<li>Flot charts</li>
<li>Inline graphs</li>
</ul>
</li>
<li>
<span class="nav-label">Box transitions</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li><span class="label label-success pull-right">Start</span> Overview </li>
<li>Columns from up</li>
</ul>
</li>
</ul>
As I commented, here is a small example with an id attribute on the list:
<ul class="nav" id="side-menu">
<li id="interfaces">
<span class="nav-label">Interface</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Panels design</li>
<li>Typography</li>
<li>Colors & Buttons</li>
<li>Components</li>
<li>Alerts</li>
<li>Modals</li>
</ul>
</li>
</ul>
And then you could add the following line to the document.ready function:
$("#interfaces").attr("class", "active");
Check this out. This will also help you
just write the following code inside document.ready function
$('#interfaces').addClass('active');
Cheers
Can someone help me out. Really desperate to make it work. Here is my full master page code:
<!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>IslandGas</title>
<link href="/css/bootstrap.css" rel="stylesheet" />
<link href="/css/font-awesome.min.css" rel="stylesheet" />
<script src ="/js/bootstrap.js" type = "text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" class="form-horizontal">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="AdminUpdatePanel" runat="server">
<ContentTemplate>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a id="home" href="~/Admin/dash.aspx" runat="server" class="navbar-brand">Island Gas Admin</a>
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="products" href="#"><i class="fa fa-fw fa-wrench"></i>Products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A1" href="ViewProducts.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Products</a></li>
<li><a id="A2" href="AddNewProduct.aspx" runat="server"><i class="fa fa-fw fa-edit"></i>Add a Product</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="suppliers" href="#"><i class="fa fa-fw fa-wrench"></i>Category <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A29" href="ViewCategory.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Product Categories</a></li>
<li><a id="A6" href="AddCategory.aspx" runat="server"><i class="fa fa-fw fa-edit"></i>Add Product Category</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="orders" href="#"><i class="fa fa-fw fa-table"></i>Customer Orders <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A10" href="CustomerOrder.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Orders</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="reports" href="#"><i class="fa fa-fw fa-table"></i>Income Reports <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A17" href="IncomeReports.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Report</a></li>
<li><a id="A3" href="ReportCustomerTrack.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Customer Track Report</a></li>
<li><a id="A7" href="ReportProducts.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Products Report</a></li>
<li><a id="A9" href="ReportRegisteredCustomers.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Registered Customer</a></li>
<li><a id="A4" href="ReportsGR.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Return Goods Requests</a></li>
</ul>
</li><li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="A5" href="#"><i class="fa fa-fw fa-table"></i>Audit Trail <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="A8" href="AuditTrail.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Audit Trail</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li id="user" runat="server" class="dropdown" visible="true">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<asp:Literal ID="ltUser" runat="server" Text="Administrator" /> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="divider"></li>
<asp:linkbutton ID="linkLogout" runat="server" onclick="link_Logout_Click" CausesValidation="False" >[Log Out]</asp:linkbutton>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="clearfix">
<div class="page-header">
<div class="row">
<div class="col-lg-12">
<h1><asp:ContentPlaceHolder ID="title" runat="server" /></h1>
</div>
</div>
</div>
<div class="row">
<asp:ContentPlaceHolder ID="content" runat="server" />
</div>
</div>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Made by Duhaylungsod, Paolo</p>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/jquery-1.11.3.min.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/bootstrap.min.js") %>'></script>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
i am trying to make datepicker work. i have found a good code and it works perfectly fine in pages w/o a master page, update panel, script manager etc.
head code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
content:
$(document).ready(function () {
$('[id$=txtExpiry]').datepicker({ showAnim: 'slideDown' });
});
textbox:
<div class ="form-group">
<label class ="control-label col-lg-4"> Expiry Date</label>
<div class = "col-lg-8">
<asp:TextBox ID="txtExpiry" runat="server" class="form-control"></asp:TextBox>
</div>
really really desperate to make this work. help me out please
<asp:TextBox ID="datepicker" runat="server" class="form-control">
When server control with ID datepicker will be rendered in html the result html element will automatically generated id which contains prefixes based on parent server controls from master page, i.e
id="ctl100_main_datepicker"
$( "#datepicker" ).datepicker();
The jquery selector searches html element with ID equals to "datepicker".
You can use element css class as a selector:
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
<asp:TextBox ID="datepicker" runat="server" class="datepicker form-control"></asp:TextBox>
Try changing this line
<asp:TextBox ID="datepicker" runat="server" class="form-control"></asp:TextBox>
to this
<asp:TextBox ID="datepicker" runat="server" class="datepicker, form-control"></asp:TextBox>
Note the extra class called "Datepicker" in addition to 'form-control'. This should allow jquery to find the form element and apply a datepicker to it
Try this :
If you don't want to use a css selector and keep selecting by id, try this :
$('#<%= datepicker.ClientID %>').datepicker();
This way you will have the id generated by ASP.NET.
MasterPage gives another id for controls. See this reference http://www.asp.net/web-forms/overview/older-versions-getting-started/master-pages/control-id-naming-in-content-pages-cs
When you are using a master page, to avoid same id in a page, asp.net itself change the textbox id, actually it adds the name of placeholder to the id of your control.
For Example:
TextBox with "txtExpiry" id, in a placeholder with "content" id, become: "content_txtExpiry" when it rendered.
so may javascripts and jquery codes can not find the input!
and the solution is defining the datepicker not using the class or old id, using the final rendered names as "content_txtExpiry" so change your code as:
$('[id$=content_txtExpiry]').datepicker({ showAnim: 'slideDown' });
I try to automate a Task "Navigating on a Website" with WatiN.
Now, I have the following problem:
The website shows this:
There I have to simulate a click on "Einstellungen". When I look at the Sourcecode it looks like:
<div class="ui-widget ui-opt-outer-nav ui-widget-content ui-corner-all nav_nav_panel">
<div class="ui-widget ui-opt-inner-nav ui-widget-content ui-corner-all">
<div id="NAV" class="nav_nav nav_pointer">
<ul>
<li id="jBtnMENUShipmentList" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0120">Sendungsübersicht</label></span></span></li>
<li id="jBtnMENUCreateShipment" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0130">Sendung erstellen</label></span></span></li>
<li id="jBtnMENUAddressBook" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0140">Adressbuch</label></span></span></li>
<li id="jBtnMENUEndOfDayManifest" data-opt-load-type="menu">
<span class="select-buttons" data-opt-title="">
<span><label data-opt-label-key="V7GMGLMBTN0150">Tagesabschluss</label></span>
</span>
</li>
<li id="jBtnMENUPickup" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0160">Abholung</label></span></span></li>
<li id="jBtnMENURateEnquiry" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0170">Preisauskunft</label></span></span></li>
<li id="jBtnMENUExpertFunctions" data-opt-load-type="link"><span><span><label data-opt-label-key="V7GMGLMBTN0180">Einstellungen</label></span></span></li>
</ul>
</div>
</div>
</div>
But I have no idea, how I can now with WatiN simulate the click on "Einstellungen".
I have tried:
browser.Link(Find.ByName("jBtnMENUExpertFunctions")).Click();
but with no success.
Comment from jessehouwing is the solution:
The Browser.Link method will search for a Link element, but the element in the DOM you need to click is a Label, so you should probably use:
Browser.Label(Find.ByText("Einstellungen").Click()
I am new to the ASP environment and I am building an application using Visual Studio 2013 with Bootstrap V.3.0.0.
I have this for the Site.Master:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/"><span class="glyphicon glyphicon-home"></span>Home</a></li>
<li><a runat="server" href="~/ProducersList"><span class="glyphicon glyphicon-user"></span>Producers</a></li>
<li><a runat="server" href="~/BeatsList"><span class="glyphicon glyphicon-music"></span>Beats</a></li>
<li><a runat="server" href="~/License"><span class="glyphicon glyphicon-file"></span>License</a></li>
<li><a runat="server" href="~/About"><span class="glyphicon glyphicon-info-sign"></span>About</a></li>
<li><a runat="server" href="~/Contact"><span class="glyphicon glyphicon-pencil"></span>Contact</a></li>
<li><a runat="server" href="~/ShoppingCart" id="cartCount"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
</ul>
Code behind Site.Master for Cart::
protected void Page_PreRender(object sender, EventArgs e)
{
using (ShoppingCartActions usersShoppingCart = new ShoppingCartActions())
{
string cartStr = string.Format("Cart ({0})", usersShoppingCart.GetCount());
cartCount.InnerText = cartStr;
}
}
All the glyphicons show except the last one, glyphicon-shopping-cart. What do I change to get it to show?
Your icon disappears because you are replacing the whole content of your cartCount hyperlink with the item count: MSDN tells that
Assigning a value to InnerText will destroy any child elements that
belong to the element.
So your <span class="glyphicon glyphicon-shopping-cart"></span> doesn't survive the InnerText assignation. What you could rather do is to place the cart count inside your wrapping hyperlink:
<li>
<a href="~/ShoppingCart">
<span class="glyphicon glyphicon-shopping-cart"></span>
<span id="cartCount" runat="server" />
</a>
</li>
and change the code to assign the computed string to the Text property of the cartCount span, this should work.
If having a span inside your link is not desirable, you can use a LiteralControl to keep the result as raw text
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="Tab0" aria-labelledby="ui-id-1" aria-selected="true">
<a href="#Tab0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">
<span class="titlecase">jones,mike dr</span>
</a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="Tab1" aria-labelledby="ui-id-2" aria-selected="false">
<a href="#Tab1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">
<span class="titlecase">asdf,asdfasd mrs</span>
</a>
</li>
I have a function that will change the tab on the index its on, but for some reason it automatically gets -1 for the second so my onclick="javascript:ChangeTabLocation('1');" never hits the second tab.
Any ideas where in the code it automatically assigns a -1 to that?