ASP MVC - CSS图像精灵到视图

Question

我有一个巨大的css文件(Content/Site.css)，其中也包括200多行spirits

我想创建一个View/PartialView来显示我所有的精灵图像(许多div)。

我怎么做?

如何读取和解析css文件背后的代码从控制器，然后把我的结果到ViewBag?

或者不需要从服务器端解析，只从客户端显示它?

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行. .

• asp.net mvc 4.5

更新:

• 将CSS文件拆分为2个文件，sprite和其余的
• 使用CSS解析器从控制器读取精灵CSS文件
• 显示如下所示的精灵图像

Answer 1

我使用了这个css解析器

控制器:

    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项;以前的测试)

<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>