How do I conditionally add in a div and attributes?

Question

Here is some code on my ASP.NET site. I initially wanted to write

if((n%4)==0) {
    <div>
}
//code
if((n%4)==0) {
    </div>
}

but ASP.NET wouldn't have it. It had a compile error. It appears it ignores } until I close the div. So I ended up with the below. The if statement causes me the same problem. I know I can conditionally have values by writing class="@(cond?"val":"")" but that only works for values I don' t know how to conditionally have checked in there. Having the same line written 4 times is pretty ridiculous how do I write this properly?

<div>
    @for (int i = 1, n = 0; i < 32; i <<= 1, ++n)
    {
        if ((looking & i) != 0)
        {
            <input type="checkbox" name="SomeName" value="@i" id="SomeName_@i" checked>
        }
        else
        {
            <input type="checkbox" name="SomeName" value="@i" id="SomeName_@i">
        }
        <label for="SomeName_@i">@TestApp.Controllers.HomeController.enumFriendlyName[n]</label><br />
    }
</div>
<div>
    @for (int i = 32, n = 4; i < 256; i <<= 1, ++n)
    {
        if ((looking & i) != 0)
        {
            <input type="checkbox" name="SomeName" value="@i" id="SomeName_@i" checked>
        }
        else
        {
            <input type="checkbox" name="SomeName" value="@i" id="SomeName_@i">
        }
        <label for="SomeName_@i">@TestApp.Controllers.HomeController.enumFriendlyName[n]</label><br />
    }
</div>

PilotBob · Accepted Answer · 2015-12-12T03:28:54.167

1

I assume you are talking about razor here. I'll start with attributes.. the trick is to use the html helper rather than writing the html by hand.

@Html.Label("Name", "LabelText")
@Html.CheckBox("Name", isChecked)

Also, for the CheckBox and other helpers you can pass and htmlAttributes anon function, if the value you specify for the attribute evals to null, the attribute won't be included in the rendered html.

What are you doing with the divs? Perhaps if you tell us what you want to do we can suggest something. Are you trying to stripe, because you can do that with CSS.

So, rather than the code duplication you could possible use a partial as the content for each div:

<div class="left">
   @Html.Partial(_controls, model)
</div>
<div class="right">
   @Html.Partial(_controls, model)
</div>

Or something. I may have the syntax wrong, but basically you can pass a model to your partial which can contain the range of items you want.

The model can be like new { start = 1, finish = 32 }

edited Dec 12 '15 at 03:28

answered Dec 11 '15 at 23:00

PilotBob

3,107
7
35
52

Hmm. Why does `@Html.Label` force me to give it a name/id? Also it creates an extra tag `` wtf? I tried null and `""` in the label name but it threw an exception. Right now my enum has 8 entries (hey look I messed up I should have wrote <32 not 128). I want to have the first 4 in one column and the next 4 in another. I was thinking of using css to write `:after { content:'
'}` but I got the feeling it wouldn't work or be much harder than using ASP.NET to solve
– Dec 11 '15 at 23:12
Yep, it does that for checkboxes, I'm not 100% sure why, I'm sure there's a reason. I'm not really sure about the name thing, I usually use LabelFor(f => f.Property) where f is the model (viewmodel) using strongly typed views. And, the view model has attributes if I want a name different than the conventions create based on the property name. I found this answer to the checkbox question... to ensure a value is posted back. http://stackoverflow.com/questions/2697299/asp-net-mvc-why-is-html-checkbox-generating-an-additional-hidden-input – PilotBob Dec 12 '15 at 03:19
IF you can update your question with an example of the HTML you want rendered with the divs I can perhaps help... I'm still not 100% sure what you are trying to do. If you are doing what I think you are, you might want to use a partial so you don't have to duplicate so much code... I'll update my answer. – PilotBob Dec 12 '15 at 03:21
My question always had the actual html. Hmm, it feels like overkill but I guess Html.Partial is the best option. Really it's one input line and one label. That answer you linked made sense. I don't need it for my use case but I did have another where I did need it. I accept this answer – Dec 12 '15 at 04:16

How do I conditionally add in a div and attributes?

1 Answers1