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

ViewComponent不是ajaxified链接的替代品。它更像是Html.Action调用，可以将子操作包含在您的页面中（例如：加载菜单栏）。当剃刀执行视图页面时，将执行此操作。

在撰写本文时，没有正式支持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);
     });

   });

});

由于您在querystring中传递参数，因此您也可以使用jQuery load方法。

$(function(){

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

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

   });

});

Answer 2

您可以按如下方式使用标签：

<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">

确保_Layout.cshtml页面中的body标记末尾具有以下脚本标记：

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

Answer 3

请改用标记帮助程序，并确保在views文件夹中包含_ViewImport。

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

示例 - Razor Page

<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>

Answer 4

我在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>

使用mvc核心的Ajax.ActionLink替代方案

4 个答案: