2013-11-05 40 views
0

以使用mvc4的移動應用程序的幻燈片形式顯示圖像。使用mvc4以移動應用程序的幻燈片形式顯示圖像

我正在控制這些圖像的物理路徑到一個數組[]中。我想通過該數組來查看。我想將這些圖像顯示爲幻燈片。

這裏是我的代碼

控制器代碼:

public ActionResult Index() 
    { 
     var imageFiles = new Mobile.Models.DisplayImages.ImageModel(); 
     imageFiles.Images.AddRange(System.IO.Directory.GetFiles(@"E:\05-11\New Folder\Images\BannerImages\")); 
     for (int i = 0; i < imageFiles.Images.Count; i++) 
     { 
      // get rid of the fully qualified path name 
      imageFiles.Images[i] = imageFiles.Images[i].Replace(@"E:\05-11\New Folder\Images\BannerImages\", "../../Images/BannerImages/"); 
      // change the slashes for web 
      imageFiles.Images[i] = imageFiles.Images[i].Replace('\\', '/'); 
     } 
     return View(imageFiles); 
    } 

型號代碼:

public class DisplayImages 
{ 
    public class ImageModel 
    { 
     List<string> _images = new List<string>(); 

     public ImageModel() 
     { 
      _images = new List<string>(); 
     } 

     public List<string> Images 
     { 
      get { return _images; } 
      set { _images = value; } 
     } 
    } 
} 

查看代碼:

@for (int imgIndex = 0; imgIndex < Model.Images.Count; imgIndex++){ 
if (imgIndex == 0) 
{ 
    <img class="first" src = "@Model.Images[imgIndex]" alt="No Image"/> 
} 
else 
{ 
    <img src = "@Model.Images[imgIndex]" alt="No Image"/> 
} 

}

您可以根據您的要求在視圖文件中應用樣式。

+0

您需要使用一些javascript插件。如果你使用jQuery,默認情況下在MVC4中有jQuery,你可以使用這個幻燈片:http://wowslider.com/rq/jquery-slideshow/。你有他們的網頁上的用法的例子。 – freshbm

+1

這是一個工作模型,編輯和功能齊全。 –

回答

0

您轉發的同一個問題。我已經回答了。你可以找到在link

溶液被粘貼在這裏任何

如何創建該類的型號

public class ImageModel 
{ 
List<string> _images = new List<string>(); 

    public ImageModel() 
    { 
     _images = new List<string>(); 
    } 

    public List<string> Images 
    { 
     get { return _images; } 
     set { _images = value; } 
    } 
} 

先說,然後在控制器使用下面的代碼

var imageFiles = new ProjectName.Models.ImageModel(); 
imageFiles.Images.AddRange(System.IO.Directory.GetFiles(imagepath)); 
return View(imageFiles); 
解決方案

在查看您使用它作爲

@model ImageModel 
@for (int imgIndex = 0; imgIndex < Model.Images.Count; imgIndex++) 
{ 

if (imgIndex == 0) 
{ 
    <img class="first" src = "@Model.Images[imgIndex]" alt="No Image" "/> 
} 
else 
{ 
    <img src = "@Model.Images[imgIndex]" alt="No Image "/> 
} 
} 

此代碼是我從我身邊試過的一個工作代碼。希望這可能對你有所幫助。在圖像路徑中指定完整路徑,說出文件所在的物理路徑

+0

謝謝Saurabh。前一篇文章被無緣無故擱置。所以我不得不用新標題重新發布它。感謝你的回答。 –