Asp.net-Mvc

有條件地在 webgrid 中顯示圖像 - mvc 3

  • October 23, 2011

在我的 webgrid 中,我需要根據值顯示圖像.. 程式碼如下

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

我不確定如何if在 webgrid 中使用。我剛試過。它不工作。得到以下錯誤

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

grid.Column方法的format參數中,您將組合一個 lambda 表達式,以便您當然可以使用if. @但問題是當您在 Razor 中處於“程式碼模式”時,您無法使用它來輸出 HTML。所以你需要將圖像標籤創建包裝到一個 HtmlHelper 中(就像內置Html.ActionLink有很多範例一樣)或使用 HTML.Raw 方法返回 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" }))
       ));

同樣在最後一行而不是new { photoID = @item.Id }你應該寫new { photoID = item.Id }

要了解更多關於剃須刀的資訊,這裡有一個詳細的教程

引用自:https://stackoverflow.com/questions/7866051