Asp.net Space being auto-generated into html Divs - c#

I am new to Asp.Net and I am having a problem using a layout. I have a div and inside is a p tag, depending on if the embedded c# flip is true or false I would like it to be an empty p tag or a p tag with content.
Problem: This occurs when there is nothing being placed inside the div tag. It will generate a lot of space which is stopping me from using the :empty css tag because there is technically content inside it.
My code is as such:
<div>
#if (flip = true){
<p>text</p>
}
else{}
</div>

Try using one of Razor's 'literal' tags (as described here: How to use Razor like asp:Literal?):
<div>#Html.Raw(flip ? "<p>text</p>" : "")</div>
and be sure to keep the <div> on one line.
There might be a better way to do it with syntax similar to #:, but I can't recall that syntax off hand.
Update: If you're adding substantial content within the div and you're concern is only about the css :empty selector, you might be better off just adding a specialized class to the div (as described here: How to use ? : if statements with Razor and inline code blocks):
<div class="col-md-12 game #(flip ? "" : "empty")">
Then you can just use the syntax you've already been using (#if(flip){})

Related

Taghelper attributes must be well formed

I am using Razor pages in .net 5.0
I wanted to use anchor tag helper to generate href as shown below
<a asp-page="/Add" class="ml-4 d-lg-block" #* something *#)"
When add any c# code with tag helper it is giving a compile error
in this I have added #* something *# but it is giving a compile error
and also If I use any condition to render a tag, It is throwing compile error
<a asp-page="/Edit" #(Model.Condition?"":"disabled")>
saying compile error : The taghelper 'a' must not have c# in the elemnts attribute declaration area
How can I use C# along with tag helpers to satisfy both of the above condtions
disabled will not work for a tag,you can try to use a button,and add window.location.href in onclick:
#if(Model.Condition==""){
<button onclick="window.location.href='/Edit'" >...</button>
}else
{
<button onclick="window.location.href='/Edit'" disabled">...</button>
}
This is the syntax you have to use to conditionally add the disabled attribute:
<a asp-page="/Edit" disabled="#Model.Condition">...</a>
When condition is true it will generate:
...
and when condition is false it will generate:
...
Keep in mind that anchor elements do not have a disabled attribute so you have to add additional CSS to disable them:
a[disabled] {
pointer-events: none;
}
This solution is explained in more detail here: https://stackoverflow.com/a/10276157/10839134

Not recognizing <strong> tag in #Html.Raw in ASP.NET MVC C#

I am using ASP.NET MVC, when I want to use the tag in #Html.Raw, this tag does not appear in the desired <div>.
As shown here:
<div class="mt-4 current-cursor">
#Html.Raw("<strong>OKK</strong> <p><ul><li style='font-size:18px;'>1.Test1</li><li>2.Test2</li></p>")
</div>
The result that it displays for me is as below, that is, it does not recognize the <strong> tag at all.
Html.Raw does not interpret anything at all. It just spews the given string unencoded into the output docuument.
So if it doesn't look right in your case, possible you have some CSS in that page that causes it to look as it does. You could use F12 (Developer Tools, depending on your browser) to inspect the "OKK" for details.
BTW, the other tags in your example also look wrong (which could also be an issue given existing CSS in the page).
In my case, for example, using some (other) arbitrary styles, your code looks like this:

Getting element by Id

Selenium, NUnit testing, C#, Visual Studio.
How, in Selenium WebDriver, can I locate element in a page source that looks like following, and set some text in its <p> tag:
<body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false">
<p></p>
</body>
This is body tag from CKEditor component present on a page (not a main page <body> element ).
Actually, I need to set some text in <p> element. What is confusing to me , is that class attribute is complicated, contains from several strings. I am aware of command: driver.findElement( By.className( "some_class_name" )); but how to use it in this case and to set some text in <p> element?
If you give the p tag an ID like so
<p id="derp">Text here</p>
You can send text to it using Selenium like this
driver.find_element_by_id("derp").sendKeys("herp");
Hope this helps!
EDIT: Without adding an ID to the element, you might be able to do something like this
driver.findElement(By.className("some_class_name")).findElement(By.tagName("p")).sendKeys("herp");
If you want the p elelement then this relative xpath should work.
//body[#class='cke_editable cke_editable_themed cke_contents_ltr cke_show_borders']/p
That is assuming that there is only a single body element with this class attribute.
As you are saying, there is no id usable for location, so you have to come up with a different solution.
Selenium is capable of using css selectors - it's the same scheme found in CSS files to specify to which elements the following styling rules should apply.
One possible locator would be the following:
body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders > p
Advantage over XPath: CSS selectors are aware about groups, so they don't handle them only as strings. Using just an XPath expression against the exact class attribute, your recognition would fail if there would be another, new class withing the attribute. Using CSS selectors, it's possible to really just identify per class.
Simplified and boiled down to the classes that really describe your editable element, the following should be sufficient:
body.cke_editable.cke > p

