razor - @Html Image helper 将图像显示为 html 代码

Question

我在这里查看示例：

http://tinyurl.com/au3vydl

此示例使用帮助程序使用 razor 显示 google 图形图像：

@Html.DrawChart("p", "40,60,40", "250x100", "Pie Chart")

此方法组装正确的代码以返回图表：

<img src='http://chart.apis.google.com/chart?chs=250x100&amp;chd=t:40,60,40&amp;cht=p&amp;chl=Pie Chart' />

但是在浏览器中，这显示为 html 代码，而不是实际图像。如果我将助手输出的完全相同的代码复制到视图中，它会显示得很好。是否需要将@Html.Helper 的输出更改为代码而不是文字字符串？

帮助代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using System.Web.Mvc;

namespace SolarCars.Helpers
{
    public static class GoogleChart
    {
        /// <summary>
        /// Draws the chart.
        /// </summary>
        /// <param name="helper">The helper.</param>
        /// <param name="chartType">Type of the chart.</param>
        /// <param name="chartData">The chart data.</param>
        /// <param name="chartSize">Size of the chart.</param>
        /// <param name="chartLabel">The chart label.</param>
        /// <returns></returns>
        public static string DrawChart(this HtmlHelper helper, string chartType, string chartData, string chartSize, string chartLabel)
        {
            StringBuilder chartHtml = new StringBuilder("<img src='http://chart.apis.google.com/chart?chs=");
            chartHtml.Append(chartSize);
            chartHtml.Append("&amp;chd=t:");
            chartHtml.Append(chartData);
            chartHtml.Append("&amp;cht=");
            chartHtml.Append(chartType);
            chartHtml.Append("&amp;chl=");
            chartHtml.Append(chartLabel);
            chartHtml.Append("' />");

            return chartHtml.ToString();
        }
    }
}

Answer 1

如果您在 @ 或 <%: 块中返回字符串，则结果将自动转义。这是（我认为）MVC1 和 MVC2 之间的变化。解决方案是让您的帮助方法返回 IHtmlString 的实例。

public static IHtmlString DrawChart(...)

然后切换你的 return 以返回一个新的HtmlString

return new HtmlString(chartHtml.ToString());