I have some trouble with razor sections.
#section tools {
<div class="btn-group"">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Update every <span id="update_time_label" class="label label-info">10 s.</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1 s.</li>
<li>5 s.</li>
<li>10 s.</li>
<li>30 s.</li>
<li>60 s.</li>
<li>120 s.</li>
</ul>
</div>
<button class="btn" onclick="return SelfAction.loadNewItemsNow()">Update now</button>
} <-- Can't detect
As you see in the code, it does not detect the closing bracket. I'm now learning C# and MVC4 and can't find any solution. I don't want to use viewbag for this big HTML block. Maybe there is some specific closing tag for big HTML blocks? Something like #sectionStart and #sectionEnd?
Remove the second " at the end of <div class="btn-group""> and see if that helps. The Razor engine is VERY finicky, and something stupid like that could cause it to continue to look for a string, and since everything else matches up, the closing } would be inside a string.
Related
I have a project in Visual Studios 2017 with this block of code in it. I just went to remake it in on my work computer (running 2015). Is there a reason why the middle two links don't work anymore?
The code doesn't even turn purple in the IDE. The top screenshot is from my laptop, the bottom screenshot is from my work computer (where the trouble is) https://gyazo.com/2968018e89c24748d48cb2291dce50d3?token=e038af6931608caede27c103a0365184
<div class="col-sm-6">
<div class="well well-sm" style="background-color:lightcyan">
<h4>AVAS for Opperations</h4>
<div class="list-group">
AVAS Time-Space Chart <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%">
History by Bus/Run/Operator <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%">
<a asp-area="" asp-controller="Home" asp-action="Legal" class="list-group-item" data-toggle="tooltip" title="(Make a list of stops and timepoints for a bus for an hour)">Bus-Hour History <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%"></a>
<a asp-area="" asp-controller="Home" asp-action="Legal" class="list-group-item" data-toggle="tooltip" title="(Make a list of buses passing a selected stop)">Bus-Stop History <img src="https://cdn1.iconfinder.com/data/icons/education-set-4/512/information-512.png" class="w3-round" alt="Denmark" style="width:3%"></a>
</div>
</div>
</div>
Maybe you are missing Razor Language Services.
Check this question.
Currently in the process of learning MVC and I think it's interfering with HTML code. I have just a basic navigational menu as a list and two <li> items seem to combine into one. Any way to make sure the two are separated when live?
#if ((Request.Url.AbsolutePath.ToString().ToLower() != "/home/index") && (Request.Url.AbsolutePath.ToString() != "/"))
{
<nav data-spy="affix" data-offset-top="500" style="border-radius:0px; left: 0" ng-hide="sideBar" id="nav">
<img src="~/Content/images/open.png" ng-model="sideBar" id="sideBarOpen" style="left:0px; top:0;"/>
<div id="sideBar" style="left: -200px">
<ul>
<li> Home </li>
<li><br /></li>
<li>About Me</li>
#############
<li>Experience</li>
<li>Resume</li>
############ These two seem to be recognized as 1 <li> and not two.
<li>Contact</li>
</ul>
<img src="/Content/images/myPic.jpg" />
</div>
</nav>
<div id="sideBarBack" style="width:0%;">
</div>
}
Youre missing a quotation mark in the id="> part. This is not a valid html so your wen browser tries to workaround that resulting in the two elements combined.
To fix that instead of:
<li>Experience</li>
use a correct tag attribute id="":
<li>Experience</li>
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 have some html code as follows, which was supplied by our graphics developers. the issue is when i import this into asp.net (c#) page i get to see a lot of orphan divs. it feels as if there are not opening divs for several of the closing divs. following is code snippet.
<div class="col-lg-2 col-lg-3 quick-launch">
<div class="thumbnail">
<a href=""> <img src="assets/img/app_images/app_7.jpg" width="115" height="114">
<div class="caption">
<h3>TEST</h3>
</a></div>
</div>
</div>
could someone here please let me know if there is something in visual studio that is causing this?
You're inverting <div> and <a> closing tags. This is valid HTML (but not valid XHTML so you'd better to check your DOCTYPE) but it may confuse Visual Studio editor:
<a href=""> <img src="assets/img/app_images/app_7.jpg" width="115" height="114">
<div class="caption">
<h3>TEST</h3>
</a>
</div>
a
Should be:
<a href=""> <img src="assets/img/app_images/app_7.jpg" width="115" height="114">
<div class="caption">
<h3>TEST</h3>
</div>
</a>
Edit: what's wrong with that? It works because HTML parser doesn't complain about <a><div><a/></div> (if DOCTYPE isnt XHTML) but you should complain about it. Let me explain: parser won't complain because </div> (closing tag) isn't optional then it won't just silently add it. This is theory, in practice browsers handle this in many ways. Some of them silently close <div> when </a> is reached (then </div> will close outer one), some others don't do it (I repeat because it's not an optional closing tag) then </div> will close inner (and right) one. IMO With such unreliable behavior you should ask your developer/graphics designer to fix that code. In general (and with few exceptions like <hr> and <br>) I would write HTML code as it was XHTML.
I have an MVC 3 site. I've created a navigation bar that looks like the following:
<div data-role="navbar">
<ul>
<li>
<a href="#ProfileView" class="ui-btn-active">
<img src='#Href("~/Content/img/Profile.png")' alt="Profile" />
</a>
</li>
.
.
</ul>
</div>
What gets rendered for one of the buttons is:
<a class="ui-btn-active ui-btn ui-btn-up-c" href="#ProfileView" data-theme="c">
<span aria-hidden="true" class="ui-btn-inner">
<span class="ui-btn-text">
<span aria-hidden="true" class="ui-btn-inner">
<span class="ui-btn-text">
<span aria-hidden="true" class="ui-btn-inner">
<span class="ui-btn-text">
<span aria-hidden="true" class="ui-btn-inner">
<span class="ui-btn-text">
<img alt="Profile" src="Content/img/profile.png">
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</a>
I was trying to compare mine to JQuery Mobile's demo site. It looks the same to me, but it's not working... So did I miss something? What typically causes the repetitiveness shown in this example?
Thanks.
Add data-role="none" to elements you don't want to render as a button. Then compare your output and see if you are still getting the extra rendering. Most likely you have an open tag, or are refreshing the listview multiple times.