在查看頁面中未顯示多個圖像

Question

我有以下控制器方法來檢索文件夾中的文件。

public JsonResult filesinfolder(ProductEdit model) 
    { 
     string productid = "01"; 

     string salesFTPPath = "C:/Users/user/Documents/Visual Studio 2015/Projects/rootProject/project_name/project_name/Content/Essential_Folder/marketing_materials_EN/01"; 
     DirectoryInfo salesFTPDirectory = new DirectoryInfo(salesFTPPath); 
     IEnumerable<string> files = salesFTPDirectory.GetFiles() 
      .Where(f => f.Extension == ".xls" || f.Extension == ".xml" || f.Extension == ".jps" || f.Extension == ".jpg" || f.Extension == ".jpeg" || f.Extension == ".png" || f.Extension == ".PNG") 
      .OrderBy(f => f.Name) 
      .Select(f => f.Name); 

     // build urls 
     model.ImageUrls = new List<string>(); 

     foreach (string name in files) 
     { 
      model.ImageUrls.Add(Url.Content("~/Content/Essential_Folder/marketing_materials_EN/" + productid) + "/" + name); 
     } 

     return Json(model, JsonRequestBehavior.AllowGet); 
    } 

然後在視圖頁面使用我下面的標籤以及腳本

<li id="idd"></li>

我展示這些文件腳本

$(document).ready(function() { 
    $.ajax({ 
     type: 'GET', 
     url: '@Url.Action("filesinfolder", "Home")', // don't hardcode 
     dataType: "json", 
     success: function (data) 
     { 
      $.each(data, function (index, item) { 
       var img = $('<img>').attr('src', item); 
       $("#idd").append(img); 
      }); 
     }, 
     error: function (xhr, status, err) { 
     } 
    }); 
}); 

但是使用這個我可以做預覽只有當這個特定的文件夾有一個文件時，當它是多個這些文件中的文件不在這些文件中預覽

Answer 1

更改您的實現以迭代data.ImageUrls作爲控制器操作返回包裝imageUrls的模型對象。

$(document).ready(function() { 
    $.ajax({ 
     type: 'GET', 
     url: '@Url.Action("filesinfolder", "Home")', // don't hardcode 
     dataType: "json", 
     success: function (data) 
     { 
      $.each(data.ImageUrls, function (index, item) { 
       var img = $('<img>').attr('src', item); 
       $("#idd").append(img); 
      }); 
     }, 
     error: function (xhr, status, err) { 
     } 
    }); 
});