CODEWITHSUNDEEP
javascriptasp.net-mvcperformancerazor
Mark Robinson
Mark Robinson

Reputation: 13278

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

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?

Upvotes: 5

Views: 4299

Answers (3)

Khaldoun
Khaldoun

Reputation: 487

To Compress Here is the Code ,

 protected void Application_BeginRequest(object sender, EventArgs e)
    {
        // Implement HTTP compression
       HttpApplication app = (HttpApplication)sender;

        // Retrieve accepted encodings
        string encodings = app.Request.Headers.Get("Accept-Encoding");
        if (encodings != null)
        {
            // Check the browser accepts deflate or gzip (deflate takes preference)
            encodings = encodings.ToLower();
            if (encodings.Contains("deflate"))
            {
                app.Response.Filter = new DeflateStream(app.Response.Filter, CompressionMode.Compress);
                app.Response.AppendHeader("Content-Encoding", "deflate");
            }
            else if (encodings.Contains("gzip"))
            {
                app.Response.Filter = new GZipStream(app.Response.Filter, CompressionMode.Compress);
                app.Response.AppendHeader("Content-Encoding", "gzip");
            }
        }
    }

Upvotes: 1

GalacticCowboy
GalacticCowboy

Reputation: 11759

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), 
...
}

Upvotes: 1

Richard
Richard

Reputation: 108975

Enable compression of dynamic content in IIS, the whitespace will be there but will compress very well.

Upvotes: 0

Related Questions