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 you have read our privacy policy.

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