Here are two codes, help to compare, and with what is better to work?

1 Unobtrusive Ajax

@using (Ajax.BeginForm("Login", "Account", new AjaxOptions { HttpMethod = "Post", OnSuccess = "OnSuccess" })) { <div> <hr /> @Html.ValidationSummary() <div> @Html.TextBox("Email", "Введите E-mail") </div> <div> @Html.TextBox("Password", "Введите Password") </div> <div> <button id="buttonLogIn" type="submit">LOG IN</button> </div> </div> } <script type="text/javascript"> function OnSuccess(data) { //alert("Запрос был успешно выполнен. Получены следующие данные: \n" + data); var text = document.getElementById('UrlAddress').value; $(location).attr('href', text); } </script>

2 Ajax request to the form

 @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "FormLogIn" })) { <div> <hr /> @Html.ValidationSummary() <div> @Html.TextBox("Email", "Введите E-mail") </div> <div> @Html.TextBox("Password", "Введите Password") </div> <div> <button id="buttonLogIn" type="submit">LOG IN</button> </div> </div> } <script> $(document).ready(function () { $("#buttonLogIn").on("click", function (e) { e.preventDefault(); $.ajax({ type: "POST", data: $("#FormLogIn").serialize(), url: '@Url.Action("Login", "Account")', success: function () { var text = document.getElementById('UrlAddress').value; $(location).attr('href', text); } }); }); }); </script>

+ I correctly understood that if I want ajax in any form, then the methods in the controllers should be normal, not asynchronous (async / await)?

  • one
    But how do these two codes differ? - Grundy
  • @PavelMayorov, because nobody answered the first one :-) - Grundy
  • @Grundy updated the question, now different) - Yan Linkin
  • @PavelMayorov is gone) - Yan Linkin
  • What is UrlAddress and where does the data come from? .. - Pavel Mayorov

1 answer 1

Work as it is easier for you.

Advantages of "unobtrusive" ajax:

  • looks simpler;
  • harder to make a mistake.

Advantages of ordinary ajax:

  • You can receive answers in json format, and not just chunks of html;
  • The global namespace is not littered with event handlers.

I pay attention that you in your code managed to make as many as two mistakes:

  • it is necessary to subscribe not to the click event on the button - but to the submit event at the form. This will allow you to submit the form by pressing Enter;
  • The wrapper $(document).ready(function () { superfluous here, it only creates a period of time when the form does not work.

Concerning communication of ajax and asynchronous methods of the controller - do not invent. The browser does not know anything about whether synchronous or asynchronous methods in the controller and can not know. This is a server side implementation detail. You can write ajax call handlers at least in php.

  • Very comprehensive) Thank you! I have two forms on one, so if I send it by pressing Enter, then I’ll go all at once, so I’m working with Ajax on the buttons. - Yan Linkin
  • @YanLinkin in a sense? The form inside the form? Do not do this - Pavel Mayorov
  • I found the info about: "The wrapper $ (document) .ready (function () {here is superfluous, it only creates a period of time when the form does not work. " JQuery function " . There are a couple of options that can be; I thought it was all the usual abbreviations of the same function, so I chose any one :) - Yan Linkin
  • @YanLinkin forget what is written on that page. I read a couple of paragraphs - there is complete nonsense. Better read the documentation: api.jquery.com - Pavel Mayorov
  • not put it that way. There is a View , it contains two PartialViews , each with its own Ajax.BeginForm () . And at the same time displayed on the screen, so Enter by submit'u - good advice, I will write it, but not this time). - Yan Linkin