2

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>

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
L1ghtk3ira
  • 3,021
  • 6
  • 31
  • 70
  • I apologize for the question being messed up, every time I try to fix it it goes back to that. – L1ghtk3ira Jan 14 '16 at 09:38
  • What is the wrong if it generated space? It will not be rendered by browser –  Jan 14 '16 at 09:41
  • Possibly similar: http://stackoverflow.com/questions/6652522/asp-net-mvc-razor-extra-whitespace-rendered – Philip Pittle Jan 14 '16 at 09:56
  • Because I need to use the :empty tag when information gets put in and out of the p tag. At the start of the page because it has spaces it will not execute and the page looks wonky. – L1ghtk3ira Jan 14 '16 at 10:03
  • I had this problem aswell... simple moved everything up to one line (without any extra spaces where it wasnt needed) and all the whitespaces dissapeared. – ObedMarsh Jan 16 '16 at 13:15

1 Answers1

1

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){})

Community
  • 1
  • 1
Philip Pittle
  • 11,821
  • 8
  • 59
  • 123
  • Also, if you're new to C#, the `??` tag is a way to inline the `if` statement. Technical term is the Conditional Operator: https://msdn.microsoft.com/en-us/library/ty67wk28.aspx – Philip Pittle Jan 14 '16 at 09:47
  • 1
    The Conditional Operator (aka Ternary Operator) is ? : . The ?? operator is the Null-coalescing operator: https://msdn.microsoft.com/en-us/library/ms173224.aspx – Jimmy Jan 14 '16 at 09:50
  • Good catch, I'll fix that. Goes to show how utterly dependent I am on red squiggly lines to catch compiler errors. – Philip Pittle Jan 14 '16 at 09:54
  • I will need to put more information in that div in the future however, also using that flip. There is no way in the future that it can stay as one line without being very hard to work with. – L1ghtk3ira Jan 14 '16 at 10:05
  • Thank you so much your Update did what I needed to accomplish. Also I am new to c# I usually do Java so I appreciate the explanation. – L1ghtk3ira Jan 14 '16 at 10:40