c# - 在 webgrid 中调用 javascript

Question

我在 webgrid 中调用 javascript 函数时遇到问题

<%= gridColumns.Add(grid.Column("CarrierName", "CarrierName",  
 format: (item) => new HtmlString("<a src='#' id='test'   
onclick=alert('"+item.CarrierName+"');>"+ (string)item.CarrierName + "</a>"))); %>

Id CarrierName 中有空格(对于前“Carrier A”)，呈现的 html 是:

<a id="test" onclick="alert('Carrier" src="#" A?);="">

如何格式化行以提供正确的输出？

Answer 1

你可以试试 JSON 编码:

<%= gridColumns.Add(
    grid.Column(
        "CarrierName", 
        "CarrierName",  
        format: (item) => new HtmlString("<a src='#' id='test' onclick='alert(" + Json.Encode(item.CarrierName) + ");'>" + Html.Encode(item.CarrierName) + "</a>")
    )) 
%>

但我会尝试通过编写一个将生成 anchor 的自定义 HTML 帮助程序来避免这种标记汤:

public static class HtmlExtensions
{
    public static IHtmlString Link(this HtmlHelper htmlHelper, MyViewModel item)
    {
        var anchor = new TagBuilder("a");
        anchor.AddCssClass("test");
        anchor.Attributes["src"] = "#";
        anchor.Attributes["onclick"] = string.Format(
            "alert({0});", Json.Encode(item.CarrierName)
        );
        anchor.SetInnerText(item.CarrierName);
        return new HtmlString(anchor.ToString());
    }
}

然后:

grid.Columns(
    grid.Column(
        "CarrierName",
        "CarrierName",
        format: item => Html.Link((MyViewModel)item.Value)
    )   
)