Razor view engine automatically applying quotes? - asp.net

I'm fairly used to razor now, but I can't understand why the following syntax is correct?
<li #(active ? "class=active" : "")>
#Html.ActionLink(item.Text, item.TargetAction, Model.Controller)
</li>
As you can see I'm conditionally applying a class (and I've written it this way so the class tag is not generated if the bool active == false).
What I can't understand is why this then generates the correct quotes to give:
<li class="active">Home</li>
Home
</li>
Somehow it is magically sorting out the quoting, but I can't find any reference in the articles on razor to suggest this is expected, so I'm wondering if it is relying on broken behaviour. If I add single or double quotes into the string around the word 'active', as you would expect to if cranking out html, I end up with:
<li class="'active'">
Home
</li>
or
<li class="active">
Home
</li>
Why does it work this way, and is my code correct (as opposed to simply functioning)?

Just come across this so thought would answer - SLaks looks right with Html.Raw, but the OP is also correct in that the second method doesn't look to work - the "s get encoded.
My solution was:
<li#(active ? Html.Raw(" class=\"active\"") : null)>

Razor automatically HTML-escapes all code output.
You can prevent this by writing #Html.Raw(...)
Alternatively, you can put the quotes in the literal text:
<li class="#(active ? "active" : "")>
Your example works because you don't actually have any quotes.
The generated HTML source reads <li class=active>.

Just came across this bizarre behavior as well. Logically the following should work.
#(Model.IsTablet ? "data-options='is_hover: false'" : "")
but is rendered as
data-options="'is_hover:" false'=""
As Dan states this works correctly
#(Model.IsTablet ? "data-options=is_hover:false" : "")
rendering as the first example should.
data-options="is_hover:false"
but if you add a space in the attribute it breaks whatever weird stuff asp.net 4.0 is doing and it thinks your attribute ends at the space.
And this does not constitute html escaping as what is valid html syntax doesn't work and the whole point of razor is that the razor syntax should work with valid html not break it.

Related

How to locate a button defined within a list?

I am writing a selenium script that automates a web-page. I need to click on a button which is defined within a list.
This is the image of my web UI - New Account is the button I am referring to
This is my XML code :
<div id="00B4E000000LQ2C_topNav" class="topNav primaryPalette">
<div id="00B4E000000LQ2C_subNav" class="subNav">
<div class="linkBar brandSecondaryBrd">
<div id="00B4E000000LQ2C_listButtons" class="listButtons">
<ul class="piped">
<li>
<input class="btn" type="button" title="New Account" onclick="navigateToUrl('/setup/ui/recordtypeselect.jsp?ent=Account&ekp=001&retURL=%2F001%3Ffcf%3D00B4E000000LQ2C%26isdtp%3Dnv%26nonce%3Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%26sfdcIFrameOrigin%3Dhttps%253A%252F%252Fcs83.salesforce.com&save_new_url=%2F001%2Fe%3FretURL%3D%252F001%253Ffcf%253D00B4E000000LQ2C%2526isdtp%253Dnv%2526nonce%253Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%2526sfdcIFrameOrigin%253Dhttps%25253A%25252F%25252Fcs83.salesforce.com&isdtp=vw','LIST_VIEW','new');" name="new" value="New Account"/>
</li>
<li class="lastItem">
</ul>
I used:
driver.findElement(By.xpath(".//*[#id='00B4E000000LQ2C_listButtons']/ul/li[1]/input")).click();
(Xpath was given by the firebug) but it gives me an error stating
unable to locate elements
Please help me script / locate this button.
You don't have to use XPaths generated by the Firebug and check the element's parents along the way. We can do better, you can write a more reliable and a simpler way to locate the element:
driver.findElement(By.name("new"));
or:
driver.findElement(By.cssSelector("input[name=new]"));
or:
driver.findElement(By.cssSelector("input[value='New Account']"));
Note that the XPath expression you have looks valid. You may be experiencing a timing issue and would need to wait for the element presence, visibility or clickability, see: How to wait until an element is present in Selenium?.
And, if the button is inside the iframe, you need to switch to its context and only then search the button:
driver.switchTo().frame("ext-comp-1005");
Hi please try like below
// first way
driver.findElement(By.xpath("//*[#name='new']")).click();
// second way
driver.findElement(By.xpath("//*[#class='btn']")).click();
// basically you can use various attributes of input tag with button inside the xpath to click
Update working with i frame
// A short way to identify how many iframe's are present on a web page
List<WebElement> numberOfFrames= driver.findElements(By.tagName("iframe"));
System.out.println("Total Number of iframes present are : " +numberOfFrames.size());
for(int i=0;i<numberOfFrames.size();i++){
// here u can identify iframes with any of its attribute vale say name,title or which is most suitable.
System.out.println("Name of the i-frames : " + numberOfFrames.get(i).getAttribute("name"));
}
// Back to your question - button lies inside iframe hence
// key here is before clicking you have to switch to the frame first
driver.switchTo().frame(driver.findElement(By.name("frame name")));
hope this helps you

Umbraco multi-color menu tabs

I'm using the Asp.Net CMS Umbraco and would like some help to determine whether or not there is something specific about the Umbraco CMS that might make the task of creating a multi-colored menu bar... different from standard html and css manipulation.
The menu bar code that I'm using is based upon the friendly-ghost theme shipped with Umbraco.
Now the normal method for employing different colours in a menu would be something like
div # menu ul.rMenu li.page-item-(some number) {background-color: # (whatever);}
...
...
<li class "rMenu-expand page-item-(the same number as above)"><a href="(link to whatever site on the menu)">
<span> Wording for the particular tab </span></a></li>
And bingo... the (some-number) tab has the (whatever) colour!
However, Umbraco seems to be using a different set-up that is not entirely compatible with the above strategy. Should I be looking at *umbTextpage id *parentID *nodeType ... or something entirely different that I haven't, as yet, noticed?
I believe that nodeName is being used for the wording of particular tabs... should I take it, then, that nodeType refers to the tabs themselves ???
That's great, thanks. However, the menu is generated dynamically using xslt. Do you think I should I attempt to insert that code (converted to xslt) into the menu generation process...
<xsl:for-each select="$currentPage/ancestor-or-self::* [#level=$level]/* [#isDoc and string(umbracoNaviHide) != '1']">
<li>
<xsl:if test="#id = $currentPage/#id">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:if>
<a class="navigation" href="{umbraco.library:NiceUrl(#id)}">
<span><xsl:value-of select="#nodeName"/></span>
</a>
</li>
... or attempt to use razor code after the fact (i.e. have the menu be created and subsequently cycle through the menu's elements, giving a numerical 'tag' to each node)?
The beauty of Umbraco is that you have complete control of the layout. You can have it build your menu how ever you want.
I don't know whether you are using xslt or razor to generate your menu, but If you're looking trying to get a unique number to append to "page-number-" then use the node's Id, that won't change even if the name of the node is edited.
Using Umbraco 4.7 razor you do something like this:
#{
<ul>
#foreach (var node in Model.AncestorOrSelf().Children.Where("Visible"))
{
<li class="rMenu-expand page-item-#node.Id">
<a href="#node.Url">
<span>#node.Name</span>
</a>
</li>
}
</ul>
}

Dynamically generated HTML in C# to be formatted

I have an ASP.NET web forms site with a rather large menu. The HTML for the menu is dynamically generated via a method in the C# as a string. I.e., what is being returned is something like this:
<ul><li><a href='default.aspx?param=1&anotherparam=2'>LINK</a></li></ul>
Except it is a lot bigger, and the lists are nested up to 4 deep.
This is written to the page via a code block.
However, instead of returning a flat string from the method I would like to return it as formatted HTML, so when rendered it looks like this:
<ul>
<li>
<a href='default.aspx?param=1&anotherparam=2'>LINK</a>
</li>
</ul>
I thought about loading the html into an XmlDocument but it doesn't like the & character found in the query strings (in the href attribute values).
The main reason for doing this is so I can more easily debug the generated HTML during development.
Anyone have any ideas?
Maybe you can work with an HtmlTextWriter? It has Indenting capabilities and it may actually be a cleaner thing as you could write straight into the output stream, which should be more "in the flow" than generating a string in memory etc.
Is there a reason you want to do this? This implicitly minified HTML will perform slightly better anyway. If you do still need to render the HTML for pretty display, you will either need to incorporate indentation into the logic that generates the output HTML or build your content using ASP.NET controls and then call Render().
Try loading the HTML into the HTML Agilty Pack. It is an HTML parser that can deal with HTML fragments (and will be fine with & in URLs).
I am not sure if it can output pretty printed (what you call "formatted") HTML, but that would be my first approach.
I like to use format strings for this sort of thing, your HTML output would be generated with;
String.Format("<ul>{0}\t<li>{0}\t\t<a href='{2}'>{3}</a>{0}\t</li>{0}</ul>",
System.Environment.NewLine,
myHrefVariable,
myLinkText);

css tabs that do not require div changes for the active tab

I'm looking to get ideas on how to not change at all the code used to create css tabs (so that I can place it into an include file to avoid duplicating the code across all files that use it), but my current implementation doesn't allow this because I need to select the active tab using id="selectedTab".
The only implementation I found so far that solves this is the following one:
http://unraveled.com/publications/css_tabs/
It requires assigning a class to each tab and uses the body id to determine the active tab.
Is this the only way or is there any other alternatives?
My current code looks like this (the id=noajax" is used to avoid using ajax to load certain pages):
<div class="productTabsBlock2">
<a id="selectedTab" href="/link1" >OVERVIEW</a>
SCREENSHOTS
<a id="noajax" href="/link3" >SPEED TESTS</a>
<a href="/link4" >AWARDS</a>
</div>
EDIT: asp is available as server side and is already used on these pages.
If you're looking for a non-JS solution, then the body class/id provide the easiest way to do what you want.
If you have access to JS library, you can easily add "selected" class to any of the <a> element and modify its appearance.
Just in case you haven't notice, you can use more than one class definition in an element. For example, <a class="noajax selected" /> is valid and both CSS selectors .noajax and .selected will be applied to the element.
An include file for what? If it's a server side programming language like PHP, you can pass a parameter for the selected tab through various methods.
you could use jQuery to add the `selectedTab' id (or class) like so
$('.productTabsBlock2 a').mouseover(function () {
$(this).addClass('selectedTab');
});

asp.net MVC action link need to have the registered on the actual word

got this actionlink:
<%= Html.ActionLink("Corian® Worktops", "Index", "Corian")%>
the word corian has to carry the registered symbol or the word can not be used, but it seems to process, i know i could just write this as a normal href but it kinda defeats the object if there is another solution.
has any tried and successfully caried something like this out?
thanks
It works normally
<%= Html.ActionLink("RegistededMark®", "Action")%>
Use the normal ® symbol but make sure the font in HTML displays it correctly.
I do not know why but having static text in the views gives me the chills. I would rather suggest that you use a resource provider to fill in your link text. That way you will not be bothered by the html encoding stuff.

Resources