带有 mvc 核心的 Ajax.ActionLink 替代方案答案

【问题标题】：Ajax.ActionLink alternative with mvc core带有 mvc 核心的 Ajax.ActionLink 替代方案
【发布时间】：2016-08-28 16:48:53
【问题描述】：

在 MVC5 中，@Ajax.ActionLink 可用于仅更新部分视图而不是重新加载整个视图。显然在 MVC6 中不再支持。

我尝试过使用@Html.ActionLink，如下所示，但它不会更新表单，它只返回部分视图：

查看：

@Html.ActionLink("Update", "GetEnvironment", "Environments", new { id = Model.Id }, new
       {
           data_ajax = "true",
           data_ajax_method = "GET",
           data_ajax_mode = "replace",
           data_ajax_update = "environment-container",
           @class = "btn btn-danger"
       })

控制：

public async Task<ActionResult> GetEnvironment(int? id)
{

        var environments = await _context.Environments.SingleOrDefaultAsync(m => m.Id == id);
        return PartialView("_Environment",environments);
}

局部视图：

@model PowerPhysics.Models.Environments
this is a partial view

然后我尝试使用 ViewComponents。当页面加载组件正常工作但我不明白之后如何刷新组件（例如使用按钮）：

查看：

@Component.InvokeAsync("Environments", new { id = Model.Id }).Result

组件：

public class EnvironmentsViewComponent : ViewComponent
{
    public EnvironmentsViewComponent(PowerPhysics_DataContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync(int? id)
    {
        var environments = await _context.Environments.SingleOrDefaultAsync(m => m.Id == id);

        return View(environments);
    }
}

如何在 MVC6 中使用 PartialViews 只更新视图的一部分？

【问题讨论】：

从 javascript 对返回局部视图的操作进行 ajax 调用。在ajax调用的成功回调中，从结果中获取html并更新你的容器。
是的，我可以使用 Javascript，但我想知道 MVC6 和 HMTL5 是否有更好的方法。也许我在代码中做错了什么。最重要的是，我想了解什么是最佳做法。

标签： asp.net-mvc asp.net-core asp.net-core-mvc

【解决方案1】：

你可以使用如下标签：

 <a data-ajax="true"
                       data-ajax-loading="#loading"
                       data-ajax-mode="replace"
                       data-ajax-update="#editBid"
                       href='@Url.Action("_EditBid", "Bids", new { bidId = Model.BidId, bidType = Model.BidTypeName })'
                       class="TopIcons">Link
                        </a>

确保您在 _Layout.cshtml 页面的正文标记末尾有以下脚本标记：

<script src="~/lib/jquery/jquery.unobtrusive-ajax/jquery.unobtrusive-ajax.js"></script>

【讨论】：

为什么 data-ajax="true" 阻止获取文件。有人知道吗？删除后，代码可以正常工作...

【解决方案2】：

ViewComponent 不能替代 ajaxified 链接。它更像Html.Action 调用以将子操作包含到您的页面（例如：加载菜单栏）。这将在 razor 执行视图的页面时执行。

在撰写本文时，aspnet 核心中没有对 ajax 操作链接替代方案的官方支持。

但好的是，我们可以用很少的 jQuery/javascript 代码来做 ajaxified 的东西。您可以使用现有的 Anchor 标签助手来做到这一点

<a asp-action="GetEnvironment"  asp-route-id="@Model.Id" asp-controller="Environments" 
                                 data-target="environment-container" id="aUpdate">Update</a>
<div id="environment-container"></div>

在 javascript 代码中，只需监听链接点击并进行调用并更新 DOM。

$(function(){

   $("#aUpdate").click(function(e){

     e.preventDefault();
     var _this=$(this);
     $.get(_this.attr("href"),function(res){
         $('#'+_this.data("target")).html(res);
     });

   });

});

由于您在查询字符串中传递参数，因此您也可以使用 jQuery load 方法。

$(function(){

   $("#aUpdate").click(function(e){

     e.preventDefault();
     $('#' + $(this).data("target")).load($(this).attr("href"));

   });

});

【讨论】：

谢谢，我试过了，但是当我点击链接时，它进入了js函数，但它没有调用控制器中的动作。 $(this).data("target") 包含："#environment-container"，$(this).attr("href") 包含："/Environments/GetEnvironment/3"
打开你的浏览器控制台（网络和控制台），看看是否有任何 js 错误或者它正在进行网络调用。您可以看到网络调用的响应

【解决方案3】：

我在 ASP.NET MVC Core 中为 Anchor TagHelper 添加了 ajax 选项

您可以在 github 链接中看到完整的示例： https://github.com/NevitFeridi/AJAX-TagHelper-For-ASP.NET-Core-MVC

使用这个新的 tagHelper 后，你可以很容易地在锚点中使用 ajax 选项，如下所示：

     <a asp-action="create" asp-controller="sitemenu" asp-area="admin"
                        asp-ajax="true"
                        asp-ajax-method="get" 
                        asp-ajax-mode="replace"
                        asp-ajax-loading="ajaxloading"
                        asp-ajax-update="modalContent"
                        asp-ajax-onBegin="showModal()"
                        asp-ajax-onComplete=""
                        class="btn btn-success btn-icon-split">
                        <span class="icon text-white-50"><i class="fas fa-plus"></i></span>
                        <span class="text"> Add Menu </span>
  </a>

【讨论】：

感谢您的项目。我将它实施到我的项目中并且它工作正常。

【解决方案4】：

改用标签助手，并确保在您的视图文件夹中包含 _ViewImport。

注意：如果有多个链接指向将更新您的 DIV 的不同页面，请确保使用 document.getElementsByName。

示例 - 剃刀页面

<script type="text/javascript" language="javascript">
    $(function () {
        var myEl = document.getElementsByName('theName');
        $(myEl).click(function (e) {

            e.preventDefault();
            var _this = $(this);
            $.get(_this.attr("href"), function (res) {
                $('#' + _this.data("target")).html(res);
            });
        });
    });
</script>
<a asp-action="Index" asp-controller="Battle" data-target="divReplacable" name="theName" >Session</a>
<a asp-action="Index" asp-controller="Peace" data-target="divReplacable" name="theName" >Session</a>


<div id="divReplacable">
    Some Default Content
</div>

【讨论】：