Navigieren zu verschiedenen Ansichten, ohne die gesamte Seite neu zu laden

Ich habe eine Layout-Seite, die eine Dropdown-Box hat. Ich habe 3 Ansichten erstellt, die dieses Layout verwenden. Der in der Dropdown-Liste ausgewählte Wert wird in allen drei erstellten Ansichten verwendet. Ich habe Actionlinks für die Navigation im Layout verwendet. Hier ist, was ichNavigieren zu verschiedenen Ansichten, ohne die gesamte Seite neu zu laden

Vermeiden Neuladen der gesamten Seite (Layout) zu erreichen, wie wenn ich aus der Sicht navigieren zu sehen, da ich den Dropdown-Wert ausgewählt behalten möchten.

Wie kann ich diese so erreichen, dass es nur der Inhalt der Ansichten, die sich ändern wird, wenn ich von Seite zu Seite navigieren, indem Sie Links auf die Aktion klicken. Der Wert der Dropdown ausgewählt immer gleich bleiben müssen, es sei denn

vom Benutzer geändert

 @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>

Quelle

2016-05-14 user2320476

Sie Ajax verwenden können Teil Seite viel zu tun. Um zu beginnen, geben Sie Ihren Links eine CSS-Klasse, damit wir diese als unsere jQuery-Selektoren verwenden können, wenn Sie das Ajax-Verhalten verkabeln.

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

Jetzt sollten Sie einen div-Container auf Ihrer Seite haben, auf die wir die Teilansicht Inhalt wird geladen. Wird möglicherweise die aktuelle Ansicht (Index?), Können Sie einen Container Ansicht wie dieser

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

Nun fügen Sie, lassen Sie uns auf unsere Links zu den click Ereignis hören, erhalten den Inhalt der Zielseite des über Ajax und Last auf die Behälter div. Angenommen, Sie haben jQuery auf Ihre Seite geladen, können wir die Methode jQuery load() verwenden.

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

});

Da wir teilweise Seiteninhalt in unseren Platzhalter div laden, brauchen wir nicht die vollständige Markup (einschließlich Layout) von der Aktionsmethoden zurück, Wir müssen nur auf die Teilansicht Inhalt. Sie können die Methode PartialView() statt View() verwenden, um dies zu erreichen.

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

Quelle

2016-05-14 15:02:25 Shyju

Danke. Ich werde es versuchen. Ist das

wiederverwendbar für alle 3 Seiten? – user2320476

Das sollte nur auf Ihrer Startseite sein (wo Sie die Links haben). Es wird eher wie ein Platzhalter zum anderen Seiteninhalt geladen. – Shyju

Ich habe die Links in meiner Masterseite. Willst du sagen, dass das auf meiner Masterseite sein wird? Welchen Abschnitt stelle ich dar? – user2320476

Navigieren zu verschiedenen Ansichten, ohne die gesamte Seite neu zu laden

Antwort

Verwandte Themen