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.

Answer 1

I add ajax options for Anchor TagHelper in ASP.NET MVC Core

you can see complete sample in github link : https://github.com/NevitFeridi/AJAX-TagHelper-For-ASP.NET-Core-MVC

after using this new tagHelper you can use ajax option in anchor very easy as shown below:

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

Answer 2

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>

Answer 3

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 4

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>