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;
  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. }
  16. public string Path { get; set; }
  17. public string Description { get; set;}
  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;
  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;
  8. namespace Showing_Images_Using_XML_in_MVC_4.Controllers
  9. {
  10. public class ImageDirectoryController : Controller
  11. {
  12. //
  13. // GET: /ImageDirectory/
  15. public ActionResult Index()
  16. {
  17. return View(new ImageModel());
  18. }
  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>
  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