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