Showing Images Using XML in MVC 4

In this article I am going to show how we can show Images using XML in MVC 4.

I am going to create a new Project:

Image 1.

Image 2.

Now I add a New folder MyAlbum  and I add some images like below:

Image 3.

Now Right Click on Solution Explorer -> Add New Item -> Choose a XML

Image 4.

My ImageInformation.xml is:

<?xml version="1.0" encoding="utf-8" ?>
<images>
  <image>
    <filename>ICC.jpg</filename>
    <description>Indian Team</description>
  </image>
  <image>
    <filename>Kapil.jpg</filename>
    <description>Indian Team</description>
  </image>
  <image>
    <filename>MSD.jpg</filename>
    <description>Indian Team</description>
  </image>
  <image>
    <filename>MSD2.jpg</filename>
    <description>Indian Team</description>
  </image>
  <image>
    <filename>MSD3.jpg</filename>
    <description>Indian Team</description>
  </image>
  <image>
    <filename>MSD4.jpg</filename>
    <description>Indian Team</description>
  </image>
  <image>
    <filename>Raina.jpg</filename>
    <description>Indian Team</description>
  </image>
  <image>
    <filename>Sachin.jpg</filename>
    <description>Indian Team</description>
  </image>
  <image>
    <filename>Team.jpg</filename>
    <description>Indian Team</description>
  </image>
  <image>
    <filename>Team2.jpg</filename>
    <description>Indian Team</description>
  </image>
</images>
 

Now Right Click on Model Folder -> Add New Item -> Add New Class -> ImageListing

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace Showing_Images_Using_XML_in_MVC_4.Models
{
    public class ImageListing
    {
        public ImageListing(string path, string desc)
        {
            Path = path;
            Description = desc;
        }
 
        public string Path { get; set; }
        public string Description { get; set;}
    }
}

Now Right Click on Model Folder -> Add New Item -> Add New Class -> ImageModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Xml.Linq;
 
namespace Showing_Images_Using_XML_in_MVC_4.Models
{
    public class ImageModel : List<ImageListing>
    {
        public ImageModel()
        {
            string directoryOfImage = HttpContext.Current.Server.MapPath("~");
            XDocument imageData = XDocument.Load(directoryOfImage + @"/ImageInformation.xml");
            var images = from image in imageData.Descendants("image") select new ImageListing(image.Element("filename").Value, image.Element("description").Value);
            this.AddRange(images.ToList<ImageListing>());
        }
    }
}

Now Right Click on Controller -> Add New Controller

Image 5.

Image 6.

Now ImageDirectoryController is:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Showing_Images_Using_XML_in_MVC_4.Models;
 
namespace Showing_Images_Using_XML_in_MVC_4.Controllers
{
    public class ImageDirectoryController : Controller
    {
        //
        // GET: /ImageDirectory/
 
        public ActionResult Index()
        {
            return View(new ImageModel());
        }
 
    }
}
 
Now Right Click on Index -> Add New View

Image 7.

Do below code in your View:

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

 
Now Run your application:

Image 8.