Conditionally display an image in webgrid - mvc 3

Question

In my webgrid I need to display images based on the value .. Code is given below

@model TraktorumMVC.Models.ManagePhotos
@{
    ViewBag.Title = "ManagePhotos";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var grid = new WebGrid(Model.AdPhotos);
}


    @grid.GetHtml(
       displayHeader: false,
       columns: grid.Columns(
             grid.Column(format: (item) =>
                 {
                     if (item.IsMainPreview == true)
                     {
                         return @<text><img src="@Url.Content("~/Content/images/preview-photo.gif")" alt="Image "/></text>;
                     }
                     else
                     {
                         return @<text><img src="@Url.Content("~/Content/images/non-preview-photo.gif")" alt="Image "/></text>;
                     }
                 }
                ),               
             grid.Column(format: (item) => Html.ActionLink("Remove Photo", "RemovePhoto", "Images", new { photoID = @item.Id }, new { @class = "RemovePhoto" }))
         ));

I am not sure how can i use if in webgrid . I just tried that .Its not working .getting following error

The best overloaded method match for 'System.Web.Helpers.WebGrid.Column(string, string, System.Func<dynamic,object>, string, bool)' has some invalid arguments

Answer 1

In thegrid.Column method's format parameter you are putting together a lambda expression so that you can of course use if. But the problem is you cannot use @ when you are in "code mode" in Razor to output HTML. So you need to wrap the image tag creation into an HtmlHelper (like the built in Html.ActionLink there are lots of examples) or use the HTML.Raw method to return HTML:

@grid.GetHtml(
    displayHeader: false,
    columns: grid.Columns(
            grid.Column(format: (item) =>
                {
                    if (item.IsMainPreview == true)
                    {
                        return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/Content/images/preview-photo.gif")));
                    }
                    else
                    {
                        return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/Content/images/non-preview-photo.gif")));                         
                    }
                }
            ),               
            grid.Column(format: (item) => Html.ActionLink("Remove Photo", "RemovePhoto", "Images", new { photoID = item.Id }, new { @class = "RemovePhoto" }))
        ));

Also in the last line instead of new { photoID = @item.Id } you should write new { photoID = item.Id }
To learn more about razor here is a detailed tutorial.