Ajax calls without AjaxHelper in aspnet core 2

Question

I was trying to implement an asynchronous call with ajax in my aspnet core 2.0 project, using "Ajax.BeginForm", but then I discovered according to these threads on github and stackoverflow that there's no support to this class in aspnet core, nor MVC 6.

Is there any other way to use ajax assynchronous calls, in aspnet core, besides the old way, with $.ajax function? My problem with this, is that, with AjaxHelper class, I could do everything with razor, in the view file, and keeping everything organized in one place.

Why would i use the razor language to make a loop, and print a list, or whatever, if i have to to make the ajax call, in the js file (or in a < script > tag)? I could work with the data right there, with js, and keep everything there!

How are you guys solving this right now? Thanks for your help.

nothing stopping you putting ajax (and JS script in general) in the view file if you need to. AFAIK Ajax.BeginForm just causes the form to be _submitted_ via ajax, not populated via ajax. So you can still use Razor to build your view, but then just write your own ajax logic to submit the form. — ADyson, Nov 23 '17 at 17:02
The `Ajax.BeginForm` helper method adds some html5 data attrbute to the form and the code in `jquery.unobtrusive-ajax.min.js` will use these attribute values and prevent the normal form submit and do an ajax post instead. You can do the same thing. All you need is, adding the data attributes to your form tag. You can also write your own `submit` event handler and make the ajax call yourself, which will give you 100 % control. — Shyju, Nov 23 '17 at 18:15
@ADyson, the idea is not work with jquery or js directly. in the js file, or in the view, inside a < script > tag. — André M, Nov 24 '17 at 12:14
@Shyju and ADyson , there's some example or tutorial, of how to work with the html5 data attributes, without the ajaxHelper class? Do you guys think it worth the effort? Or should i just work in the tradicional way? I just start the project to learn aspnet core, so i still deciding how to do things. — André M, Nov 24 '17 at 12:16
I don't understand. How do you think you can do ajax without JavaScript? If you want to make an ajax request, you need some code. The MVC ajaxhelper class just hides that from you - behind the scenes it will add some code to your page in the background to run the requests. It just uses the attributes to mark the form as to what should be submitted via ajax. As for examples, just look at the source code of any page which uses that helper, and see what it creates. — ADyson, Nov 24 '17 at 12:23
@ADyson exactly what i mean! I would like to use ajaxHelper because i do not need to declare the js function explicitly! But through html5 attributes. I know there's some javasscript running behind the scenes ;) — André M, Nov 24 '17 at 14:47
In that case, you can simply add the relevant data attribute to your `form` (ex : `data-ajax-mode`,`data-ajax-update`) and include `jquery.unobtrusive-ajax.min.js`. that will give you the minimal ajax experience, if you want better control (what to do on an `onsuccess` event etc) , you need to write custom js. — Shyju, Nov 24 '17 at 15:06
I'm looking into the same thing. Try looking here: https://dotnetthoughts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/ It's pretty much the new way in Core of doing what the old url ajax helpers (ajax.BeginForm) did in MVC 4 & 5. — Sam, Apr 02 '18 at 21:02

Piotr Kula · Answer 1 · 2018-07-17T09:43:29.900

This baffled me a bit too. I was like where is my lovely @Ajax helper that saved me allot of time in JS hell.

As @sam linked they have changed the API to be more HTML 5 semantic - Not sure why but OK

<form asp-controller="Home" 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" />
    <div id="Results"></div>
</form>

You can also do the same on anchors and don't forgot the tag to enable it

<a data-ajax="true" data-ajax-begin="alert('Hello!')">TEST</a>

And then I suppose you could create TypeScript files per page similar to Angular or one TypeScript per site, or just put the script on the page, example

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

Could you explain a bit more? I don't understand what you mean by setting razor page as the handler? The handler is the controller and it will return anything you need it to. Like a rendered Razor page. Just create a new ActionResult and return it as PartialView. I hope that helps?? — Piotr Kula, Dec 10 '18 at 10:08

Ajax calls without AjaxHelper in aspnet core 2

1 Answers1