Ajax.ActionLink alternative with mvc core

Question

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.

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

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

control:

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

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

Partial view:

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

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

View:

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

component:

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

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

Answer 1

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.

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

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>

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

   });

});

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

   });

});

Answer 2

You can use a tag as follows:

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

Make sure you have in your _Layout.cshtml page the following script tag at the end of the body tag:

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

Answer 3

Use tag helpers instead and make sure to include _ViewImport in your views folder.

Note: Make sure to use document.getElementsByName if there are several links pointing to different pages that will update your DIV.

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