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
Related
I put by navigation code in update panel using timer but after one minute the active menu disappears and show no active menu on the page but the selected page is still present....
let me share my code..
code for update panel counters
Aspx code:
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>
<nav class="navbar-default navbar-side" role="navigation" style="background-color: #333333; height:100%;">
<div class="sidebar-collapse" style="background-color: #333333; height:100%;">
<ul class="nav" id="main-menu">
<li class="text-center">
<img src="../assets/img/Logo.jpg" class="user-image img-responsive"/> </li>
<li>
<a class="active-menu" id="MDB" href="ManagerDashBoard.aspx"><i class="fa fa-dashboard fa-3x"></i>Manager DashBoard </a>
</li>
<li>
<i class="fa fa-sitemap fa-3x"></i>Messages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a id="MNMF" href="ManagerNewMessageForm.aspx">Create New Message</a>
</li>
<li>
<a id="MI" href="ManagerInbox.aspx?Status=11">Inbox<span class="in-badge"><asp:Label ID="mgInLabel1" runat="server" Text=""></asp:Label></span> </a>
</li>
<li>
<a id="MS" href="ManagerInbox.aspx?Status=22">Send<span ></span> </a>
</li>
</ul>
</li>
<li>
<i class="fa fa-sitemap fa-3x"></i>Suggestion Follow Up<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a id="MP" href="ManagerNewSuggestion.aspx?Status=7">Pending <span class="mr-badge"><asp:Label ID="SMRPLabel1" runat="server" Text=""></asp:Label></span> </a>
</li>
<li>
<a id="MPP" href="ManagerNewSuggestion.aspx?Status=3">Postpone<span class="pp-badge"><asp:Label ID="PPLabel1" runat="server" Text=""></asp:Label></span> </a>
</li>
<li>
<a id="MAR" href="ManagerNewSuggestion.aspx?Status=6">Archived<span class="ar-badge"><asp:Label ID="SARLabel4" runat="server" Text=""></asp:Label></span></a>
</li>
</ul>
</li>
<li>
<i class="fa fa-sitemap fa-3x"></i>Account Setting<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a id="MAC" href="ManagerAccount.aspx">Account Control</a>
</li>
<li>
<a id="MUP" href="ManagerPassword.aspx">Update Password</a>
</li>
</ul>
</li>
</ul>
</div>
<div style="background-color: #333333; height: 400px;">
</div>
</nav>
</ContentTemplate>
C# Code :
public void msgcounter()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["FBMNGTConnectionString"].ConnectionString);
con.Open();
int msgstatusid = 0;
while (msgstatusid < 22)
{
string strquery2 = string.Empty;
strquery2 = "select count(Status) as msgcntstatus from MessageApprovalTable where Status = " + msgstatusid + " and ToEmployee_ID =" + Session["Employee_Id"];
SqlCommand cmd2 = new SqlCommand(strquery2, con);
SqlDataAdapter sda = new SqlDataAdapter(cmd2);
DataSet ds = new DataSet();
sda.Fill(ds);
string mgcount = Convert.ToString(ds.Tables[0].Rows[0]["msgcntstatus"]);
switch (msgstatusid)
{
case 11:
mgInLabel1.Text = Convert.ToString(mgcount);
break;
//case 22:
// mngsndLabel1.Text = Convert.ToString(mgcount);
// break;
//case "2":
// strquery += " where Suggestion_Status = 2";
// break;
default:
break;
}
msgstatusid++;
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
counter();
msgcounter();
}
Kindly add below line to Timer_Tick,
Put ,Menu id : MDB ; Runat="Server"
MDB.attributes.add("class","active-menu");
for all pages You can take href value or Page name For Applying Active class on Menu item
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()
HTML:
<li class="dropdown current-user" dropdown="" on-toggle="toggled(open)">
<a aria-expanded="false" aria-haspopup="true" href="" class="dropdown-toggle" dropdown-toggle="">
<img src="assets/images/avatar-1.jpg"alt="{{user.FirstName}}">
<span class="username">
{{user.FirstName}} <i class="ti-angle-down"> </i> </i>
</span>
</a>
</li>
<ul>
<li>
<a href="Account/LogOff" ng-href="Account/LogOff">
Log Out
</a>
</li>
</ul>
Now in my site, i need to click on link which has another sub links like profile, log out etc. how to find that super link and than click on sublink.
Try this
IJavaScriptExecutor js = driver as IJavaScriptExecutor;
//Scroll the element into view
string title = (string)js.ExecuteScript("return document.getElementsByTagName('a')[1].scrollIntoViewIfNeeded()");
//Now, execute findElement
driver.FindElement(By.XPath("//a[#href='']/following::a"));
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.