Why can't Visual Studio 2012 format this valid Razor code

Question

So I have some valid Razor syntax code in a view that builds and runs fine. However, in Visual Studio 2012, the code will not format correctly, Razor seems "fragile" in parsing this document and when I auto format the code CTRL + K + D. Some the content floats left, ugly, not formatting to the nested parent-child structure. I cannot add a @ to my second if condition which could fix the floating left HTML content.

@foreach (var customField in Model.CustomFields)
{
<tr>
    <td>
        @customField.label
    </td>
    <td>
        <div class="col-md-4 padding-0">
            @switch (customField.custom_field_type_id)
            {
                case Constants.CustomFieldType.checkbox:
                    foreach (var opt in customField.custom_field_options.Select((x, i) => new { Data = x, Index = i }))
                    {
                        var optValue = customField.custom_field_values.FirstOrDefault(item => item.custom_field_option_id == opt.Data.custom_field_option_id && item.custom_field_id == customField.custom_field_id);

                <div class="checkbox">
                    <label>@opt.Data.custom_field_option_value</label>

                    @if (optValue != null)
                    {
                        var optName = customField.custom_field_id + "_" + opt.Data.custom_field_option_id + "_" + optValue.custom_field_value_id;
                        <input type="checkbox" id="CustomFieldEdit_@opt.Data.custom_field_option_id" name="CustomFieldEdit_@optName" @(optValue.value.ToLower() == "true" ? "checked" : "") />
                        <input type="hidden" id="CustomFieldOrig_@opt.Data.custom_field_option_id" name="CustomFieldOrig_@optName" value="@optValue.value" />
                    }
                    else
                    {
                        var optName = customField.custom_field_id + "_" + opt.Data.custom_field_option_id + "_0";
                        <input type="checkbox" id="CustomFieldEdit_@(opt.Data.custom_field_option_id)" name="CustomFieldEdit_@optName" @(opt.Data.is_checked ? "checked" : "") />
                    }
                </div>
                    }

                    break;

                         case Constants.CustomFieldType.text_input:
                    var textinputVal = customField.custom_field_values.FirstOrDefault();
                    if (textinputVal != null)
                    {
                        var textInputName = customField.custom_field_id + "_0_" + textinputVal.custom_field_value_id;
                <input type="text" id="CustomFieldEdit_@(customField.custom_field_id)" name="CustomFieldEdit_@(textInputName)" value="@textinputVal.value" class="form-control" />
                <input type="hidden" id="CustomFieldOrig_@(customField.custom_field_id)" name="CustomFieldOrig_@(textInputName)" value="@textinputVal.value" class="form-control" />
                    }
                    else
                    {
                        var textInputName = customField.custom_field_id + "_0_0";
                <input type="text" id="CustomFieldEdit_@(customField.custom_field_id)" name="CustomFieldEdit_@(textInputName)" class="form-control" />
                    }
                    break;

            }
        </div>
    </td>
</tr>

}

Checkout a screenshot of how Visual Studio 2012 Professional formats my view code

Answer 1

Looks like you were pretty good about using parentheses to escape out values so Razor wouldn't parse them as email addresses, but it looks like a few escaped having parentheses that needed them. Try this:

@if (optValue != null)
{
    <input type="checkbox" id="CustomFieldEdit_@(opt.Data.custom_field_option_id)" name="CustomFieldEdit_@(customField.custom_field_id)_@(opt.Data.custom_field_option_id)_@(optValue.custom_field_value_id)" @(optValue.value.ToLower() == "true" ? "checked" : "")>
    <input type="hidden" id="CustomFieldOrig_@(opt.Data.custom_field_option_id)" name="CustomFieldOrig_@(customField.custom_field_id)_@(opt.Data.custom_field_option_id)_@(optValue.custom_field_value_id)" value="@optValue.value">
}
else
{

    <input type="checkbox" id="CustomFieldEdit_@(opt.Data.custom_field_option_id)" name="CustomFieldEdit_@(customField.custom_field_id)_@(opt.Data.custom_field_option_id)_0" @(opt.Data.is_checked ? "checked" : "")>
}

Update to address updated question

Try something like this.

<div class="checkbox">
    <label>@opt.Data.custom_field_option_value</label>


    @if (optValue != null)
    {
        var optName = customField.custom_field_id + "_" + opt.Data.custom_field_option_id + "_" + optValue.custom_field_value_id;
        <input type="checkbox" id="CustomFieldEdit_@opt.Data.custom_field_option_id" name="CustomFieldEdit_@(optName)" @(optValue.value.ToLower() == "true" ? "checked" : "") />
        <input type="hidden" id="CustomFieldOrig_@opt.Data.custom_field_option_id" name="CustomFieldOrig_@(optName)" value="@(optValue.value)" />
    }
    else
    {
        var optName = customField.custom_field_id + "_" + opt.Data.custom_field_option_id + "_0";
        <input type="checkbox" id="CustomFieldEdit_@(opt.Data.custom_field_option_id)" name="CustomFieldEdit_@(optName)" @(opt.Data.is_checked ? "checked" : "") />
    }

</div>

Edit for third question update

The main issue that keeps coming up each time is that Razor mistakes certain parts of your code for legitimately formatted email addresses, however obvious to humans that they aren't. Be sure anything that has an @ that is immediately preceded by plain HTML/text is enclosed in parentheses.

Do:

CustomFieldEdit_@(customField.custom_field_id)

not

CustomFieldEdit_@customField.custom_field_id

(@customField.custom_field_id by itself would be fine, though.)