Razor in CSS/Less?

Razor in CSS/Less?

本文关键字：Less CSS in Razor      更新时间：2023-09-26

我有一个视图，我创建了一个容器，并填充了一些东西。容器名称被传递给视图，所以我的控制器看起来像这样:

public ActionResult Index(string Container = "Products")
{
    ViewBag.Container = Container;
    return PartialView();
}

然后我在另一个视图中调用它，像这样:

@Html.Action("Index", "Product", new { Container = "LatestProducts" })

视图将其CSS和Javascript包含在同一个页面上，如下所示:

<div id="@ViewBag.Container">
  <div class="New"></div>
  <ul></ul>
</div>
<style>
#@ViewBag.Container {
  ...
}
</style>
<script>
    function AddProduct(container, o) {
        var ul = $(container).find('ul');
        ul.append(o.whatever);
    }
    $(function() {
        @foreach (var item in Model) {
           @: AddProduct('#@ViewBag.Container', { whatever: item.whatever });
        }
    });
</script>

我的问题是，现在我撕下所有的Javascript/Css页面把它放到自己的文件，我不知道如何让Razor写必要的容器名称…

的想法吗?

我不太明白你的javascript的意义。这个javascript所做的就是订阅DOM ready事件，找到具有指定id的div，然后在其中找到ul，然后循环遍历模型并为其添加一些属性。为什么不在服务器上直接生成标记呢?这样就容易多了:

@model IEnumerable<MyViewModel>
<div id="@ViewBag.Container">
    <div class="New"></div>
    <ul>
        @Html.DisplayForModel()
    </ul>
</div>

，在相应的显示模板(~/Views/Shared/DisplayTemplates/MyViewModel.cshtml)中:

@model MyViewModel
@Html.DisplayFor(x => x.Whatever)

就CSS而言，你可以将所有可能的样式包含在单独的CSS文件中，该文件将只在客户端浏览器上提供和缓存一次。因此，即使它会更大，它将比使用动态规则更快。

这篇文章《Dynamic Stylesheets Using Razor》提出了一个很棒的解决方案。这给我留下了如何支持Less的问题，但答案可能会出现

使用RazorJS

相关文章：