Navigating to different views without reloading entire page

问题

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>

回答1:

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"})

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>

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"));
   });

});

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();
}

来源：https://stackoverflow.com/questions/37228155/navigating-to-different-views-without-reloading-entire-page

标签

asp.net-mvc-4

c#-4.0

asp.net-ajax