Calling javascript in webgrid

Question

I am having trouble calling javascript function in webgrid

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

Id the CarrierName has spaces (for ex 'Carrier A') in it, the rendered html is :

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

How do i format the row to give a proper output ?

Darin Dimitrov · Accepted Answer · 2012-01-01 17:56:45Z

3

You could try JSON encoding it:

<%= 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>")
    )) 
%>

But I would try to avoid this tag soup by writing a custom HTML helper that will generate the anchor:

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

and then:

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

edited Jan 1, 2012 at 17:56

answered Jan 1, 2012 at 17:43

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shashank Shekhar Over a year ago

json rendered it as : <a id="test" onclick="alert('"Carrier" A??);="" src="#">

Shashank Shekhar Over a year ago

working with replacing the whitespace with a character. Cannot put the html helper (dont have a say in it )

Anuj Pandey Over a year ago

this method would not be workable with grids, since the Html Extensions are not supported directly. you would need to call the method name from class refrence and not as extension.

Collectives™ on Stack Overflow

Calling javascript in webgrid

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related