首页 文章

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

提问于
浏览
4

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

  • 我有一个Index页面,它将列出Employee表中的员工,表中的每一行都有Edit&Delete链接(Html.ActionLink)来更新/删除员工信息 .

  • 此外,索引页面将具有文本框的部分视图,以创建新员工(或)编辑现有员工 .

  • 当用户从表中选择编辑链接时,必须在部分视图的文本框中加载相应的用户详细信息以更新员工详细信息 .

  • 此外,在部分视图中输入的新员工详细信息应存储到数据库表中,同时应将其添加到“索引”页面的表中 .

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

2 回答

  • 2

    渲染视图后,加载局部视图的唯一方法是通过Ajax调用,将部分视图返回到JQuery / Javascript,然后相应地更新DOM .

    例如:

    Your HTML

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

    Your JQuery:

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

    Your controller action:

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

    使用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);
            }
        });
    });
    

    Controller Action

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

相关问题