0

我有一个巨大的 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 文件
  • 显示精灵图像,如下所示
4

1 回答 1

0

我使用了这个 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>
于 2013-04-10T00:08:20.293 回答