Вкладки bootstrap 3 не применяют href с использованием url. действие в razor

В моей бритве есть несколько вкладок:

<div class="page-tabs">
<ul class="nav nav-tabs">
    <li class='@(actionName.ToLower() == "viewsongamendments" &&
                 controllerName.ToLower() == "songmanagement" ? "active" : "")'>
        <a href='@Url.Action("ViewSongAmendments", "SongManagement")' data-container="body" data-toggle="tooltip" title="Old Track Details">Old Track Details</a>
    </li>
    <li class='@(actionName.ToLower() == "updatedamendments" &&
                 controllerName.ToLower() == "songmanagement" ? "active" : "")'>
        <a href='@Url.Action("UpdatedSongAmendments", "SongManagement")' data-container="body" data-toggle="tooltip" title="Updated Track Details">Updated Track Details</a>
    </li>
</ul>

Но, глядя в исходный код, он не применяет ahref к вкладке. В настоящее время это показывает:

<a data-container="body" data-toggle="tooltip" title="" data-original-title="Old Track Details">Old Track Details</a>

не должен ли href указывать на id элемента div, то есть: содержимое tab, а не указывать на ваше действие ??

Rajshekar Reddy 10.09.2018 11:44

@RajshekarReddy, это хороший аргумент. Так вы думаете, ID решит эту проблему?

Rob 10.09.2018 11:45

Тег a должен указывать на div, например: содержать div id в его значении href, например: href="#divID", и именно в этом div вы будете отображать содержимое своего действия. Вы можете использовать Render.Action.

Rajshekar Reddy 10.09.2018 11:47

Если этот вопрос касается работы вкладок начальной загрузки, вам необходимо отредактировать вопрос. На данный момент кажется, что вы просто хотите, чтобы ваши теги <a> были заполнены из Razor (что, вероятно, все равно оставит тег <a> пустым).

Wurd 10.09.2018 11:51

@Wurd Я понимаю, я хочу, чтобы вкладки заработали. На данный момент они, похоже, не работают, я просто смотрю на добавление id, чтобы посмотреть, имеет ли это значение.

Rob 10.09.2018 11:55

есть ли причина, по которой вы не можете использовать ActionLink, кажется немного проще, чем писать весь html

mahlatse 10.09.2018 13:15
0
6
643
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вкладки начальной загрузки работают, как показано ниже, обратите внимание, как hrefs совпадают от элемента nav к вкладкам в элементе tab-content. href НЕ является ссылкой на действие при использовании в этом контексте начальной загрузки.

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Some content.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
        @Html.RenderAction("ViewSongAmendments", "SongManagement")
    </div>
    <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
    </div>
</div>

Можете ли вы сделать это в синтаксисе Razor, как в моем вопросе выше, поскольку я считаю, что некоторые из них верны.

Rob 10.09.2018 12:04

Что значит «сделать это в синтаксисе Razor»? Что еще вы хотите сделать?

Wurd 10.09.2018 12:07

У вас есть простая разметка HTML. Это не то, что мне нужно, я хочу использовать синтаксис Razor, который у меня есть в моем вопросе. Поскольку каждая вкладка загружает отдельный URL-адрес.

Rob 10.09.2018 12:08

Вам нужно будет либо использовать @Html.RenderAction() внутри одного из элементов tab-pane, либо загрузить html с помощью ajax. Вы не можете использовать URL-адрес для загрузки в HTML.

Wurd 10.09.2018 12:11

@Rob замените часть <p>Some content.</p> своим кодом Razor @Render.Action("ViewSongAmendments", "SongManagement"), сделайте то же самое с содержимым другой вкладки.

Rajshekar Reddy 10.09.2018 12:14
Ответ принят как подходящий

Мне удалось заставить его работать с приведенным ниже кодом. В итоге я добавил переменную new { songid = fullAccountCode, fullAccountCode извлек значение из модели.

<div class="page-tabs">
<ul class="nav nav-tabs">
    <li class='@(actionName.ToLower() == "viewsongamendments" &&
             controllerName.ToLower() == "songsmanagement" ? "active" : "")'>
        <a href='@Url.Action("ViewSongAmendments", "SongsManagement", new { songid = fullAccountCode})' data-container="body" data-toggle="tooltip" title="Original">Old Song Details</a>
    </li>
    <li class='@(actionName.ToLower() == "updatedsongamendments" &&
             controllerName.ToLower() == "songsmanagement" ? "active" : "")'>
        <a href='@Url.Action("UpdatedSongAmendments", "SongsManagement", new { songid = fullAccountCode})' data-container="body" data-toggle="tooltip" title="Original">Updated Song Details</a>
    </li>
</ul>

Другие вопросы по теме