Javascript CSS/Less中的Razor？

我有一个视图，其中我创建了一个容器并用一些东西填充它。容器名称被传递给视图，因此我的控制器类似于：

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

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

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

然后我在另一个视图中这样调用：

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

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

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

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

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

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

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

#@包装袋{
...
}
功能添加产品（容器，o）{
var ul=$（container.find（'ul'）；
ul.附加（无论什么）；
}
$（函数（）{
@foreach（模型中的var项目）{
@：AddProduct（“#@ViewBag.Container”，{whater:item.whater}）；
}
});

我的问题是，现在我正在从页面中剥离所有Javascript/Css，将其放入自己的文件中，我不知道如何让Razor编写必要的容器名称

---

有人想过吗？

使用。

使用。

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

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

---

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

我不太明白javascript的意义。这个javascript所做的一切就是订阅DOM就绪事件，找到具有指定id的div，然后找到其中的ul，然后在模型中循环并向其添加一些属性。为什么不直接在服务器上生成标记？这将变得容易得多：

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

---

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

这篇文章提出了一个非常好的解决方案。这就给我留下了一个问题，那就是如何支持更少的人，但是这个答案可能会出现。

这篇文章为这个问题提供了一个很棒的解决方案。这就给我留下了一个问题，即如何支持更少的内容，但这个答案可能会出现

我生成对javascript函数的调用，将内容添加到列表中，而不是直接向列表中添加内容，因为该函数在其他地方也被ajax调用，因此，它提供了一个用于添加到列表的统一接口I生成对javascript函数的调用，以将内容添加到列表中，而不是直接将内容添加到列表中，因为该函数也被其他地方的ajax调用调用，因此它提供了一个用于添加到列表的统一接口，试图确定它是否可以用于CSS。我还有一个问题，我不想硬编码

背景图像中的路径：url（…）

试图弄清楚它是否可以用于CSS。我还有一个问题，我不想在

背景图像中硬编码路径：url（…）