具有MVC核心的Ajax.ActionLink替代 [英] Ajax.ActionLink alternative with mvc core

问题描述

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

In MVC5 there is @Ajax.ActionLink that is useful to update just a partial view instead of reloading the whole View. Apparently in MVC6 is not supported anymore.

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

I have tried using @Html.ActionLink like the following but it doesn't update the form, it return just the partial view:

查看:

@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.当页面加载时，组件正常工作，但是我不明白如何稍后仅刷新组件(例如，使用按钮):

Then I tried using ViewComponents. When the page loads the component works correctly but I don't understand how to refresh just the component afterward (for example with a button):

查看:

@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更新视图的一部分?

How can I update just a part of a view by using PartialViews in MVC6?

推荐答案

ViewComponent's不能替代ajaxified链接.它的作用更像Html.Action调用，以将子操作包括在页面中(例如:加载菜单栏).这将在剃刀执行视图页面时执行.

ViewComponent's are not replacement of ajaxified links. It works more like Html.Action calls to include child actions to your pages (Ex : Loading a menu bar). This will be executed when razor executes the page for the view.

截至本文撰写时，aspnet核心中尚未正式支持ajax操作链接替代项.

As of this writing, there is no official support for ajax action link alternative in aspnet core.

但是，好事是，我们可以使用很少的jQuery/javascript代码来完成ajaxified的东西.您可以使用现有的Anchor标签帮助程序

But the good thing is that, we can do the ajaxified stuff with very little jQuery/javascript code. You can do this with the existing Anchor tag helper

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

In the javascript code, just listen to the link click and make the call and update the DOM.

$(function(){

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

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

   });

});

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

Since you are passing the parameter in querystring, you can use the jQuery load method as well.

$(function(){

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

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

   });

});

这篇关于具有MVC核心的Ajax.ActionLink替代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！