在不重新加载整个页面的情况下导航到不同的视图答案

【问题标题】：Navigating to different views without reloading entire page在不重新加载整个页面的情况下导航到不同的视图
【发布时间】：2016-09-10 17:19:58
【问题描述】：

我有一个包含一个下拉框的布局页面。我创建了 3 个视图来使用它布局。在下拉列表中选择的值将用于创建的所有 3 个视图。我有用于在布局中导航的操作链接。这是我想要实现的目标

当我从一个视图导航到另一个视图时避免重新加载整个页面（布局），因为我想保留选择的下拉值。

我怎样才能做到这一点，只有视图的内容才会改变当我通过单击操作链接从一个页面导航到另一个页面时。选择的下拉列表的值除非用户更改，否则必须始终保持不变

        @model Company.Domain.Classes.Companyviewmodel
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>@ViewBag.Title</title>
            <link href="~/Content/Site.css" rel="stylesheet" />
            <script src="~/Scripts/jquery-1.10.2.min.js"></script>    
        </head>
        <body>
            <div class="page">

                @{
                    ViewBag.Title = "Project Status Maintenance";
                }

                <div id="MainContent1">

                    <div id="ProjID">
                        <label for="SelectProjID">Project:</label>
                        @Html.DropDownList("ddlprojects", Model.GetProjectInformationActive.ProjectsInfoSelectList, Model.GetProjectInformationActive.SelectedProject)                     
                    </div>            
                    <ul>              
                        <li class="pp1">@Html.ActionLink("Section1", "Index", "Home")</li>
                        <li class="pp2">@Html.ActionLink("Section2", "GetSection1Data", "Home")</li>
                        <li class="pp3">@Html.ActionLink("Section3", "GetSection2Data", "Home")</li>                
                    </ul>
                    <hr class="divide" />
                    @RenderBody()

                </div>     
                <footer>
                    <div class="ftrcontent">
                        <p>Got it !!</p>
                    </div>
                </footer>
            </div>   

        </body>
        </html>

【问题讨论】：

标签： asp.net-mvc-4 c#-4.0 asp.net-ajax

【解决方案1】：

您可以使用 ajax 进行部分页面加载。首先，为您的链接提供一个 css 类，以便我们在连接 ajax 行为时可以将它们用作我们的 jQuery 选择器。

@Html.ActionLink("Section1", "Index", "Home",null, new {@class="ajaxLink"})
@Html.ActionLink("Section2", "GetSection1Data", "Home", new {@class="ajaxLink"})
@Html.ActionLink("Section3", "GetSectionwData", "Home", new {@class="ajaxLink"})

现在您的页面中应该有一个容器 div，我们将向其中加载部分视图内容。可能是您当前的视图（索引？），您可以像这样添加容器视图

<div id="pageContent"></div>

现在，让我们在链接上监听click 事件，通过ajax 获取目标页面的内容并加载到容器div。假设你的页面已经加载了 jQuery，我们可以使用 jQuery load() 方法。

$(function(){

   //Load the first link's content on document ready
   var firstLinkHref=$("a.ajaxLink").eq(0).attr("href");
   $("#pageContent").load(firstLinkHref);

   $("a.ajaxLink").click(function(e){
      e.preventDefault();
      $("#pageContent").load($(this).attr("href"));
   });

});

由于我们将部分页面内容加载到占位符 div 中，我们不需要从您的操作方法返回完整标记（包括布局），我们只需要部分视图内容。您可以使用PartialView() 方法代替View() 方法来实现此目的。

public ActionResult GetSection1Data()
{
  if(Request.IsAjaxRequest())
  {
    return PartialView();
  }
  return View();
}

【讨论】：

谢谢。我要试试这个。那么这个
是否可重复用于所有 3 个页面？
这应该只是在您的初始页面中（您有链接的地方）。它更像是一个占位符，将加载其他页面内容。
我的母版页中有链接。你是说这会出现在我的母版页中吗？我应该放在哪个部分？
在你的当前页面（我猜是索引）
那么这个部分将成为保存其他页面内容的容器？