在导航菜单上切换部分视图点击

我有一个页面，里面有一个菜单，其想法是使用基于点击的导航栏项目的局部视图呈现内容，并将这些局部视图之一作为默认页面。任何人都知道我可以做到这一点？在导航菜单上切换部分视图点击

@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 调用上加载内容菜单点击事件
整页加载方式：将所有页面内容移动到_layout，在您的partials中使用_layout，它不再是局部，而是整页，一个d使用菜单中的链接在视图之间切换。整页的

示例（我会用这个）：

_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>

为所有选项卡创建不同的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

在导航菜单上切换部分视图点击

回答

相关问题