I'm trying to dynamically set an attribute(data-status) for a div if a condition is met.
I am currently using the #Html.Raw helper however it's not making its way in to the element.
I have also attempted to use Response.Write() however it just writes everything to the top of the page.
Is there a best way to actually embed this in to the code or maybe create/set a new attribute?
#foreach (var r in Model)
{
<div class="marker"
data-date="#r.date_finished"
data-name="#r.name"
#if (r.complete == "CP")
{
#Html.Raw("data-status='complete'");
}
>
</div>
}
This should do it:
<div class="marker"
data-date="#r.date_finished"
data-name="#r.name"
#{if (r.complete == "CP") { <text>data-status='complete'</text> }}>
Notice the usage of <text> tag. This is a special tag which Razor uses to output content as is.
When I run into this scenario I use a tertiary expression:
<div #(r.complete == "CP" ? "data-status='complete'" : "") >
If your logic is more complex you could also use a static helper method.
<div #r.RenderComplete() >
public static class RExtension{
public static string RenderComplete( this R r){
// logic here
}
}
Related
I have a controller in C# that, among other things, provides HTML for external links.
var htmlLinkBuilder = new StringBuilder($#"
<div>
<span>Dropdown</span>
</div>
<div class='dropdown-menu'>
");
foreach (var instance in thing.instances)
{
htmlLinkBuilder.AppendLine($#"
<a
class='dropdown-item'
href='{_configuration["Identity:Url"]}otherStuff/urlThings'
target='_blank'
rel='noopener noreferrer'
[onClickVar]
>
{instance.Name}
</a>
");
}
htmlLinkBuilder.AppendLine("</div>");
link.HtmlLink = htmlLinkBuilder.ToString();
I'm using dangerouslySetInnerHTML in a react js file which contains a handleNavClickLogging() function.
My question is, can I properly reference the function over each link with some form of
__html: htmlFromAbove.replaceAll("[onClickVar]", { () => handleNavClickLogging('External Link') } )
or how can I reference this function when clicking a dropdown item?
Expected output is an onclick function performed after clicking one of the dropdown items.
I have this code
#if (Model.Name!= null)
{
<div>#Model.Name, <span>#Model.Email</span></div>
}
and I want to highlight the postal code if this condition - IsFlaggedEmail is true:
if (Model.IsFlaggedEmail(out flagComments))
{
<span id="flagged" style="background-color:yellow;font-size:10pt">
}
and I want to display the comments in the title of the span (a tool tip). How can I write this in the cshtml file?
This is what I tried, but I keep getting errors like: "The if block is missing a closing "}" character. Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup."
#if (Model.Name!= null)
{
<div>#Model.Name, #{
string flagComments;
if (Model.IsFlaggedEmail(out flagComments))
{
<span id="flagged" style="background-color:yellow;font-size:10pt">
}
} #Model.Email</span></div>
}
#{ string comments;
if (Model.IsFlaggedEmail(out comments)) {
#section Scripts {
$("#flagged").val('title', comments)
}
}}
Also, can I do something like that directly from jQuery?:
#if (Model.Name!= null)
{
<div>#Model.Name, <span id="flagged">#Model.Email</span></div>
}
#{ string flagComments;
if (Model.IsFlaggedEmail(out flagComments)) {
#section Scripts {
$('#flagged').css('background-collor', 'yellow')
$('#flagged').attr('title', #flagComments);
}
}}
No javascript needed.
You can use something like:
#if (Model.Name != null)
{
string flagComments;
bool isFlagged = Model.IsFlaggedEmail(out flagComments);
<div>
#Model.Name, <span id="#Html.Raw(isFlagged? "flagged": "")">#Model.Email</span>
</div>
And for styling it is better to use CSS. (You have an ID flagged).
Also try to avoid spreading html building across if statements. It is always better to keep tags matching inside one clause.
I have this helper:
public class PanelSection : IDisposable
{
protected HtmlHelper _helper;
private string f;
public PanelSection(HtmlHelper helper, string title, string subTitle, bool footer)
{
_helper = helper;
f = footer ? "" : "</div>"; //If footer is true, we end body ourselves, if footer is false, we end both - body and panel automatically
_helper.ViewContext.Writer.Write(
"<div class='panel panel-default'><div class='panel-heading'><h2>" + title + "</h2></div><div class='panel-body'>"
);
if (!string.IsNullOrEmpty(subTitle))
_helper.ViewContext.Writer.Write(
"<h4>" + subTitle + "</h4><hr/>"
);
}
public void Dispose()
{
_helper.ViewContext.Writer.Write("</div>" + f);
}
}
If footer is set to True, that means I will end panel-body myself, so on dispose it writes one less div. This should let me have panel-footer when I need it, or have table outside of body. But on when I do this I get
Parser Error Message: Encountered end tag "div" with no matching start tag.
My razor code looks like this:
using (Html.BeginPanel(#Resources.Contract, #Resources.CreateNew, true))
{ //starts panel, starts panel body
<b>Body content</b>
</div> //end of body
<div class="panel-footer">
#Resources.Back
</div>
} //end of panel
Obvious solution would be to simply not open panel body on that helper, and for panel body use different helper. But I'm still interested why it gives me that error. It should generate good html without any errors, but it looks like it process everything before changing helper into html, sees an extra div and throws parse error. Why is that? Is there any way to make this work?
Unbalanced razor tags can be output using the #: syntax.
Providing everything else compiles you can output the razor as follows:
using (Html.BeginPanel(#Resources.Contract, #Resources.CreateNew, true))
{
//starts panel, starts panel body
<b>Body content</b>
#:</div> //end of body
<div class="panel-footer">
#Resources.Back
</div>
} //end of panel
Note the #:</div>.
Using Selenium / C#
I have an automated test case where a user logs in (jonpark2), once the user has done so their username is stored in the text of a span class, I need to select this element and then verify an assert on it.
I have the below to try and select this:
public static void Userloggedin()
{
var userlogedin = Driver.Instance.FindElement(By.ClassName("username"));
var selectelement = new SelectElement(userlogedin);
selectelement.SelectByText("JonPark2");
}
When I run this i encounter the error OpenQa.Selenium.Support.UI.unexpectedTagNameException:Element should have been select but was div.
The below html shows in more detail what I am trying to select:
<div class="content-wrapper">
<div class="float-left">
<div class="float-right">
<section id="login">
<p>
<a title="Manage your account" class="username" href="Account/Manage">
Text - Empty Text Node
<span class="username">
Text - JonPark2
Can anyone point out where I have gone wrong ?
You are trying to select something that is not part of a <select>.
try this:
public static void Userloggedin()
{
return (
"JonPark2" == Driver.Instance.FindElement(By.cssSelector("section#login span.username")).Text;
)
}
You can select that element by XPath:
var spanElement = Driver.Instance.FindElement(By.XPath("//span[contains(#class, 'username')]"));
And then take text:
var textInSpan = spanElement.Text
Ive got a mega annoying problem I have a view with:
#{
if(ViewBag.Section == "Home")
{
<div id="headerfrontPage">
}
else
{
<div id="header">
}
}
And I get a compilation error:
The code block is missing a closing "}" character. Make sure you have
a matching "}" character for all the "{" characters within this block,
and that none of the "}" characters are being interpreted as markup.
How do I conditionally write a div? Its for a hack bascially...
You can use the same construct when you wrap your div's inside element like:
#if (ViewBag.Section == "Home")
{
<text><div id="headerfrontPage"></text>
}
else
{
<text><div id="header"></text>
}
Or you use razor syntax #: like
#if (ViewBag.Section == "Home")
{
#:<div id="headerfrontPage">
}
else
{
#:<div id="header">
}
But for your current situation I would prefer Ron Sijm's solution:
#{
var divName = ViewBag.Section == "Home" ? "headerfrontPage" : "header";
}
<div id="#divName">
I suspect it is because your divs are not closed, so razor assumes that the closing brace is actually part of the div content.
You might try outputting the entire div content within your code there, including the closing tag, or output the div tag with a Response.Write, or something similar, so there is no confusing markup.
EDIT: also, maybe enclosing your div tag in a
<text></text>
might be worth a try.
You could try this:
#{
string divName;
if(ViewBag.Section == "Home")
{
divName = "headerfrontPage";
}
else
{
divName = "header";
}
}
<div id="#divName">
I'm not sure if that will help, it a long shot. But at least imo that looks better...
Try this:
#if (ViewBag.Section == "Home")
{
<text> <div id="headerfrontPage"> </text>
}
else
{
<text> <div id="header"> </text>
}
The simplest way to write this would be:
<div id="#(ViewBag.Section == "Home" ? "headerFrontPage" : "header")">
Or, if you prefer, you can use a local variable:
#{ var headerID = ViewBag.Section == "Home" ? "headerFrontPage" : "header"; }
<div id="#headerID">
Regarding the more general case of unclosed tags in Razor code blocks, you can explicitly mark the opening tag as content:
#if (ViewBag.Section == "Home")
{
#:<div id="headerFrontPage">
}
else
{
#:<div id="header">
}