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

score 25 · Accepted Answer · answered Oct 23 '11 at 13:12

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.

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. http://stackoverflow.com/questions/13711753/conditionally-display-an-image-in-webgrid-mvc-4 — Joe, Dec 04 '12 at 20:56
I voted this one in the past and it just helped me again. If I could I'd give you 100 votes! :D — Leniel Maccaferri, Jan 12 '13 at 21:32
@LenielMacaferi I'm glad that my answer helped you :) you know that there is a [bounty system on SE](http://meta.stackexchange.com/questions/16065/how-does-the-bounty-system-work) ;) — nemesv, Jan 13 '13 at 07:43
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. :) — Leniel Maccaferri, Jan 13 '13 at 19:32
Great, I struggled for more than one hour to get this.. thanks — sivaL, Jul 29 '13 at 11:09

Conditionally display an image in webgrid - mvc 3

1 Answers1

Linked