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?

Answer 1

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

Answer 2

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>

Answer 3

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)