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.