尝试根据URL路径中的条件替换css代码

时间:2013-11-05 17:16:03

标签: asp.net-mvc-3 asp.net-mvc-4

我正在尝试在CSS中替换<fieldset>班级。通常情况下@helper函数可以正常工作(请参阅下面的@helper),但是我有两(2)种情况不允许它正常工作。

首先,我在Input.Edit.cshtml中使用~/Views/EditorTemplates/Fields字段模板。

这基本上意味着当我构建表单时,Input.Edit.cshtml文件每次都会被调用<input>,就像我在表单中一样。{/ p>

其次,我使用条件来检查URL的路径,以便仅在特定路径下的页面上应用此CSS交替类。具体来说,我想将此更改应用于~/Services路径下的网页。在所有其他页面上,我不希望应用更改。我使用Request.Url.AbsoluteUri检查了这种情况,如下所示。

这就是我认为我的问题所在,因为应用了交替代码但是因为在同一页面上再次调用它因为我的逻辑而被错误地应用。

现在可能是我遇到了这个问题。

以下是代码:

@{
    string CurrentUrl = Request.Url.AbsoluteUri;
}

@helper ResponsiveCss(string cssClass)
{
    if (ViewBag.count == null) { ViewBag.count = 0; }
    <text>class="@(ViewBag.count % 2 == 1 ? cssClass : "one-half last")"</text>
    ViewBag.count++;
}

@if (CurrentUrl.Contains("Services"))
{ 
    <fieldset @ResponsiveCss("one-half")>

        //Label and Input code

    </fieldset>
}

应该发生的是class="one-half"应用于在表单中创建的第一个<fieldset>,然后在创建的第二个class="one-half last"上应用。{/ p>

相反,正在发生的事情是class="one-half" NOT 应用于创建的第一个<fieldset>,而是 ALL {{1正在使用<fieldset>创建。

很抱歉,如果不清楚的话。考虑到情况(以及如何),我是否能够完成这项工作?感谢。

1 个答案:

答案 0 :(得分:0)

希望这可以解决您的问题。

交替风格

您可以使用nth-of-type或nth-child伪类,而不是交替使用类名。

fieldset:nth-of-type(odd) {}
fieldset:nth-of-type(even) {}

请参阅此示例:http://jsfiddle.net/cx9UG/

注意:这些伪类也可用于JQuery选择器和文档选择器(querySelector和querySelectorAll)

CSS取决于网址

这取决于视图,这确实是CSS。只需创建两个CSS包,然后应用于相应的视图。

  • 以交替格式@Styles.Render("~/Content/alternating")
  • 查看
  • 查看没有交替格式@Styles.Render("~/Content/mono")

EditorTemplate不需要知道URL。