2011-10-23 16 views
10

W moim WebGrid muszę do wyświetlania obrazów na podstawie wartości .. Kod znajduje się poniżejWarunkowo wyświetlanie obrazu w WebGrid - MVC 3

@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" })) 
     )); 

nie jestem pewien, w jaki sposób można wykorzystać if w WebGrid. Ja tylko starałem że .Its nie działa .getting następujący błąd

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

Odpowiedz

23

w grid.Column metody badaniem format parametru wkładacie razem wyrażenia lambda, dzięki czemu można oczywiście użyć if. Ale problem polega na tym, że nie możesz używać @, gdy jesteś w "trybie kodu" w Razor, aby wyprowadzać HTML. Więc trzeba owinąć utworzenie znacznika obrazu do HtmlHelper (jak wbudowany Html.ActionLink istnieje wiele examples) lub użyć metody HTML.Raw powrócić 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" })) 
     )); 

Również w ostatnim wierszu zamiast new { photoID = @item.Id } powinieneś napisać: new { photoID = item.Id } Aby dowiedzieć się więcej o maszynce do golenia, poniżej znajduje się szczegółowy tutorial.

+0

Świetne, dzięki za ten kod! – juFo

+0

Działa to świetnie w MVC3. Czy wiesz, jak zmusić go do pracy w MVC4 bez URL.Content. Opublikowalem nowe pytanie. http://stackoverflow.com/questions/13711753/conditionally-display-an-image-in-webgrid-mvc-4 – Joe

+0

Głosowałem za tym w przeszłości i to mi pomogło. Gdybym mógł, dałbym ci 100 głosów! : D –