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

Question

在 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 仅更新视图的一部分？

Answer 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 页面的 body 标记末尾有以下脚本标记：

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

Answer 2

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

截至撰写本文时，aspnet core 中还没有对 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);
     });

   });

});

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

$(function(){

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

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

   });

});