VS2010 IntelliSense inside text/x-jquery-tmpl script templates

Question

I've been using jQuery templates which I absolutely love to use. The only drawback from an IDE standpoint is the lack of HTML IntelliSense inside the script tag. Is there a way to fool VS2010 so that markup inside template script tags get IntelliSense and syntax highlighting?

Are you using ASP.NET MVC By any chance? – Andrew Whitaker Jan 25 '11 at 23:27 — Andrew Whitaker, Jan 25 '11 at 23:27
This appears to be fixed in VS2012 – Keith Jul 10 '13 at 08:19 — Keith, Jul 10 '13 at 08:19

Can Gencer · Answer 1 · 2012-02-04T20:55:02.950

I created a helper method for ASP.NET MVC 3 that works like this, inspired by Html.BeginForm:

within the view:

@using (Html.BeginHtmlTemplate("templateId"))
{
    <div>enter template here</div>
}

Anything within the @using scope will be syntax highlighted.

The code for the helper:

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));
    }
}

This is the best, most elegant answer. It should get voted up. — adoss, Mar 20 '12 at 15:08

score 4 · Answer 2 · answered Oct 20 '11 at 13:25

I'd solved this issue by creating simple custom serverside control (for ASP.NET 4 WebForms app.):

[ToolboxData("<{0}:JqueryTemplate runat=server></{0}:JqueryTemplate>")]
[PersistChildren(true)]
[ParseChildren(false)]
public class JqueryTemplate : Control {
    private bool _useDefaultClientIdMode = true;

    [DefaultValue(ClientIDMode.Static)]
    [Category("Behavior")]
    [Themeable(false)]
    public override ClientIDMode ClientIDMode {
        get {
            return (_useDefaultClientIdMode) ? ClientIDMode.Static : base.ClientIDMode;
        }
        set { 
            base.ClientIDMode = value;
            _useDefaultClientIdMode = false;
        }
    }

    protected override void Render(HtmlTextWriter writer) {
        writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/x-jquery-tmpl");
        writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID);
        writer.RenderBeginTag(HtmlTextWriterTag.Script);
        base.Render(writer);
        writer.RenderEndTag();          
    }

}

and put each jquery template inside it (instead of <script> tag):

<some:JqueryTemplate runat="server" ID="myTemplateId"> 
... your template code goes here ...
</some:JqueryTemplate>

will rendered it in HTML as:

<script type="text/x-jquery-tmpl" id="myTemplateId">
... your template code goes here ...
</script>

Meligy · Answer 3 · 2013-04-18T05:02:12.377

3

I don't think you can unless you trick the editor to not know you are writing a script tag, like writing it in code (HTML helper or so). I'd work around it by changing the tag name (or commenting it) temporarily and bringing it back after I'm done. Sure that's a silly solution.

One other thing you can do is instead of using script tag, use any other tag like div setting it's style to display:none. It should work exactly the same way (example in middle of this article).

edited Apr 18 '13 at 05:02

answered Feb 22 '11 at 01:29

Meligy

35,654
11
85
109

You are very welcome. So, can you mark the answer if it is the correct answer for the question? Thanks a lot. – Meligy Feb 22 '11 at 15:45
rendering it as hidden div might have side effects as the browser is then going to parse the contents. another solution is to have them in a separate file and remove the script tags from the file. then render the script tags from outside via httphandler or code. – Mrchief Feb 28 '11 at 19:17
Which has the side effect of little extra work for handler and extra request but also maybe it can be cached later. Yeah. Every option sure has advantages and disadvantages... – Meligy Feb 28 '11 at 21:33
1

Haven't tried it yet but I was thinking about making a partial view in mvc which contains the template without the script tags and then rendering it with html.partial inside of the script tags. – Jack Woodward Aug 14 '11 at 03:46
depending on the size of the template, that would be a really nice idea too. – Meligy Aug 14 '11 at 05:20
-1 If you wrap a template in a div, you get unpredictable results when you retrieve the text via $.html(), see here for example: http://stackoverflow.com/a/16060866/740639 – Walter Stabosz Apr 17 '13 at 13:06

score 3 · Answer 4 · answered Oct 08 '11 at 12:05

If you're using MVC you can make an extension method for the HtmlHelper like this:

public static class HtmlExtensions
{
     public static MvcHtmlString Template(this HtmlHelper htmlHelper, string id, Func<dynamic, HelperResult> content)
     {
         var sb = new StringBuilder();
         sb.AppendFormat("<script type='text/html' id='{0}'>", id);
         sb.Append(content(null));
         sb.Append("</script>");

         return new MvcHtmlString(sb.ToString());
     }
}

Use like

@Html.Template("whatever", @<text>
    <tr><td>template stuff here</td></tr>
</text>)

You'll get full syntax coloring and intellisense that way. (though, VS might warn about invalid nesting of html elements depending on what your templates consist of)

score 0 · Answer 5 · answered Apr 17 '13 at 13:15

Another WebForms solution, not as thorough or elegant as Rusted's solution, but I drop these two functions inside of a BasePage class from which all my other pages inherit:

Public Function Template(ByVal id As String) As String
    ' the type attribute does not matter as long as it's not "text/javascript"
    Return "<script id='" + id + "' type='text/template'>"
End Function

Public Function Template() As String
    Return "</script>"
End Function

Then in my aspx:

 <%= Template("templateID")%>
     ... your template code goes here ...
 <%= Template()%>

VS2010 IntelliSense inside text/x-jquery-tmpl script templates

5 Answers5

Linked