如何在单击 Html.ActionLink 时加载部分视图？答案

【问题标题】：How to load partial view on clicking Html.ActionLink?如何在单击 Html.ActionLink 时加载部分视图？
【发布时间】：2015-01-17 18:32:35
【问题描述】：

谁能告诉我点击Html.ActionLink时如何在同一页面中加载PartialView。我在下面列出了我的要求。

我有一个索引页面，它将列出 Employee 表中的员工，并且表中的每一行都有编辑和删除链接 (Html.ActionLink) 来更新/删除员工信息。
此外，索引页面将包含带有文本框的部分视图，以创建新员工（或）编辑现有员工。
当用户从表中选择编辑链接时，必须在局部视图的文本框中加载适当的用户详细信息以更新员工详细信息。
此外，在局部视图中输入的新员工详细信息应存储到 DB 表中，同时应添加到索引页面中的表中。

以上所有步骤都应该在 MVC5 中不使用 Ajax 的情况下处理。谁能帮我实现上述步骤？非常感谢您的帮助

【问题讨论】：

你能编辑你的问题并添加一些索引页面的代码吗？
您将需要 javascript/jquery 来完成此操作，或者 @Ajax.ActionLink() - 您需要调用返回部分视图并更新 DOM 的方法

标签： asp.net-mvc asp.net-mvc-5 asp.net-mvc-partialview

【解决方案1】：

一旦你的视图被渲染，加载部分视图的唯一方法是通过 Ajax 调用，它将部分视图返回给你的 JQuery/Javascript，然后相应地更新 DOM。

例如：

您的 HTML

<a href="#" id="loadViewButton">Load view</a>
<div id="partialViewContainer"><!-- your partial view will be loaded in here --></div>

你的 JQuery：

$('#loadViewButton').on('click', function() {
    $.ajax({
        type: "GET"
        url: '/YourController/YourAction',
        success: function (data, textStatus, jqXHR) {
            $('#partialViewContainer').html(data);
        }
    });
});

您的控制器操作：

[HttpGet]
public ActionResult YourAction()
{
  return View("YourView");
}

【讨论】：

【解决方案2】：

使用 ActionLink 时，这对我来说非常有效。

HTML

@Html.ActionLink("Load Partial Action Link", null, null, null, new { id = "loadPartialActionLink" })
<div id="AJAXContainer"></div>

jQuery

$('#loadPartialActionLink').on('click', function (e) {
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: '/MyController/_MyPartial',
        success: function (data, textStatus, jqXHR) {
            $('#AJAXContainer').html(data);
        }
    });
});

控制器动作

[HttpGet]
public ActionResult _MyPartial()
{
    return PartialView("_MyPartial");
}

【讨论】：