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

Answer 1

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)

Answer 2

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()%>

Answer 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).

Answer 4

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 5

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