ASP.NET MVC: Razor - How to keep nicely indented code without sending a load of white space to the browser

Question

I am using razor to render out javascript objects, as shown in the following code snippet

@{
    bool isFirst = true;
    foreach (var qa in Model.Form.FormItems)
    {
        if (isFirst)
        {
            isFirst = false;
        }
        else
        {
            @:,
        }

        @:new QuestionAndAnswer(
                @:@(qa.QuestionAnswerId), 
                @:@(qa.OrderNumber), 
                @:@(qa.ParentOrderNumber), 
                @:@(qa.IsHeader.ToJsonValue()),
                @:@(qa.IsMandatory.ToJsonValue()),
                @:@(qa.IsAlertable.ToJsonValue()),
                @:@(qa.IsAlarmable.ToJsonValue()),
                @:@(qa.IsKeyItem.ToJsonValue()),
                @:@(qa.IsHiddenQuestion.ToJsonValue()),
                @:new Question(
                    @:@(qa.Question.QuestionId), 
                    @:@Html.Raw(qa.Question.IdCode.ToJsonValue()),
                    @:new OverridableFormItemText(
                        @:@(qa.Question.ItemText.DefaultFormItemTextId),
                        @:@Html.Raw(qa.Question.ItemText.DefaultText.ToJsonValue()),
                        @:@Html.Raw(qa.Question.ItemText.DefaultHelpText.ToJsonValue()),
..etc...

This makes my cshtml pages easy to read and well laid out.

Unfortunately, all the indents are rendered to the browser make the page around 4x bigger than it need to be. Example snippet of the html:

new QuestionAndAnswer(
    34500, 
    2, 
    1, 
    false,
    false,
    false,
    false,
    false,
    false,
    new Question(
        33955, 
        "123",
        new OverridableFormItemText(
            23879,
            "Locality",
            "",
            null,
            "",
            ""
        )
    ),
        new Answer(
            22196,
            "321",
            4,
            "MultipleChoiceSingleSelect",

Is there are way for me to retain the nicely formatted server side code but send a unformatted version (ie. no indents) to the browser that saves on bandwidth?

Answer 1

You could restructure your Razor code so that you're not dropping in and out on each line. Something like this:

@{
    bool isFirst = true;
}

@foreach (var qa in Model.Form.FormItems)
{
    @(isFirst ? "" : ",")

    @{
        if (isFirst)
        {
            isFirst = false;
        }
    }

    @* Everything from here on will be rendered as-is in the browser *@
new QuestionAndAnswer(
    @(qa.QuestionAnswerId), 
...
}