VB - ASP.NET MVC 3 Razor лишних пробелов отображается - PullRequest
Новая
       1

VB - ASP.NET MVC 3 Razor лишних пробелов отображается

0 голосов
/ 08 июля 2011

Я получаю дополнительные пробельные символы в моем горизонтальном списке тегов привязки ниже. Это вызывает у меня серьезную проблему с CSS-стилем.

Я знаю, что этот вопрос был рассмотрен с точки зрения обходного пути C # ( asp.net mvc бритва дополнительное пространство ), но кто-нибудь может мне помочь с обходным решением VB? У меня нет возможности использовать фигурные скобки, чтобы устранить все пробелы в одной строке, если условие.

Мне удалось обойти это сейчас, написав метод расширения 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

P.S. - Я знаю, что мне все еще нужно решить проблему «канонических URL» для MVC, но это выходит за рамки этого вопроса.

Вот наглядный пример проблемы. Стрелки - это расположенные сверху справа фоновые изображения.

Visual example of broken/working behavior

Вот 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;
}

1 Ответ

1 голос
/ 09 июля 2011

Попробуйте использовать блоки @ Code / @ End Code с @: escape.Кроме того, это может быть более читабельным, если вы сделаете переменную для того, что вы используете для определения логикой 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 - пробел не должениметь значение.Вы уверены, что это действительно вызывает у вас проблемы?

- EDIT -

Теперь, когда я вижу ваш CSS, проблема ясна.Вы используете inline-block, что означает, что пробелы важны при рендеринге, что вы и находите.Вы можете исправить это несколькими способами, как с помощью CSS, так и без вашего Razor.

  1. Вы можете добавить float: left; к своему классу a.top_menu_button, и это решит проблему.Или ...
  2. Вы можете взять свой внешний <div id="contentPageMenu"> и придать ему стиль style="word-spacing: -1em".Затем добавьте word-spacing: 0; к вашему классу a.top_menu_button, и это также решит проблему.

Попробуйте Googling «показать пробел в блоке», и вы получите несколько обращений, говорящих о проблемеспособы решения проблемы. Этот и этот дают четкое и краткое описание проблемы и некоторых способов ее решения.

...