Question

我一直在使用jQuery模板，我非常喜欢使用它。 IDE观点的唯一缺点是脚本标记内缺少HTML IntelliSense。有没有办法愚弄VS2010，以便模板脚本标签内的标记获得IntelliSense和语法高亮？

Answer 1

我为ASP.NET MVC 3创建了一个帮助方法，其工作方式与此类似，受Html.BeginForm的启发：

在视图中

：

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

@using范围内的任何内容都将突出显示语法。

帮助者的代码：

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

我通过创建简单的自定义服务器端控件（适用于ASP.NET 4 WebForms应用程序）解决了这个问题：

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

}

并将每个jquery模板放入其中（而不是<script>标记）：

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

将在HTML中呈现为：

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

Answer 3

我不认为你可以，除非你欺骗编辑器不知道你正在写一个脚本标签，比如在代码中编写它（HTML帮助器等）。我会通过暂时更改标签名称（或评论它）并在完成后将其恢复来解决它。当然这是一个愚蠢的解决方案。

您可以做的另一件事是使用script之类的其他标记，而不是使用div标记，将style设置为display:none。它应该以完全相同的方式工作（例如在this article中间。）

Answer 4

如果你正在使用MVC，你可以像这样为HtmlHelper创建一个扩展方法：

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

使用

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

你将获得完整的语法着色和intellisense。（但是，VS可能会警告html元素的无效嵌套，具体取决于模板的组成）

Answer 5

另一个WebForms解决方案，不像Rusted的解决方案那样彻底或优雅，但我将这两个函数放在一个BasePage类中，其他所有页面都继承该类：

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

然后在我的aspx中：

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

文本/ x-jquery-tmpl脚本模板中的VS2010 IntelliSense

5 个答案: