如何在单击Html.ActionLink时加载局部视图?

时间:2014-11-20 01:54:12

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

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

  1. 我有一个Index页面,它将列出Employee表中的员工,表格中的每一行都有Edit&删除链接(Html.ActionLink)以更新/删除员工信息。
  2. 此外,索引页面将包含文本框的部分视图,以创建新员工(或)编辑现有员工。
  3. 当用户从表格中选择编辑链接时,必须在部分视图的文本框中加载相应的用户详细信息以更新员工详细信息。
  4. 此外,在部分视图中输入的新员工详细信息应存储到数据库表中,同时应将其添加到“索引”页面的表中。
  5. 在MVC5中不使用Ajax就可以处理上述所有步骤。谁能帮助我实现上述步骤?非常感谢您的帮助

2 个答案:

答案 0 :(得分:5)

渲染视图后,加载局部视图的唯一方法是通过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");
}

答案 1 :(得分: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");
}