Question

I am using helpers like the following:

            @Html.TextBoxFor(m => m.Login.UserName, new { @class = "adm", size = 30 })
            @Html.ValidationMessageFor(m => m.Login.UserName)

            @Html.LabelFor(m => m.Login.Password, new { @class = "adm" })
            @Html.PasswordFor(m => m.Login.Password, new { @class = "adm", size = 30 })
            @Html.ValidationMessageFor(m => m.Login.Password)

When I look at the source code it appears in one very long line with no line breaks. Is
there any way I can use the helpers and have the source code formatted a bit better? It
is just so difficult to read when in one 300 column line?

thanks

Answer 1

I wouldn’t bother about the HTML source. That’s for browsers to read, not humans. But if you wanted proper formatting you could wrap them in the special <text> node:

<text>
    @Html.LabelFor(m => m.Login.UserName, new { @class = "adm" })
    @Html.TextBoxFor(m => m.Login.UserName, new { @class = "adm", size = 30 })
    @Html.ValidationMessageFor(m => m.Login.UserName)
</text>

<text>
    @Html.LabelFor(m => m.Login.Password, new { @class = "adm" })
    @Html.PasswordFor(m => m.Login.Password, new { @class = "adm", size = 30 })
    @Html.ValidationMessageFor(m => m.Login.Password)
</text>

The <text> node will not be rendered in the output. Another possibility is to directly use a <div> or a <span> because from what I can see you are applying this adm class manually to the label and the input whereas if you wrapped them in another node you could apply the class directly to this node and then define the adm rule to apply to input fields inside this wrapper node.