在 ASP.NET MVC Razor 视图中转换 @helper 的输出答案

【问题标题】：Transforming output of a @helper in ASP.NET MVC Razor view在 ASP.NET MVC Razor 视图中转换 @helper 的输出
【发布时间】：2012-09-09 10:30:33
【问题描述】：

是否可以在@helper 的输出上实现自定义转换？我的意思是要找到一个解决方案，让我有一些类似的东西：

@helper RenderCombinedStylesheetsWithColorOverride(string color)
{
    <link rel="stylesheet" type="text/css" href="menu.css" />
    <link rel="stylesheet" type="text/css" href="site.css" />
    <style type="text/css">
        * { color: @color; }
    </style>
}

转折在于帮助器 (RenderCombinedStylesheets...) 的名称，它暗示了我想在这里做的事情。也就是说，获取帮助程序的正常 HTML 编码输出，并将其通过我的自定义代码进行管道传输。在那里，我想把它拆开，然后重新组装，这样最终的输出是一个 <link rel="stylesheet" ... /> 对生成的组合和缩小 css 文件的引用。

请注意，这是一个简化的示例！实际上，有多个参数，并且输出转换不仅限于组合样式表片段。我也想用这种方式生成 JavaScript 代码。

主要目标是想出一些东西，让我能够将普通的 Razor 模板应用到我的视图的特定部分然后在之前对这些部分执行额外的转换发出最终输出。

任何想法表示赞赏！

更新：我偶然发现了this SO 问题，这表明实现此目的的方法是通过普通的 HtmlHelper 扩展。看来我一直对他们的所作所为不完全了解，或者至少低估了他们的力量。我会报告实施情况。

【问题讨论】：

标签： asp.net-mvc razor view-helpers

【解决方案1】：

是的！我在更新的问题中链接的帖子是正确的！这是解决方案：

public static class ResourceCombiningHelper
{
    private static string MakeKey(string type)
    {
        return "CombinableResource" + (type ?? "").ToLowerInvariant();
    }

    public static IHtmlString CombinableResource(this HtmlHelper helper, dynamic template, string type)
    {
        var key = MakeKey(type);
        var context = helper.ViewContext.HttpContext;
        var resources = (List<dynamic>)context.Items[key];

        if (resources == null)
        {
            resources = new List<dynamic> { template };
            context.Items[key] = resources;
        }
        else
        {
            resources.Add(template);
        }

        return new HtmlString(String.Empty);
    }

    public static IHtmlString RenderCombinableResources(this HtmlHelper helper, string type)
    {
        var key = MakeKey(type);
        var context = helper.ViewContext.HttpContext;
        var resources = (List<dynamic>)context.Items[key];

        if (resources != null)
        {
            foreach (var resource in resources)
            {
                if (resource is HelperResult)
                {
                    // Add in-line content to combined resource here.
                }
                else if (resource is string)
                {
                    // Add external reference to combined resource here.
                }
            }
        }

        // Return a single reference to the combined resource (<link>, <script>, etc.)
    }
}

在 Razor 视图中的用法：

@helper ColorOverridingStyle(string color)
{
    <style type="text/css">
        * { color: @color; }
    </style>
}

@{ var color = ViewBag.TextColor; }
@Html.CombinableResource(Url.Content("~/Content/site.css"), "css")
@Html.CombinableResource(Url.Content("~/Content/menu.js"), "js")
@Html.CombinableResource(ColorOverridingStyle(color), "css")

以及最终的 HTML 输出示例：

<head>
    <link href="/Content/combined-css.css" rel="stylesheet" type="text/css" />
    <script src="/Content/combined-js.js" type="text/javascript"></script>
</head>

效果很好！去扩展这个小宝石的极限...... :)

【讨论】：