Converting Ajax.BeginForm to jquery.unobtrusive-ajax not working

Question

I am trying to migrate an ASP.NET MVC web app to .NET Core, and I am struggling with properly converting the Ajax.BeginForm helper (that doesn't exist anymore in .NET Core).

I have created two identical applications, one in ASP.NET MVC or .NET Core. The ASP.NET works as expected. The .NET Core one reloads the entire page, and replaces it with the partial view, instead of only replacing the div element.

Here is the the code snippet (the commented lines are the ASP.NET version)

<form asp-action="EmployeeMaster" asp-controller="Home" data-ajax-method="POST" data-ajax-update="#divEmp" data-ajax-mode="replace" class="row search-box cols-bottom">



    @*@using (Ajax.BeginForm("EmployeeMaster", "Home", new AjaxOptions
        {
            HttpMethod = "POST",
            UpdateTargetId = "divEmp",
            InsertionMode = InsertionMode.Replace,
            //OnBegin = "$.blockUI({css: {border: 'none',padding: '15px',backgroundColor: '#000','-webkit-border-radius': '10px','-moz-border-radius': '10px',opacity: .5, color: '#fff'}});",
            OnSuccess = "reloadContent()",
            //OnComplete = "$.unblockUI()",
        }, new { @class = "row search-box cols-bottom" }))
        {
            @Html.AntiForgeryToken()*@

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </div>
        <hr />
        <div class="form-group">
            <div class="col-md-offset-2 col-md-12 text-success">
                @ViewBag.Records
            </div>
        </div>


        @*}*@
    </div>
</form>

• Note that reloadContent() is just an empty function.

UPDATE:

After comparing the html produced from both projects, I realized that the tag wa data-ajax="true" was missing. I added it and it all worked as it should.

Answer 1

Did you include jquery-unobtrusive-ajax .

@section scripts{

    <script src="https://ajax.aspnetcdn.com/ajax/jquery.unobtrusive-ajax/3.2.5/jquery.unobtrusive-ajax.min.js"></script>
}

Answer 2

You can use this small library to migrate on net core. The usage is very similar to Ajax.BeginForm and require a few changes. Check also my answer here