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

【问题标题】：MVC 4 - Ajax - Replace one partial one view with anotherMVC 4 - Ajax - 用另一个部分替换一个视图
【发布时间】：2013-04-18 12:50:30
【问题描述】：

我正在尝试用部分视图替换主视图中 div 的内容，具体取决于单击了哪个 @Ajax.ActionLink。

最初我加载 _CaseLoad 局部视图，然后当我单击相关的 ActionLink 时，我希望能够在两个局部视图 _CaseLoad 和 _Vacancies 之间切换。我在“主”文件夹中有部分视图和索引视图。

当我单击“空缺”链接时，它会简要显示 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>

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-4 asp.net-mvc-ajax

【解决方案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 和 Vacancy 操作，使这两个方法都返回 PartialView("_CaseLoad.cshtml", model);或 PartialView("_Vacancys.cshtml, model) 如下：

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

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

我只是切断了所有实现细节，只是为了让您了解如何解决问题。

【讨论】：

【解决方案2】：

我会说尝试使用具有良好开发工具集的浏览器（我推荐 Chrome）并点击 F12。打开开发工具，切换到网络选项卡，然后单击您的 ajax 链接。 Loading 元素仅在请求进行时显示，并不一定意味着它成功。通过使用“网络”选项卡，您应该能够看到 Ajax 请求的响应是什么，并确定它是否是一个错误，以及生成的部分视图实际上是什么。

【讨论】：