Geek asks and answers

MVC 4 - Ajax - replace one partial view with another

I am trying to replace the contents of a div in the main view with a partial view, depending on what @ Ajax.ActionLink is clicked on.

Initially, I load the partial view of _CaseLoad, then I would like to be able to switch between the two partial views of _CaseLoad and _Vacancies when I click on the corresponding ActionLink. I have partial views and an index view in the Home folder.

When I click on the Jobs link, the LoadElementID is displayed briefly, but it does not replace the partial view of _CaseLoad with the partial view of _Vacancies?

Controller action (MainController):

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

        return View(model);

    }

Type of the main index:

@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>
+5
source share
2

@Ajax.ActionLink , :

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

, - "CaseLoad", , "MainController", "_CaseLoad"? "_CaseLoad" ?

, ActionLoad "" MainController, PartialView ( "_ CaseLoad.cshtml", model); PartialView ("_ Vacancies.cshtml, model), :

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

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

, , .

+5

( Chrome) F12. dev, "", ajax. "" , , . "", , Ajax , , , .

0

More articles:


All Articles