CODEWITHSUNDEEP
asp.net-mvc-3visual-studio-2010visual-studiorazor
Victor
Victor

Reputation: 5107

Keep correct HTML syntax highlighting in <script> "text/html" templates

Is there a way to retain HTML/ASP.net syntax highlighting and code completion within JavaScript HTML templates inside of razor views?

To help highlight (pun intended) the problem see this image of the problem: enter image description here

Edit: This questions relates to Visual Studio 2010.

Upvotes: 3

Views: 1482

Answers (2)

drzaus
drzaus

Reputation: 24994

It's the "same" solution for WebForms (via here)

(even though the question references MVC/Razor, I got here looking for WebForms)

Helper

In your code-behind .aspx.cs

public string ClientTemplateBegin(string attrId, string attrType = "text/html")
{
    return string.Format(@"<script type=""{0}"" id=""{1}"">", attrType, attrId);
}

public string ClientTemplateEnd()
{
    return "</script>";
}

Usage

In your .aspx file:

<%= ClientTemplateBegin("scriptId", "text/ractive") %>
    <strong>Some Editor</strong>

    {{#each items}}
        Hello {{name}}!  Your age is {{age}}.
    {{/each}}

    <pre>
    {{ json(items) }}
    </pre>
<%= ClientTemplateEnd() %>

Upvotes: 1

Anthony Mills
Anthony Mills

Reputation: 8784

Create a helper for it, as shown on Syntax highlighting for script tags with html templates in Visual Studio 2010 MVC3 applications.

Taking the code from there, here are the essentials of what is at that link.

First, add some code to your HtmlHelperExtensions:

public static class HtmlHelperExtensions
{
    public static ScriptTag BeginHtmlTemplate(this HtmlHelper helper, string id)
    {
        return new ScriptTag(helper, "text/html", id);
    }
}

public class ScriptTag : IDisposable
{
    private readonly TextWriter writer;

    private readonly TagBuilder builder;

    public ScriptTag(HtmlHelper helper, string type, string id)
    {
        this.writer = helper.ViewContext.Writer;
        this.builder = new TagBuilder("script");
        this.builder.MergeAttribute("type", type);
        this.builder.MergeAttribute("id", id);
        writer.WriteLine(this.builder.ToString(TagRenderMode.StartTag));
    }

    public void Dispose()
    {
        writer.WriteLine(this.builder.ToString(TagRenderMode.EndTag));
    }
}

Now you can use it like an Html.BeginForm():

@using (Html.BeginHtmlTemplate("person-template"))
{
    <h3>Heading</h3>
    <p>Credits: <span></span></p>
}

Voila! Syntax highlighting by hiding the relevant parts from Visual Studio.

Upvotes: 4

Related Questions