Showing Images Using XML in MVC 4

The following procedure can be used to create a sample of showing images using XML in MVC 4.

Step 1

Create a new project as in the following:

mvc web application
Image 1

internet application
Image 2

Step 2

Now, I add a new folder MyAlbum and I add some images like the following:

myalbum folder
Image 3

Step 3

Now, right-click on the project in Solution Explorer then seelct Add New Item -> Choose a XML.

image information
Image 4

Step 4

My ImageInformation.xml is:

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <images>  
  3.   <image>  
  4.     <filename>ICC.jpg</filename>  
  5.     <description>Indian Team</description>  
  6.   </image>  
  7.   <image>  
  8.     <filename>Kapil.jpg</filename>  
  9.     <description>Indian Team</description>  
  10.   </image>  
  11.   <image>  
  12.     <filename>MSD.jpg</filename>  
  13.     <description>Indian Team</description>  
  14.   </image>  
  15.   <image>  
  16.     <filename>MSD2.jpg</filename>  
  17.     <description>Indian Team</description>  
  18.   </image>  
  19.   <image>  
  20.     <filename>MSD3.jpg</filename>  
  21.     <description>Indian Team</description>  
  22.   </image>  
  23.   <image>  
  24.     <filename>MSD4.jpg</filename>  
  25.     <description>Indian Team</description>  
  26.   </image>  
  27.   <image>  
  28.     <filename>Raina.jpg</filename>  
  29.     <description>Indian Team</description>  
  30.   </image>  
  31.   <image>  
  32.     <filename>Sachin.jpg</filename>  
  33.     <description>Indian Team</description>  
  34.   </image>  
  35.   <image>  
  36.     <filename>Team.jpg</filename>  
  37.     <description>Indian Team</description>  
  38.   </image>  
  39.   <image>  
  40.     <filename>Team2.jpg</filename>  
  41.     <description>Indian Team</description>  
  42.   </image>  
  43. </images>  

Step 5

Now, right-click on the Model Folder and select Add New Item -> Add New Class -> ImageListing.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace Showing_Images_Using_XML_in_MVC_4.Models  
  7. {  
  8.     public class ImageListing  
  9.     {  
  10.         public ImageListing(string path, string desc)  
  11.         {  
  12.             Path = path;  
  13.             Description = desc;  
  14.         }  
  15.   
  16.         public string Path { getset; }  
  17.         public string Description { getset;}  
  18.     }  
  19. }  

Step 6

Now, right-click on the Model Folder and select  Add New Item -> Add New Class -> ImageModel.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Xml.Linq;  
  6.   
  7. namespace Showing_Images_Using_XML_in_MVC_4.Models  
  8. {  
  9.     public class ImageModel : List<ImageListing>  
  10.     {  
  11.         public ImageModel()  
  12.         {  
  13.             string directoryOfImage = HttpContext.Current.Server.MapPath("~");  
  14.             XDocument imageData = XDocument.Load(directoryOfImage + @"/ImageInformation.xml");  
  15.             var images = from image in imageData.Descendants("image") select new ImageListing(image.Element("filename").Value, image.Element("description").Value);  
  16.             this.AddRange(images.ToList<ImageListing>());  
  17.         }  
  18.     }  
  19. }  

Step 7

Now, right-click on Controller and select Add New Controller.

controller
Image 5

controller name
Image 6

Step 8

The Image DirectoryController is:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using Showing_Images_Using_XML_in_MVC_4.Models;  
  7.   
  8. namespace Showing_Images_Using_XML_in_MVC_4.Controllers  
  9. {  
  10.     public class ImageDirectoryController : Controller  
  11.     {  
  12.         //  
  13.         // GET: /ImageDirectory/  
  14.   
  15.         public ActionResult Index()  
  16.         {  
  17.             return View(new ImageModel());  
  18.         }  
  19.   
  20.     }  
  21. }  

Step 9

Now right-click on Index and select Add New View.

view name
Image 7

Step 10

Do the following code in your View:

  1. @model IEnumerable<Showing_Images_Using_XML_in_MVC_4.Models.ImageListing>  
  2.   
  3. @{  
  4.     ViewBag.Title = "Showing Image Using XML in MVC 4";  
  5. }  
  6. @foreach (var item in Model)  
  7. {  
  8.     <img src="@Url.Content("~/MyAlbum/")@item.Path" height="100"  />  
  9. }  

Step 11

Now run your application.

image directory
Image 8

 

Up Next
    Ebook Download
    View all
    Learn
    View all