Вкладки в ASP.NET MVC

Question

Я хочу вывести структуру TAB на страницу asp.net mvc. Как я могу это сделать? Заранее спасибо.

Answer 1

Простая структура вкладок

<ul id="tabs" >  
   <li>Tab1</li >  
   <li>Tab2</li >  
<ul >

Важно, чтобы при переходе на вкладку вы задали элементу (li) другой класс, заключающий в себе элемент с некоторой границей (в данном CSS это с activeLi)

CSS:

#tabs a:link, #tabs a:visited
{
    color : #666;
    padding:5px;
}

#tabs a:link:active, #tabs a:visited:active, #tabs a:hover, .ui-state-active {
    text-decoration:none;
    border:solid 1px #8EDF53;
    border-bottom:solid 2px #fff;
    padding:5px;
}

.activeLi a
{
    text-decoration:none;
    border:solid 1px #8EDF53;
    border-bottom:solid 2px #fff;
    padding:5px; 
}

#tabs
{
    text-align:right;
    border-bottom : 1px solid #8EDF53;
    margin-bottom:20px;
}

#tabs li
{
    display:inline;
}

Этот код будет выглядеть так: альтернативный текст http://s3.amazonaws.com/twitpic/photos/large/17838970.png?AWSAccessKeyId=0ZRYP5X5F6FSMBCCSE82&Expires=1247824102&Signature=X6%2F8QujBSGzp9iPvh5ocvEj5a8c%3D

Конечно, у jQuery есть плагин: ядро ​​jQuery и вкладки jQuery

Answer 2

Вы должны построить их из HTML самостоятельно. Следуйте любому из множества примеров ( вот один! ), чтобы создать вкладки из HTML. Затем используйте <% = Html.ActionLink ("<strong> Ссылки для действий ", " для создания ", новые {hurf = " ссылки в привязках вкладки. " })%>

Answer 3

с использованием Bootstrap вместе с jQuery:

HTML коды:

<div id="tabs">
            <ul style="list-style: none;" class="nav nav-tabs">
                <li><a id="orthForm" href="#" onclick="getRelatedItemList('orthForm', @Model.CaseID)">Orthodontic Form</a></li>
                <li><a id="xray" href="#" onclick="getRelatedItemList('xray', @Model.CaseID)">X-Ray</a></li>
                <li><a id="fileTab" href="#" onclick="getRelatedItemList('files', @Model.CaseID)">Files</a></li>
                <li><a id="visitTab" href="#" onclick="getRelatedItemList('visits', @Model.CaseID)">Visits</a></li>
                <li><a id="noteTab" href="#" onclick="getRelatedItemList('notes', @Model.CaseID)">Notes</a></li>
            </ul>
            <div class="tab-content" id="tabContent">

            </div>
        </div> 

JQuery Ajax:

function getRelatedItemList(itemType, caseId) {
console.log(itemType);
console.log(caseId);

var controller = "File";
var action = "CaseFiles";

if (itemType === "visits") {
    controller = "Visits";
    action = "CaseVisits";
}
else if(itemType==="notes") {
    controller = "Notes";
    action = "CaseNotes";
}
else if (itemType === "xray") {
    controller = "Home";
    action = "UnderDeveloping";
}
else if (itemType === "orthForm") {
    controller = "Home";
    action = "UnderDeveloping";
}

$.ajax(
    {
        url: "/" + controller + "/" + action,
        data: { caseId: caseId }
    }
    ).done(
        function(data) {
            console.log(data);
            $('#tabContent').empty();
            $('#tabContent').append(data);
        }
    );

}

Answer 4

Проверьте вкладки JQuery. Это делает вашу работу очень простой

Answer 5

Образец NerdDinner на asp.net имеет вкладку.

Фактически, когда вы используете Visual Studio для создания решения MVC, главная страница поставляется с вкладкой.

Answer 6

Отправьте информацию в ViewData, что позволит вам создать структуру ul / li в html страницы MVC и использовать CSS для ее преобразования. Может быть, немного украсить это с JQuery.

Это хороший учебник для отображения вещей.