css - ASP MVC - 将 CSS 图像精灵放入视图

Question

我有一个巨大的 css 文件（Content/Site.css），其中还包括 200 多行的精神。

我想制作一个 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净MVC 4.5

更新 ：

• 将 CSS 文件拆分为 2 个文件，sprite 和其余文件
• 使用 CSS Parser 从控制器读取精灵 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();
    }

查看：（CSS解决方案-我用这个）

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

查看：（表格解决方案 - 每行 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>