在 HtmlHelper 扩展方法中使用匿名对象

Question

我想扩展HtmlHelper，以便使用自定义属性（例如'async'）呈现脚本标签

我想这样使用它

@Html.RenderBundleScript("/mybundleName", new { async = ""})

这是我的代码，它不起作用（特别是，attributes.ToString() 给出：System.Web.Routing.RouteValueDictionary 而不是 async 或 async=''):

public static IHtmlString RenderBundleScript(this HtmlHelper htmlHelper, 
                               string bundlePath, object htmlAttributes)
{
    var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
    string attributesValue = (attributes == null) ? 
                             string.Empty : attributes.ToString();
    if (string.IsNullOrEmpty(attributesValue))
    {
        return Scripts.Render(bundlePath);
    }
    else
    {
        //var tag = new TagBuilder("script");
        // tag.MergeAttribute() ???
        return Scripts.RenderFormat("<script src='{0}' " + 
                       attributesValue + 
                       " type='text/javascript'></script>", bundlePath);
    }
}

Answer 1

scripts 类有一个方法Scripts.RenderFormat，它接受一个格式字符串，用于渲染包中的每个脚本。

这对于您的扩展方法可能会派上用场。您可以使用 html 属性为脚本标签创建格式字符串。此格式字符串如下所示：

 <script async="" fooAttrib="1" src="{0}" type="text/javascript"></script>

所以你可以通过实现这个想法来更新扩展方法：

public static IHtmlString RenderBundleScript(this HtmlHelper htmlHelper,
                        string bundlePath, object htmlAttributes)
{
    if (htmlAttributes == null)
    {
        return Scripts.Render(bundlePath);
    }
    else
    {            
        //Create format string for the script tags, including additional html attributes    
        TagBuilder tag = new TagBuilder("script");
        tag.Attributes.Add("src", "{0}");
        tag.Attributes.Add("type", "text/javascript");
        var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
        foreach (var key in attributes.Keys)
        {
            tag.Attributes.Add(key, attributes[key].ToString());
        }                
        var tagFormat = tag.ToString(TagRenderMode.Normal);

        //render the scripts in the bundle using the custom format
        return Scripts.RenderFormat(tagFormat, bundlePath);
    }
}

如果你在下面的行中调用它：

@Html.RenderBundleScript("~/bundles/jqueryval", new {async = "", dummy="1"})

它将呈现此输出：

<script async="" dummy="1" src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script async="" dummy="1" src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

希望对你有帮助！