MVC 4 - Ajax - Zastąp jeden częściowy widok innym

Question

Próbuję zastąpić zawartość elementu div w widoku głównym częściowymi widokami w zależności od tego, które kliknięcie @ Ajax.ActionLink zostało kliknięte.

Początkowo ładuję częściowy widok _CaseLoad, a następnie chciałbym móc przełączać się między dwoma częściowymi widokami _CaseLoad i _Vacancies po kliknięciu odpowiedniego łącza ActionLink. Mam zablokowane widoki częściowe i widok indeksu w folderze "Główny".

Po kliknięciu linku "Oferty pracy" na krótko wyświetlany jest parametr LoadingElementID, ale nie zastępuje częściowego widoku _CaseLoad z częściowym widokiem _Vacancies?

Controller Akcja (MainController):

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

     return View(model); 

    } 

główna Główna Zobacz:

@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

Twój wywołanie @ Ajax.ActionLink jest źle, robisz to:

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

Czyli tekst łącza to „liczby spraw”, a działanie na miano w „MainController” jest „_CaseLoad” ? Czy nazwa "częściowego widoku" nie jest "_CaseLoad"?

Aby to naprawić, należy utworzyć CaseLoad i akcje Vacancies w MainController, sprawić, by obie metody zwróciły PartialView ("_ CaseLoad.cshtml", model); lub PartialView ("_ Vacancies.cshtml, model) jak poniżej:.

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

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

po prostu odciąć wszystkie szczegóły implementacji tak aby uzyskać wyobrażenie o tym, jak rozwiązać problem

Answer 2

Powiedziałbym spróbować użyć przeglądarki, która ma dobry zestaw narzędzi programistycznych (I polecam Chrome) i naciśnij F12. Po otwarciu narzędzi programistycznych przejdź na kartę Sieć, a następnie kliknij link ajax. Element Ładowanie wyświetla się tylko wtedy, gdy żądanie jest w toku, niekoniecznie oznacza to, że się udało. Korzystając z karty Sieć, powinieneś być w stanie zobaczyć, jaka była odpowiedź z żądania Ajax i ustalić, czy był to błąd, i jaki był wynikowy widok częściowy.