MVC 4 - Ajax - Ersetze eine Teilansicht durch eine andere

Question

Ich versuche den Inhalt einer Div in einer Hauptansicht mit Teilansichten zu ersetzen, je nachdem, auf welchen @ Ajax.ActionLink geklickt wird.

Ich lade initial die Teilansicht _CaseLoad, dann möchte ich zwischen den beiden Teilansichten _CaseLoad und _Vacancies wechseln können, wenn ich auf den entsprechenden ActionLink klicke. Ich habe die Teilansichten und die Indexansicht im Hauptordner.

Wenn ich auf den Link 'Stellenangebote' klicke, wird kurz die LoadingElementID angezeigt, aber sie ersetzt nicht die Teilansicht _CaseLoad mit Teilansichten _Vacancies?

Controller Aktion (MainController):

public ActionResult Index(int page = 1, string searchTerm = null) 
    { 
     MainIndexViewModel model = new MainIndexViewModel() 
     // Populate Model 

     return View(model); 

    } 

Hauptindex Ausblick:

@model Project.WebUI.Models.MainIndexViewModel 

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<div id="MainIndex"> 
     <div id="Menu"> 

      @Ajax.ActionLink("CaseLoad", "_CaseLoad", "Main", null, new AjaxOptions() { UpdateTargetId = "Main", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", 
       LoadingElementId = "busycycle" }) | 

      @Ajax.ActionLink("Vacancies", "_Vacancies", "Main", null, new AjaxOptions() { UpdateTargetId = "Main", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", 
       LoadingElementId = "busycycle" }) 

     </div><hr/> 


     <div id="busycycle" style="display:none;"><img src="~/Content/images/preloader-w8-cycle-black.gif" /></div> 
     <div id="Main"> 
      @Html.Partial("_CaseLoad") 
     </div> 

    </div> 

Answer 1

Ihr Anruf an @ Ajax.ActionLink falsch ist, können Sie dies tun:

@Ajax.ActionLink("CaseLoad", "_CaseLoad", "Main", null, new AjaxOptions() { UpdateTargetId = "Main", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", 
      LoadingElementId = "busycycle" }) 

Welches ist Ihr Linktext bedeutet, ist „Arbeitsbelastung“ und die Aktion in „MainController“ genannt werden soll „_CaseLoad“ ? Ist "_CaseLoad" nicht der Name Ihrer Teilansicht?

Um dies zu beheben, müssen Sie Arbeitsbelastung und eine Stellenangebot Aktionen in Ihrem MainController erstellen, macht beiden Methoden geben PartialView („_ CaseLoad.cshtml“, Modell); oder PartialView ("_ Vacancies.cshtml, Modell) wie folgt:.

public ActionResult CaseLoad(int page = 1, string searchTerm = null) 
{ 
    MainIndexViewModel model = new MainIndexViewModel() 
    // Poopulate Model 

    return PartialView("_CaseLoad.cshtml", model); 
} 

ich abgeschnitten nur alle Details der Implementierung, nur um Ihnen eine Vorstellung darüber, wie das Problem zu beheben

Answer 2

Ich würde sagen, versuchen, einen Browser, der einen guten Satz von Entwickler-Tools hat (ich würde Chrome empfehlen) und drücken Sie F12. Wechseln Sie bei geöffneten Dev-Tools zur Registerkarte "Netzwerk" und klicken Sie dann auf Ihren Ajax-Link. Das Ladeelement wird nur angezeigt, während die Anforderung ausgeführt wird. Dies bedeutet jedoch nicht unbedingt, dass es erfolgreich war. Wenn Sie die Registerkarte Netzwerk verwenden, sollten Sie in der Lage sein zu sehen, was die Antwort von der Ajax-Anfrage war und bestimmen, ob es ein Fehler war und was die resultierende Teilansicht tatsächlich war.