ASP MVC - CSS Image Sprites into a View - css

Question

I have a huge css file (Content/Site.css) which includes also more than 200 lines of spirits.
I wanna make a View/PartialView which shows all my sprites images ( many divs ) .
How I do it?
How to read and parse css file in code behind from a controller and then put my result into a ViewBag?
Or there is no need to parse from server side and just show it from client side?
div.feedImgPop,
div.feedImg,
div.feedImgList { background: url("http://xxx/Sprite.jpg") top left no-repeat; }
div.a{ background-position:0 0; }
div.b{ background-position:0 -43px; }
... 200 lines..
asp net mvc 4.5
Update :
Splited CSS file into 2 files , sprite and the rest
Used CSS Parser to read the sprite css file from a controller
Show the sprite images as shown below

Answer 1

I used this css parser
Controller :
public ActionResult Admin()
{
parser.ReadCSSFile(Server.MapPath("~/Content/Sprite.css"));
var cssItems = new List<String>(cssList.Count);
foreach (var item in cssList) cssItems.Add(item.Key.Replace("div.", ""));
ViewBag.items = cssItems;
return View();
}
View : ( CSS Solution - I use this )
<div class="wrapper">
<div class="container">
#foreach (var item in ViewBag.items)
{
string className = "imgContainer imgHover feedImgPop " + #item;
<div class="#className" onClick="adminChooseSpriteImage('#className')"></div>
}
</div>
</div>
View : (Table Solution - 10 items each row ; previous test )
<div id="feedsContainer">
#{
int rowNumber = 1;
<table>
<tr>
#foreach(var item in ViewBag.items)
{
if (rowNumber % 11 == 0)
{
<tr></tr>
}
else
{
string className = "imgContainer imgHover feedImgPop " + #item;
<td><div class="#className"></div></td>
}
rowNumber++;
}
</tr>
</table>
}
</div>