导航到不同的视图而无需重新加载整个页面 [英] Navigating to different views without reloading entire page
问题描述
我有一个带有一个下拉框的布局页面.我创建了3个视图，将利用此视图 布局.在下拉菜单中选择的值将在创建的所有3个视图中使用. 我在布局中有用于导航的操作链接.这是我想要实现的目标
I have a layout page that has one dropdown box. I created 3 views that will make use of this layout. The value selected in the dropdown will be used in all 3 views created. I have actionlinks used for navigation in the layout. Here is what I will like to achieve
- 当我从一个视图浏览到另一个视图时，请避免重新加载整个页面(布局)，因为我想保持 所选的下拉值.
- Avoid reloading the entire page(layout) when I navigate from view to view since I want to keep the dropdown value selected.
我该如何做到这一点，以便仅改变视图的内容 当我通过单击操作链接从一个页面导航到另一个页面时.所选下拉列表的值 除非用户更改，否则必须始终保持不变
How can I achieve this such that it is only the content of the views that will be changing when I navigate from page to page by clicking on the action links. The value of dropdown selected must always remain the same unless changed by user
@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>
推荐答案
您可以使用ajax进行部分页面加载.首先，给您的链接一个css类，以便在连接ajax行为时可以将它们用作我们的jQuery选择器.
You can use ajax to do partial page loads. To start, give a css class to your links so that we can use those as our jQuery selectors when wiring up the ajax behavior.
@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，我们将在其中加载部分视图内容.可能是您当前的视图(索引?)，您可以像这样添加容器视图
Now you should have a container div in your page to which we will load the partial view content. May be your current view (index ?) , you can add a container view like this
<div id="pageContent"></div>
现在，让我们在链接上监听click事件，通过ajax获取目标页面的内容，并将其加载到容器div中.假设您已将jQuery加载到页面上，我们可以使用jQuery load()方法.
Now, let's listen to the click event on our links, get the content of the target page's via ajax and load to the container div. Assuming you have jQuery loaded to your page, we can use jQuery load() method.
$(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()方法来实现此目的.
Since we are loading partial page content to our placeholder div, we do not need to return the full markup(including layout) from your action methods, We just need to the partial view content. You may use the PartialView() method instead of View() method to achieve this.
public ActionResult GetSection1Data()
{
if(Request.IsAjaxRequest())
{
return PartialView();
}
return View();
}
这篇关于导航到不同的视图而无需重新加载整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
