MVC 4 - Ajax - 用一个部分视图替换另一个部分视图

Question

我正在尝试根据点击的@Ajax.ActionLink替换Main视图中div的内容为不同的部分视图，这些视图与之相关。

最初，我加载_CaseLoad部分视图，然后希望能够在单击相关ActionLink时在_CaseLoad和_Vacancies两个部分视图之间切换。 我将_CaseLoad和_Vacancies两个部分视图以及Index视图放在'Main'文件夹中。

当我单击“职位空缺”链接时，它会短暂地显示LoadingElementID，但它没有用_Vacancies部分视图替换_CaseLoad部分视图？

控制器操作（MainController）：

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

        return View(model);

    }

主索引视图：

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

- James P

Answer 1

你的 @Ajax.ActionLink 调用有误，你正在这样做：

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

这意味着您的链接文本是“CaseLoad”，并且需要在“MainController”中调用“_CaseLoad”操作？但“_CaseLoad”不是您的部分视图名称吗？

要解决此问题，您必须在MainController中创建“CaseLoad”和“Vacancies”操作，使两种方法都返回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);
}

我删掉了所有的实现细节，只是为了让你了解如何解决这个问题。

- ararog

Answer 2

我建议试用一个带有好的开发者工具集的浏览器（我推荐Chrome），然后按下F12。在开发者工具打开后，切换到网络选项卡，然后点击您的Ajax链接。当请求正在进行时，加载元素仅显示，这并不一定意味着它成功了。通过使用网络选项卡，您应该能够看到Ajax请求的响应是什么，并确定其是否出现错误，以及实际生成的局部视图是什么。

- Nick Albrecht