It seems I cannot use vertical line in the asp net core 3.1.3 MVC if it contains "User.IsInRole("Admin")"
For example.
#if (User.IsInRole("Admin"))
{
<a asp-action="Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-action="Details" asp-route-id="#item.Id">Details</a> |
<a asp-action="Delete" asp-route-id="#item.Id">Delete</a> |
}
The first error message is
Error CS1525 Invalid expression term '|'
Any ideas how should I fix it?
You have two ways to implement "|" in the #module:
1.Use ASCII character(|) instead of "|"：
#if (User.IsInRole("Admin"))
{
<a asp-action="Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-action="Details" asp-route-id="#item.Id">Details</a> |
<a asp-action="Delete" asp-route-id="#item.Id">Delete</a> |
}
2.Add '#' character before "|" with brackets：
#if (User.IsInRole("Admin"))
{
<a asp-action="Edit" asp-route-id="#item.Id">Edit</a> #("|")
<a asp-action="Details" asp-route-id="#item.Id">Details</a> #("|")
<a asp-action="Delete" asp-route-id="#item.Id">Delete</a>#("|")
}
You can also refer to this.
Related
I just wanted to have different colors for the different enum values in my DataTable. I also need th:text for my filter I created.
What can I do so that I can use th:text and keep my span formatting?
<td class="incident" th:text="${ticket.getStatus().toString()}">
<a th:if="${ticket.getStatus().toString()} == 'OPEN'">
<span th:text="${ticket.getStatus().toString()}" class="badge text-white" style="background-color: #F93154"></span>
</a>
<a th:if="${ticket.getStatus().toString()} == 'IN_PROCESS'">
<span th:text="${ticket.getStatus().toString()}" class="badge text-white" style="background-color: #FFEA00"></span>
</a>
<a th:if="${ticket.getStatus().toString()} == 'CLOSED'">
<span th:text="${ticket.getStatus().toString()}" class="badge text-white" style="background-color: #00E676"></span>
</a>
</td>
Change this:
<td class="incident" th:text="${ticket.getStatus().toString()}">
to this:
<td class="incident">
The reason is that the th:text expression in the <td> tag will cause all child content to be ignored.
You can also clean up the Thymeleaf a bit by changing getStatus() to just status, since Thymeleaf will automatically apply JavaBean naming rules to the field name status and acutally invoke getStatus() behind the scenes.
I would also recommend considering updating your enum, so that it can return string values directly - see Using Enum values as String literals. This will further allow you to simplify your Thymeleaf, and get rid of all those .toString() methods embedded in the template.
For example, assume you have the enum:
public enum Status {
OPEN, IN_PROCESS, CLOSED;
}
You can change that to the following:
public enum Status {
OPEN("Open"),
IN_PROCESS("In Process"),
CLOSED("Closed");
private final String label;
private Status(String s) {
label = s;
}
public String getLabel() {
return label;
}
// toString and comparison methods not shown
}
Now each enum has a related string value (the "label") which you can use as follows:
<table>
<td class="incident">
<a th:if="${ticket.status.label} == 'Open'">
<span th:text="${ticket.status.label}"
class="badge text-white"
style="background-color: #F93154"></span>
</a>
<a th:if="${ticket.status.label} == 'In Progress'">
<span th:text="${ticket.status.label}"
class="badge text-white"
style="background-color: #FFEA00"></span>
</a>
<a th:if="${ticket.status.label} == 'Closed'">
<span th:text="${ticket.status.label}"
class="badge text-white"
style="background-color: #00E676"></span>
</a>
</td>
</table>
I am using handlebars as templeting engine for my project. I am using prettier for formatting but during formatting hbs file i am getting error as SyntaxError: Handlebars partials are not supported . I tried to find solution on internet but failed.
Here is complete log of error:
SyntaxError: Handlebars partials are not supported:
(error occurred in 'an unknown module' # line 2 : column 2) (2:2)
1 |
2 | {{> header}}
| ^^^^^^^^^^^^
3 |
4 |
5 |
at n (c:\Users\Admin.vscode\extensions\esbenp.prettier-vscode
9.0.0\node_modules\prettier\parser-glimmer.js:1:1320)
at Object.parse (c:\Users\Admin.vscode\extensions\esbenp.prettier-vscode
9.0.0\node_modules\prettier\parser-glimmer.js:1:183895)
at Object.parse$a [as parse] (c:\Users\Admin.vscode\extensions\esbenp.prettier-vscode
9.0.0\node_modules\prettier\index.js:12513:19)
My code is:
{{> header}}
<header>
<nav class="navbar">
<a href="#" style="display: inline-block">
<object
data="./images/background.png"
width="100"
height="80"
style="pointer-events: none"
></object>
</a>
<div class="navbar_search">
<input
type="text"
name="search-bar"
id="search"
placeholder="Search..."
maxlength="15"
/>
<a href=""
><i data-feather="search" class="navbar_search-icon"></i
></a>
</div>
<div class="navbar_icons">
<i data-feather="bell"></i>
<i data-feather="user"></i>
<i data-feather="settings"></i>
</div>
</nav>
</header>
<br></br>
<h1 class="heading_pink" align = "center">WHAT TO DO AFTER 12TH?</h1>
<hr color = "black">
<section class="chain">
<ul class="chain_list">
<li class="chain_list-item">TIP 1</li>
<li class="chain_list-item">TIP 2</li>
<li class="chain_list-item">TIP 3</li>
<li class="chain_list-item">TIP 4</li>
<li class="chain_list-item">TIP 5</li>
<li class="chain_list-item">TIP 6</li>
<li class="chain_list-item">TIP 7</li>
</ul>
</section>
{{> footer}}
You can use a .prettierignore file to ignore templates.
# if your files are in a templates folder for example
# add this folder to the .prettierignore
templates
On the same docs page is also a section about handlebars. If you prefer to ignore only parts of your file you can follow this.
{{! prettier-ignore }}
<div>
"hello! my parent was ignored"
{{#my-crazy-component "shall" be="preserved"}}
<This
is = "also preserved as is"
/>
{{/my-crazy-component}}
</div>
Old question but ran into this and thought was worth posting here, if you are using handlebars with prettier, configure your .hbs files to use the Glimmer parser in your .prettierrc file, like so:
{
"overrides": [
{
"files": "**/*.{hbs}",
"options": {
"parser": "glimmer"
}
}
]
}
If you dont have a .prettierrc file, create one in the root of your project with the contents above, and you should be good to go.
This way all your templates also get properly formatted, better than ignoring them.
I do have popup where are three dropdowns, ids are unique
with each popup generation:
The first element:
<a aria-required="true" class="select" aria-disabled="false" aria-
describedby="5715:0-label" aria-haspopup="true" tabindex="0" role="button"
title="" href="javascript:void(0);" data-aura-rendered-by="5733:0" data-
interactive-lib-uid="10">Stage 1 - Needs Assessment</a>
While I'm able to identify the element above by simple xpath="//*[#class='select'][1]", the other two, which look same to me (example below), can't be identified by index like //*[#class='select'][2], tried 'following' without success, but I may be not correct with syntax.
Example of dropdown element I'm unable to locate..
<a aria-required="false" class="select" aria-disabled="false" aria-
describedby="6280:0-label" aria-haspopup="true" tabindex="0" role="button"
title="" href="javascript:void(0);" data-aura-rendered-by="6290:0" data-
interactive-lib-uid="16">--None--</a>
Any ideas what am I missing?, except advanced xpath knowledge..
Thank you!
//*[#class='select'][2] will return you required node only if both links are children of the same parent, e.g.
<div>
<a class="select">Stage 1 - Needs Assessment</a>
<a class="select">--None--</a>
</div>
If links are children of different parents, e.g.
<div>
<a class="select">Stage 1 - Needs Assessment</a>
</div>
<div>
<a class="select">--None--</a>
</div>
you should use
(//*[#class='select'])[1]
for first
(//*[#class='select'])[2]
for second
I am trying to press these buttons through click event
First Code (id 1)
<td id="UPDown_1">
<a href="javascript:void(0)" class="upMinus">
<img src="/alpha/images/up/minus.png" width="14px" alt="all"></a>
<a href="javascript:void(0)" class="DownPlus">
<img src="/alpha/images/Down/plus.png" width="14px" alt="maximum"></a></td>
Second Code (id 2)
<td id="UPDown_2">
<a href="javascript:void(0)" class="upMinus">
<img src="/alpha/images/up/minus.png" width="14px" alt="all"></a>
<a href="javascript:void(0)" class="DownPlus">
<img src="/alpha/images/Down/plus.png" width="14px" alt="maximum"></a></td>
I tried this code
For Each element As HtmlElement In WebBrowser1.Document.GetElementsByTagName("img")
If element.GetAttribute("alt") = "all" Then
element.InvokeMember("click")
End If
Next
it's worked but of course pressed all the buttons
<ul>
<li class="active">
<a href="#">
<i class="fa fa-home"></i><br>
<span class="title">Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-rss-square"></i><br>
<span class="title">Posts</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-calendar"></i><br>
<span class="title">Events</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o"></i><br>
<span class="title">My Activity</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-edit"></i><br>
<span class="title">Assessments</span>
</a>
</li>
</ul>
I want to locate the respective span element. I want to check the order of the span elements using css selector. So when I use selenium IDE,I will verify it like below(using nth child concept).
verifyText | css=.title:nth(0) | Home
verifyText | css=.title:nth(1) | Posts
verifyText | css=.title:nth(2) | Events
verifyText | css=.title:nth(3) | My Activity
verifyText | css=.title:nth(4) | Assessments
But when I do the same thing in Selenium WebDriver I am not able to locate the elements with the order which I did using Selenium IDE.
Below are the codes that I used in WebDriver and it dint work.
driver.findElement(By.cssSelector(".title:nth(0)")); // to locate the "Home" element
driver.findElement(By.cssSelector(".title:nth-of-type(0)")); // to locate the "Home" element
driver.findElement(By.cssSelector(".title:nth-child(0)")); // to locate the "Home" element
Could anyone please help me.
You can generate the css-selector from ul like ul > li:nth-child(1) for home. See below:
driver.findElement(By.cssSelector("ul > li:nth-child(1)")); >> home
driver.findElement(By.cssSelector("ul > li:nth-child(2)")); >> posts
driver.findElement(By.cssSelector("ul > li:nth-child(3)")); >> events
also reachin span is the same:
driver.findElement(By.cssSelector("ul > li:nth-child(1) > a > span")); >> home
do you need css specifically? if not, you can also go for xpath, which imho reads better/clearer:
driver.findElement(By.xpath("(//span[#class='title'])[0]")); // home
driver.findElement(By.xpath("(//span[#class='title'])[1]")); // posts
...
<body>
<div class=parent>
<div></div>
<div></div>
<div></div>
</div>
</body>
If you already have the parent element and just need to find nth child
parent.find_element_by_css_selector('div:nth-child(2)')
would select the second div
We can write this way-
To get all the span text like-
Home
Posts
Events
My Activity
Assessments
Then driver.findElements(By.cssSelector("ul>li>a span:nth-child(3)"));
and
To get individual span text then you need to pass the index position in nth-child(index) method.driver.findElement(By.cssSelector("ul>li:nth-child(1)>a span")).getText();//Home driver.findElement(By.cssSelector("ul>li:nth-child(2)>a span")).getText();//Posts driver.findElement(By.cssSelector("ul>li:nth-child(3)>a span")).getText();//Events driver.findElement(By.cssSelector("ul>li:nth-child(4)>a span")).getText();//My Activity driver.findElement(By.cssSelector("ul>li:nth-child(5)>a span")).getText();//Assessments For more details please visit- CSS Selector in Details
driver.find_element_by_css_selector('ul>li:nth-of-type(1)>a>')