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

Question

我有一个布局页面，其中有一个下拉框。我创建了 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>

Answer 1

您可以使用 ajax 进行部分页面加载。首先，为您的链接提供 css class，以便我们在连接 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，我们不需要 return 来自您的操作方法的完整标记（包括布局），我们只需要部分视图内容。您可以使用 PartialView() 方法而不是 View() 方法来实现此目的。

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

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

Navigating to different views without reloading entire page

asp.net-ajax

c#-4.0

asp.net-mvc-4