CODEWITHSUNDEEP
c#asp.net-core
Robin van den Hurk
Robin van den Hurk

Reputation: 189

Ajax request via form in ASP.NET Core

So I know we can do ajax requests using $.ajax(), but in ASP.NET Core we should be able to easily make a ajax request via the form itself using tag helpers. I found this website explaining how to do it.

https://dotnetthoughts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/

However. When I submit the form it redirects the page, rather than only performing a ajax request.

This is what I did:

  1. I created a New ASP.NET Core Web application
  2. Picked MVC type
  3. Added the Microsoft.jQuery.Unobtrusive.Ajax package via NuGet
  4. Added a new MVC Controller (Controllers/LoginController.cs)
  5. Added a new View (Views/Login/Index.cshtml)
  6. Added scripts to _layout.cshtml

These are the contents of the files i created/modified
Views/Login/Index.cshtml:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<form asp-controller="Login" asp-action="SaveForm"
      data-ajax-begin="onBegin" data-ajax-complete="onComplete"
      data-ajax-failure="onFailed" data-ajax-success="onSuccess"
      data-ajax="true" data-ajax-method="POST">
    <input type="submit" value="Save" class="btn btn-primary" />
</form>

<script>
    var onBegin = function () {
        alert("Begin");
    };

    var onComplete = function () {
        alert("Complete");
    };

    var onSuccess = function(context){
        alert(context);
    };

    var onFailed = function(context){
        alert(context);
    };
</script>

Controllers/LoginController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace AspTest.Controllers
{
    public class LoginController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        // I also tried making this async, but this didn't help
        public IActionResult SaveForm()
        {
            return Json(new { test = "this is a test" });
        }
    }
}

Part that i changed in Views/Shared/_Layout.cshtml

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
</environment>

(Added the two jquery-validation scripts)

I would like to update the contents of my page without refreshing the page. For example, display a error message when the user tries to login with incorrect credentials without refreshing the whole page.

I'm not experienced with ASP.NET at all, so I might just be missing something obvious.

Edit: It's worth pointing out that when the page redirects, it redirects to /Login/SaveForm, and the correct data is shown.

Upvotes: 3

Views: 4997

Answers (1)

Xueli Chen
Xueli Chen

Reputation: 12695

It seems that the jquery.validate.unobtrusive.min.js you quoted does not work.

I made the test demo, and it worked well. Microsoft.jQuery.Unobtrusive.Ajax that I used is V3.2.6.

The jquery.unobtrusive-ajax scripts I used in _layout.cshtml

 <environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/lib/jquery/dist/jquery.unobtrusive-ajax.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>

You could downloadjquery.validate.unobtrusive.js from here and add it to your wwwroot/lib/jquery/dist

Upvotes: 2

Related Questions