How to get html control by ID that has hyphens?

I have a front end written in html that I am converting to asp, and many of the controls have names with "-" in them. This is causing crazy headaches, as there is no time to rename everything, and the ctrl-f and replace somehow breaks my css. Is there any way to access these controls in the code behind while they have the dashes? I have tried the code below.
//Can find when there is no dash in it, but that breaks the css after find/replace of full solution
HtmlGenericControl body = (HtmlGenericControl)this.Page.FindControl("page-list");
body.Attributes.Add("class", GlobalVariables.webAppSkin);
//I have also tried this, but logout stays null
WebControl logout = (WebControl)Page.FindControl("logout-link");
This is the html control:
<body id="page-list">
Sorry, that's not gonna happen.
You cannot have an element with an id containing "-", and still be a runat="server" ASP.NET control.
Microsoft's docs about the control's IDs states:
http://msdn.microsoft.com/en-us/library/system.web.ui.control.id.aspx
Only combinations of alphanumeric characters and the underscore character ( _ ) are valid values for this property. Including spaces or other invalid characters will cause an ASP.NET page parser error.
If you tried adding runat="server" to the body tag you showed: <body id="page-list">, it would give you the following line in aspx.designer.cs:
protected global::System.Web.UI.HtmlControls.HtmlGenericControl page-list;
Which is obviously throwing an exception on C# syntax.
<body id="page-list"> is not a HTML Control (i.e. an instance of (a subclass of) System.Web.UI.Control because it doesn't have the runat="server" attribute. If you were to add runat="server" then you would get a JIT compile-time error message informing you that "page-list" is not a valid identifier.
ASP.NET Web Forms 4.0 added the ClientIDMode attribute, however it doesn't allow you to set a completely custom ID attribute value. There's no easy solution for this without using <asp:Literal> or implementing your own control (or my preferred option: switching to ASP.NET MVC).
You can access controls in code behind with their ID if you write runat="server". Here is the example for your case
<body runat="server" id="testID">
In code behind you can access it like this:
body.Attributes.Add("class", value);

Is it possible to make Razor sections optional?

If I have a page with:
<body>
#section SomeStuff {
<span>This is a section I just addered</span>
}
</body>
Is it possible for the layout to not render this section, or is that contrary to how this should work conceptually. Seems like it would be useful to be able to not render certain sections on a page (unless I'm thinking about this incorrectly).
Edit:
Including the error message may be helpful, when I put a section into the main page, the layout page fails with: The following sections have been defined but have not been rendered for the layout page "/Views/Layouts/_Layout1.cshtml": "SomeStuff". As if it's forcing me to render every section on the page or something.
In otherwords, in Layout.cshtml, I don't call #RenderSection, but in Index.html I have a section called SomeStuff defined. Is that legal? Seems like it's forcing me to render all sections in the page, but that seems like sections should be optional, no?
you can specify if a section is required.
#RenderSection("SomeStuff", required: false)
if you don't render it out in a view, it shouldn't error then, noted here
http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx
You can set a section to be optional by setting the required parameter to false. If you'd like to include some optional wrapper HTML around your section then you can also use the IsSectionDefined method.
#if(IsSectionDefined("SideBar"))
{
<div class="sidebar">
#RenderSection("SideBar", required: false)
</div>
}
For a certain layout not to render certain section you need to have something like this is your layout.cshtml
#RenderSection("Somestuff", required:false)
You could do:
#if (condition) {
#RenderSection("SomeStuff")
}
Or just use a conditional statement directly rather than #RenderSection:
#if (yourCondition) {
<span>This is a section I just addered</span>
}
I encountered a similar issue when I was trying to dynamically inject code into an inline script, I solved it via:
#if (someCondition)
{
#Html.Raw(#"
Your stuff here
");
}

Categories