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类，以便在连接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();
}

无需重新加载整个页面即可导航到不同的视图

1 个答案: