How to create AJAX Form in Asp.Net Core

Question

<form data-ajax="true" data-ajax-mode="replace" data-ajax-update="#results" asp-action="CreateCarClient" asp-controller="Account" method="post" enctype="multipart/form-data">

This form is not work

Solution 1

You are using jQuery Unobtrusive AJAX in ASP.NET Core.You need to install the jquery.unobtrusive-ajax package into your project using npm install jquery.unobtrusive-ajax and add references to it in your view.

See tutorials of razor pages here.

This link displays my example of how to use the code step by step.

Solution 2

If you attempting to do this in .NET 5 then add the JQuery.Unobtrusive.Ajax libraries to your project as you normally would, then write your own little tag helper!

This one is VERY basic but you can expand on it as you wish.

namespace MyProject.Helpers.TagHelpers
{
    [HtmlTargetElement("form", Attributes ="ajax")]
    public class AjaxForm : TagHelper
    {
        public string replaceId { get; set; }
        public string onAjaxBegin { get; set; }
        public string id { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagMode = TagMode.StartTagAndEndTag;
            output.Attributes.SetAttribute("data-ajax", "true");
            output.Attributes.SetAttribute("data-ajax-method", "POST");
            output.Attributes.SetAttribute("data-ajax-mode", "replace");
            output.Attributes.SetAttribute("method", "post");
            output.Attributes.SetAttribute("id", id);

            if (!string.IsNullOrWhiteSpace(onAjaxBegin))
                output.Attributes.SetAttribute("data-ajax-begin", onAjaxBegin);

            if (string.IsNullOrWhiteSpace(replaceId))
                throw new Exception("ReplaceId is required!");

            output.Attributes.SetAttribute("data-ajax-update", $"#{replaceId.TrimStart('#')}");
        }
    }
}

Remember to register this tag helper in your _ViewImports.cshtml

@addTagHelper  MyProject.Helpers.TagHelpers.*, MyProject

Usage Example:

<form id="GandalfForm" ajax replace-id="partialViewWrapper" on-ajax-begin="OnBeginDoSomethingInJavascript" asp-controller="SomeController" asp-action="SomeMethod">
    <div id="partialViewWrapper">
        @await Html.PartialAsync("~/Views/Shared/SampleContent.cshtml", Model)
    </div>

Note that the "ReplaceId" DOM element must start with a # in order for the unobtrusive ajax library to work correctly.

Solution 3

You can use FormHelper to create ajax forms on ASP.NET Core. Also, FormHelper helps you to transform server-side validations to client-side.

It's so easy to use. You just need to add asp-formhelper="true" to your form tag.

<form asp-formhelper="true" asp-controller="Home" asp-action="Save">
   // <input...
   // ...
</form>

You can check it's documentation on FormHelper GitHub Page. And you can download that package from Nuget.

Solution 4

Here is the solution of Ajax.BeginForm as everything is available in this package

Only thing change is Html.AjaxBeginForm

PM> Install-Package AspNetCore.Unobtrusive.Ajax

Reference is here

View more solutions