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

Solution

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.

Comments

[Joe]

This works great in MVC3. Would you know how to get it to work in MVC4 without the URL.Content. I've posted a new question. stackoverflow.com/questions/13711753/…

[Leniel Maccaferri]

I voted this one in the past and it just helped me again. If I could I'd give you 100 votes! :D

[nemesv]

@LenielMacaferi I'm glad that my answer helped you :) you know that there is a bounty system on SE ;)

[Leniel Maccaferri]

Yes, I know. The bounty system is for the case when there's no accepted answer and one wants someone else to give a better answer to that unanswered question. :)

[sivaL]

Great, I struggled for more than one hour to get this.. thanks