Onglets dans ASP.NET MVC

Question

Je veux apporter la structure TAB dans la page asp.net mvc. Comment puis-je faire ceci ? Merci d'avance.

Answer 1

Vous devez les construire à partir du HTML. Suivez l'un des nombreux exemples disponibles (here's one!) pour construire les onglets à partir du HTML. Ensuite, utilisez <% = Html.ActionLink ("action Liens", "pour créer", nouveau {HURF = "les liens dans les points d'ancrage de l'onglet."})%>

Answer 2

Envoyer des informations dans ViewData qui vous permettra de créer une structure ul/li dans le html de la page MVC et d'utiliser CSS pour le transformer. Peut-être l'embellir un peu avec JQuery. Il s'agit d'un nice tutorial pour le côté affichage des choses.

Answer 3

L'exemple NerdDinner sur asp.net a un onglet. En fait, lorsque vous utilisez Visual Studio pour créer une solution MVC, la page principale est dotée d'un onglet.

Answer 4

La structure onglet est un ul-li

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

simple, il est important que lorsque vous accédiez à un onglet, vous définissez la elelment (li) une autre classe que la case de l'élément avec une sorte de frontière (dans c'est avec activeLi css)

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; 
} 

ce code ressemblera: alt text http://s3.amazonaws.com/twitpic/photos/large/17838970.png?AWSAccessKeyId=0ZRYP5X5F6FSMBCCSE82&Expires=1247824102&Signature=X6%2F8QujBSGzp9iPvh5ocvEj5a8c%3D

Bien sûr jQuery a un plugin aussi: jQuery core et jQuery tabs

Answer 5

Découvrez les onglets JQuery. Il rend votre travail très simple

Answer 6

en utilisant Bootstrap avec jQuery:

codes 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); 
     } 
    ); 

}