0

Вот два кода, помогите сравнить, и с чем лучше работать?

1 Ненавязчивый 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-запрос к форме

@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> 

+ Я правильно понял, что если хочу ajax в любом виде, то методы в контроллерах должны быть обычными, никакими не асинхронными (async/await)?

6
  • 1
    а чем эти два кода отличаются?
    – Grundy
    8 сен 2016 в 11:51
  • @PavelMayorov, потому что на первый никто не ответил :-)
    – Grundy
    8 сен 2016 в 11:56
  • @Grundy обновил вопрос, теперь отличаются)
    – Yan Linkin
    8 сен 2016 в 12:02
  • @PavelMayorov уже нету)
    – Yan Linkin
    8 сен 2016 в 12:03
  • Что такое UrlAddress и откуда там берутся данные?.. 8 сен 2016 в 12:05

1 ответ 1

0

Работайте так, как вам проще.

Достоинства "ненавязчивого" ajax:

  • выглядит проще;
  • сложнее допустить ошибку.

Достоинства обычного ajax:

  • можно принимать ответы в формате json, а не только куски html;
  • не засоряется глобальное пространство имен обработчиками событий.

Обращаю внимание, что вы в своем коде умудрились допустить аж две ошибки:

  • надо подписываться не на событие клика по кнопке - а на событие submit у формы. Это позволит отправлять форму по нажатию Enter;
  • Обертка $(document).ready(function () { тут лишняя, она лишь создает период времени, когда форма не работает.

По поводу связи ajax и асинхронных методов контроллера - не придумывайте. Браузер ничего не знает про то, синхронные или асинхронные методы в контроллере и знать не может. Это - деталь реализации на стороне сервера. Можете обработчики ajax-вызовов хоть на php писать.

10
  • Очень исчерпывающе) Спасибо! У меня две формы на одной, поэтому если отправить по нажатию Enter, тогда отправится все сразу, поэтому и работаю Ajax'ом по кнопкам.
    – Yan Linkin
    8 сен 2016 в 13:02
  • @YanLinkin в смысле? Форма внутри формы? Не делайте так 8 сен 2016 в 13:08
  • нашел инфу про: "Обертка $(document).ready(function () { тут лишняя, она лишь создает период времени, когда форма не работает." Тут : (metanit.com/sharp/mvc/10.2.php) в разделе "Функция jQuery". Там есть пару вариантов, которые могут быть; я думал это все обычные сокращения одной и той же функции, поэтому выбрал любую :)
    – Yan Linkin
    8 сен 2016 в 13:10
  • @YanLinkin забудьте то, что написано на той странице. Прочитал пару абзацев - там бред полный. Лучше читайте документацию: api.jquery.com 8 сен 2016 в 13:12
  • не так выразился. Есть View, оно содержит две PartialView, у каждой по своей Ajax.BeginForm(). И одновременно выводятся на экран, поэтому Enter по submit'у - хороший совет, запишу его, но не в этот раз).
    – Yan Linkin
    8 сен 2016 в 13:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.