Переключить частичный вид в меню навигации.

У меня есть страница с меню в ней, идея состоит в том, чтобы отобразить содержимое с частичным представлением на основе щелкнутого элемента навигационной панели, а также одним из этих частичных представлений в качестве страницы по умолчанию. Кто-нибудь знает, как я могу это сделать?Переключить частичный вид в меню навигации.

@using Opdracht_1.Models; 
    @model List<Guestmodel> 
    @{ 
     Layout = "~/Views/_BasicLayout.cshtml"; 
    } 

    <!DOCTYPE html> 

    <html> 
    <head> 
     <meta name="viewport" content="width=device-width" /> 
     <title>GuestList</title> 
    </head> 
    <body> 
      <div class="col-sm-3 col-md-2 sidebar"> 
       <ul class="nav nav-sidebar"> 
        <li class="active"> 
        <li><a href="">Alle<span class="sr-only">(current)</span></a></li> 
        <li><a href="">Reacties<span class="sr-only">(current)</span></a></li> 
        <li><a href="">Aanmeldingen<span class="sr-only">(current)</span></a></li> 
        <li><a href="">Afmeldingen<span class="sr-only">(current)</span></a></li> 
        </li> 
       </ul> 
      </div> 

      @Html.Partial("_AllPage") 

    </body> 
    <script> 
    </script> 
    </html>

источник

2016-03-01 Alim

Используйте javascript/jquery для обработки события '.click()' и используйте ajax для вызова метода контроллера, который возвращает частичный вид и обновляет DOM –

Вы могли бы добиться этого с помощью Ajax или полной загрузки страницы:

Ajax способ: обернуть дозагрузку зону с DIV, и использовать Ajax вызов для загрузки содержимого на menu click events
Полный способ загрузки страницы: переместить весь контент страницы в _layout, использовать это _layout в ваших частях, которые не являются более частичными, а полными страницами и используйте ссылки в меню для переключения между видами.

Пример полной страницы (Я хотел бы использовать это):

_yourLayout.cshtml

@using Opdracht_1.Models; 
@model List<Guestmodel> 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>GuestList</title> 
</head> 
<body> 
     <div class="col-sm-3 col-md-2 sidebar"> 
      <ul class="nav nav-sidebar"> 
       <li class="active"> 
       <li><a href=**@Url.Action("OneAction")**>Alle<span class="sr-only">(current)</span></a></li> 
       <li><a href="@Url.Action("OtherAction")">Reacties<span class="sr-only">(current)</span></a></li> 
       <li><a href="">Aanmeldingen<span class="sr-only">(current)</span></a></li> 
       <li><a href="">Afmeldingen<span class="sr-only">(current)</span></a></li> 
       </li> 
      </ul> 
     </div> 

     @RenderBody() 

</body> 
<script> 
</script> 
</html>

OneAction.cshtml

@{ 
    Layout = "~/Views/Shared/_yourLayout.cshtml"; 
} 
<div> 
    Your partial content here 
</doc>

источник

2016-03-01 11:11:33 tede24

. Загрузка полной страницы на самом деле является моей резервной идеей, когда я запускаю из-за времени, но для моего задания требуется, чтобы меню на странице было жестко запрограммировано, а содержимое менялось с частичным представлением (меню не требуется ни на одной из других страниц). – Alim

Сколько партиций вы бы выбрали в этом же меню? Что касается вашего примера кода, я бы использовал эту полную страницу, я не понимаю, что вы получаете за Ajax. Что вы имеете в виду с меню, которое не требуется для других страниц? – tede24

У меня есть индексная страница, страница RSVP и страница списка гостей. Меню доступно только на странице списка гостей, а не на других, поэтому нет необходимости размещать меню на моей странице макета. меню используется только для переключения содержимого на странице списка гостей (все реакции, все отсутствующие, все письменные реакции и люди, которых нет) – Alim

cshtml страница:

Заменить @Html.Partial("_AllPage") с

<div id="divDetailView"></div>

Создать Different вызов AJAX для всех вкладок мыши или создать общий метод AJAX, если вид является общим. и функция вызова в событии клика.

function LoadDetailPartialView() 
    { 
     $.ajax({ 
      url: '@Url.Action("Detail", "Pantry")', 
      type: 'GET', 
      cache: false, 
      data: { Data Which you want to pass to method } 
     }).done(function(result) { 
      if (result.redirectTo)     
        $('#divDetailView').html(result);     
     }).fail(function (jqXHR, exception) { 
      showError(jqXHR); 
     }); 
    }

Ваш контроллер должен быть таким же, как указано ниже.

[HttpGet]   
     public ActionResult Detail(int Id) 
     {    
      var model = new PantryModel(); 
      return PartialView(model); 
     }

Когда мы вернем Partialview, время предоставит вам Html частичного вида.

источник

2016-03-01 11:30:11

Переключить частичный вид в меню навигации.

ответ

Смежные вопросы