点击Html.ActionLink如何加载部分视图？

Question

请问如何在单击 Html.ActionLink 时在同一页中加载 PartialView。我列出了以下要求。

1. 我有一个索引页面，将从 Employee 表中列出员工，每个表中的行还将具有编辑和删除链接（Html.ActionLink）以更新/删除员工信息。 2. 另外，索引页面将具有文本框的部分视图，用于创建新员工（或编辑现有员工）。 3. 当用户从表中选择编辑链接时，应在部分视图的文本框中加载适当的用户详细信息以更新员工详细信息。 4. 此外，输入部分视图中的新员工详细信息应存储到 DB 表中，并同时添加到 Index 页面的表格中。

所有上述步骤都应在 MVC5 中不使用 Ajax 处理。请问可以帮助我实现以上步骤吗？非常感谢您的帮助。

- Karthikeyan Murthy

---

你能否编辑你的问题并添加一些首页的代码？ - ekad

你需要使用JavaScript / jQuery或者@Ajax.ActionLink()来完成这个任务 - 你需要调用一个返回局部视图并更新DOM的方法。 - user3559349

Answer 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");
}

- Joseph Woodward

Answer 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");
}

- drichardson