VB - ASP.NET MVC 3 Razor 渲染额外空白

Question

我在下面的锚标记水平列表中呈现了额外的空白字符。这给我带来了一个主要的 CSS 样式问题。

我知道就 C# 解决方法而言，这个问题已经得到解决（asp.net mvc剃刀额外空间），但是有人可以帮助我解决VB问题吗？我没有花括号的优势来消除单行 If 条件中的所有空格。

我现在已经设法通过编写 HtmlHelper 扩展方法来解决这个问题，但是这个动态代码仅在一个地方使用（主布局页面）。在我看来，这确实应该在 .vbhtml 页面中完成。也欢迎任何反对这一观点的论据。

这是错误的代码，以及注释掉的解决方法尝试。目标是基于站点地图创建“同级”页面的水平列表，当前页面的链接及其之前的链接的样式略有不同。

@If Not (SiteMap.CurrentNode Is Nothing OrElse SiteMap.CurrentNode.ParentNode Is Nothing OrElse SiteMap.CurrentNode.ParentNode.ChildNodes.Count = 0) Then
    @<div id="contentPageMenu">
    @For Each childNode As SiteMapNode In SiteMap.CurrentNode.ParentNode.ChildNodes
        @* GENERATES AN EXTRA SPACE BETWEEN EVERY a TAG! *@
        If childNode Is SiteMap.CurrentNode Then
            @<a class="top_menu_button top_menu_button_selected" href="@childNode.Url">@Trim(childNode.Title)</a>
        ElseIf childNode.NextSibling Is SiteMap.CurrentNode Then
            @<a class="top_menu_button top_menu_button_before_selected" href="@childNode.Url">@Trim(childNode.Title)</a>
        Else
            @<a class="top_menu_button" href="@childNode.Url">@Trim(childNode.Title)</a>
        End If

        @*
        STILL GENERATES EXTRA WHITESPACE!
        If childNode Is SiteMap.CurrentNode Then @<a class="top_menu_button top_menu_button_selected" href="@childNode.Url">@Trim(childNode.Title)</a>ElseIf childNode.NextSibling Is SiteMap.CurrentNode Then @<a class="top_menu_button top_menu_button_pre_selected" href="@childNode.Url">@Trim(childNode.Title)</a>Else @<a class="top_menu_button" href="@childNode.Url">@Trim(childNode.Title)</a>End If
        *@

        @*
        CAN'T PARSE a OR If STATEMENTS!
        @<a class=@If childNode Is SiteMap.CurrentNode Then @<text>"top_menu_button top_menu_button_selected"</text> ElseIf childNode.NextSibling Is SiteMap.CurrentNode Then @<text>"top_menu_button top_menu_button_pre_selected"</text> Else @<text>"top_menu_button"</text> End If@<text> href="</text>@childNode.Url@<text>"></text>@Trim(childNode.Title)@</a>
        *@
    Next
    </div>
End If

PS - 我知道我仍然需要处理 MVC 的“规范 URL”问题，但这超出了这个问题的范围。

这是问题的直观示例。箭头是位于右上角的背景图像。

以下是用于设置这些按钮样式的 CSS：

a.top_menu_button
{
    background: url(../Images/top_menu_separator.gif) no-repeat right top #01376a;
    color: #ffffff;
    display: inline-block;
    font-family: inherit;
    font-size: 1.0em;
    font-weight: bolder;
    height: 20px;
    margin: 0;
    padding: 2px 15px 2px 10px;
    position: relative;
    text-decoration: none;
    top: 0;
    white-space: nowrap;
}

a.top_menu_button:hover
{
    font-family: inherit;
    font-style: italic;
}

a.top_menu_button_before_selected
{
    background: url(../Images/top_menu_separator_before_selected.gif) no-repeat right top #01376a;
}

a.top_menu_button_selected
{
    background: url(../Images/top_menu_separator_after_selected.gif) no-repeat right top #b9aa64;
    color: #01376a;
    font-family: inherit;
    font-style: italic;
}

Answer 1

尝试使用 @Code/@End Code 块和 @: 转义符。此外，如果您为使用 If/Then/Else 逻辑确定的事物创建一个变量，它可能会更具可读性。

@Code
If Not (SiteMap.CurrentNode Is Nothing OrElse SiteMap.CurrentNode.ParentNode Is Nothing OrElse SiteMap.CurrentNode.ParentNode.ChildNodes.Count = 0) Then
    @:<div id="contentPageMenu">
    For Each childNode As SiteMapNode In SiteMap.CurrentNode.ParentNode.ChildNodes
        Dim aClassValue As String = ""
        If childNode Is SiteMap.CurrentNode Then
            aClassValue = "top_menu_button top_menu_button_selected"
        ElseIf childNode.NextSibling Is SiteMap.CurrentNode Then
            aClassValue = "top_menu_button top_menu_button_before_selected"        
        Else
            aClassValue = "top_menu_button"
        End If
        @:<a class="@aClassValue" href="@childNode.Url">@childNode.Title.Trim()</a>
    Next
    @:</div>
End If
@End Code

顺便说一句，这是 HTML - 空格不重要。您确定这确实给您带来了问题吗？

-- 编辑 --

现在我看到了你的 CSS，问题就清楚了。您正在使用 inline-block，这意味着空白在渲染中很重要，这就是您所发现的。您可以通过多种方式解决此问题，可以通过 CSS，也可以不在 Razor 中。

1. 您可以将 float: left; 添加到您的 a.top_menu_button 类中，这将解决该问题。或者...
2. 您可以采用外部
   并为其指定样式 style="word-spacing: -1em"。然后，将 word-spacing: 0; 添加到您的 a.top_menu_button 类中，这也将解决问题。

尝试谷歌搜索“显示内联块空白”，您会得到多次有关问题和样式解决方法的点击。 这个 和 这个两者都清晰简洁地描述了问题以及解决问题的一些方法。