Ajax helper tags documentation in Asp.net Core

If you're looking for the old style Ajax helpers in Core, this Nuget package might help -

AspNetCore.Unobtrusive.Ajax

You can install it using -

PM> Install-Package AspNetCore.Unobtrusive.Ajax

This will enable you to use helpers like

@Html.AjaxActionLink()
@Html.AjaxBeginForm()
@Html.AjaxRouteLink()

Here's the github details. You can find more documentation in there.

Github Url to the project

https://github.com/Behrouz-Goudarzi/AjaxTagHelper

AjaxTagHelper

A simple solution to using links and ajax forms using Tag Helper in aspnet core

First, copy the AjaxTagHelper class from the Extensions folder to your project.

Second, copy the AjaxTagHelper.js file from js folder in wwwroot and add it to your project.

Then do the following: Open the viewImports file and add the following code

@using AjaxTagHelper.Extensions
@using AjaxTagHelper
@using AjaxTagHelper.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AjaxTagHelper

To use Action Ajax, add the following code instead of the tag.

  <ajax-action ajax-action="Delete" ajax-controller="Home" ajax-data-id="@Model.Id"
                 class="btn btn-danger btn-sm" ajax-success-func="SuccessDelete">
        Delete
    </ajax-action>

Use the following code to use AJAX to send the form to server.

<div class="row">
    <form id="frmCreate" class="col-sm-9">
        <div class="row">
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Name" name="Name" class="input-group" type="text" />
            </div>
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Family" name="Family" class="input-group" type="text" />
            </div>
            <div class="col-sm-4 form-control">
                <input placeholder="Enter [email protected] " name="Email" class="input-group" type="email" />
            </div>
        </div>
    </form>
    <div class="col-sm-3">
        <ajax-button ajax-controller="Home" ajax-action="Create" ajax-form-id="frmCreate" ajax-success-func="SuccessCreate"
                     class="btn btn-sm btn-success">
            Create
        </ajax-button>
    </div>
</div>

Finally, add the scripts you need to view it, check the code below

<script>
    function SuccessCreate(data) {
        console.log(data);
        $("#tbodyPerson").append(data);


    }
    function SuccessDelete(data) {
        $("#tr" + data.id).fadeOut();
    }
</script>
<script src="~/js/AjaxHelper.js"></script>

There are no server-side helpers, like @Ajax.Form, in ASP.NET Core. You could probably write your own tag helpers for similar features but I haven’t seen anyone do this. The general idea is to write actual JavaScript when you want to have client-side behavior. Hiding these things behind server-side magic is usually not the best idea.

jquery-ajax-unobtrusive is a JavaScript package that adds client-side behavior to look for various attributes in the final rendered page to add functionality on top of your standard forms. So this would be a fully JavaScript-based solution.

Unfortunately, there does not seem to be documentation about it. You can take a look at its source code to figure out what may or may not be possible.

---

jquery-ajax-unobtrusive documentation

From taking a quick look at the source (disclaimer: without testing the functionality myself), this seems to be the supported data attributes and available functionality of the package:

• data-ajax="true" – To enable the functionality for a form.
• data-ajax-update – Selector for the elements that are updated with the AJAX result, using the mode.
• data-ajax-mode
  • data-ajax-mode="before" – Prepends the data to the element.
  • data-ajax-mode="after" – Appends the data to the element.
  • data-ajax-mode="replace-with" – Replaces the element with the data.
  • Otherwise sets the HTML content of the element to the data.
• data-ajax-confirm – Message that is displayed to the user to confirm the form submission.
• data-ajax-loading – Selector of element that is shown while loading.
• data-ajax-loading-duration (default: 0) – Animation duration for show/hide of the loading element.
• data-ajax-method – Allows overwriting the HTTP method for the AJAX request.
• data-ajax-url – Allows overwriting the URL for the AJAX request.
• data-ajax-cache – Set to other value than "true" to disable the jQuery AJAX cache parameter.
• data-ajax-begin – Callback function before the request starts (arguments: xhr)
• data-ajax-complete – Callback function when the request is completed (arguments: xhr, status)
• data-ajax-success – Callback function when the request was successful (arguments: data, status, xhr)
• data-ajax-failure – Callback function when the request failed (arguments: xhr, status, error)

The callback functions are the equivalent of jQuery’s beforeSend, complete, success, and failure. From how it looks, you can specify the callbacks using a JavaScript object path to the function.

For example data-ajax-success="foo.bar.onSuccess" will call the function foo.bar.onSuccess(), i.e. it will look for an object foo in the window, get its bar member, and call onSuccess on that.