Как получить ответ от ajax на кнопку отправки в форме ASP.NET MVC на текущей странице

Question

Когда я нажимаю на кнопку «Отправить», я хочу остаться на странице и сделать Ajax-вызов, и просто показать окно предупреждения об успехе.Но с этим кодом он перенаправляет меня на

http://localhost:65464/Home/TestMethod

Мой HMTL:

(...)
@using (Html.BeginForm("TestMethod", "Home", FormMethod.Post))
{
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th colspan="2" align="center">Person Details</th>
        </tr>
        <tr>
            <td>PersonId: </td>
            <td>
                @Html.TextBoxFor(m => m.Name)
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit" id="submitBtn" /></td>
        </tr>
    </table>
}

Мой контроллер:

    [AllowAnonymous]
    [HttpPost]
    public bool TestMethod()
    {
        return true;
    }

Я хочу сохранить синтаксис "Razor", потому что у меня есть аннотации в моей модели (проверки).

Я могу поместить в файл .js ajax и вызвать этот метод, но тогда я не могу проверить напрямую из аннотаций моей модели в форме.Как остаться на странице без перенаправления?

Обновлен файл js:

 $('#submitBtn').click(function () {
    //var form = $('#emailForm');
    //form.validate();
    var obj = new Object();
    obj.Name = $('#Name').val();
    obj.CheckInCheckOutDate = $('#CheckInCheckOutDate').val();
    obj.MobilePhone = $('#MobilePhone').val();
    obj.EMail = $('#EMail').val();
    obj.AdultsNumber = $('#AdultsNumber').val();
    obj.ChildrenNumber = $('#ChildrenNumber').val();
    obj.MessageBody = $('#MessageBody').val();
    obj.MobilePrefixCountry = $('#MobilePrefixCountry').val();
    obj.ApartmentName = $('#ApartmentName').val();
    obj.NumberOfNights = $('#NumberOfNights').val();

    $.ajax({
        url: "/Home/SendEmail",
        type: "POST",
        data: JSON.stringify(obj),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            console.log(data)
            $('#successAlert').show('fade')
                .delay(3000)
                .fadeOut(function () {
                    $(this).remove();
                });
        },
        error: function () {
            $('#errorAlert').show('fade')
                .delay(3000)
                .fadeOut(function () {
                    $(this).remove();
                });
        },
    });
});

Я вызываю другой метод, но на самом деле принцип тот же ..

Что япопробовал на основе решения @ D-Shiha: js:

$('#submitBtn').click(function (event) {
    event.preventDefault();
    console.log('happy');
});

мой новый html:

@using (Html.BeginForm("TestMethod", "Home", FormMethod.Post))
{

    <table cellpadding="0" cellspacing="0">
        <tr>
            <th colspan="2" align="center">Person Details</th>
        </tr>
        <tr>
            <td>PersonId: </td>
            <td>
                @Html.TextBoxFor(m => m.Name)
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="Submit" id="submitBtn" /></td>
        </tr>
    </table>
}

Answer 1

Вы можете использовать AjaxHelper вместо HTMLHelper для создания формы для отправки страницы без полной обратной отправки на сервер.это поможет вам проверить форму с помощью аннотаций и контролировать обратные вызовы об успешном и неудачном выполнении.

Ajax.BeginForm принимает следующие параметры

• actionName
• controllerName
• routeValues ​​
• ajaxOptions
• htmlAttributes

сначала добавьте ссылку на библиотеку jquery.unobtrusive-ajax из пакетов NuGet

Замените это:

@using (Html.BeginForm("TestMethod", "Home", FormMethod.Post))

этим

@using (Ajax.BeginForm("TestMethod", "Home", new AjaxOptions { HttpMethod = "POST"}))

, и вы можете добавить событие OnSuccess в AjaxOptions с помощью функции обратного вызова JS

Надеюсь, это поможет.

Пожалуйста, обратитесь к этой ссылке для получения более подробной информации: https://www.c -sharpcorner.com / UploadFile / 0c1bb2 / ajax-beginform-in-Asp-Net-mvc-5 /

AjaxHelper класс: https://docs.microsoft.com/en-us/previous-versions/aspnet/dd505113(v=vs.118)

Answer 2

Первый идентификатор формы назначения, подобный этому

@using (Html.BeginForm("TestMethod", "Home", FormMethod.Post,new {id="idForm"}))
{...

Обработка формы отправки и сериализации формы и отправки с помощью AJAX-операции следующим образом.

$("#idForm").submit(function(e) {
    var form = $(this);        
    $.ajax({
           type: "POST",
           url: "/Home/SendEmail",
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {

           }
         });

    e.preventDefault(); 
});

Не нужны все эти

obj.Name = $ ('# Name'). Val ();

obj.CheckInCheckOutDate = $ ('# CheckInCheckOutDate'). Val ();

obj.MobilePhone = $ ('# MobilePhone'). Val ();

obj.EMail = $ ('# EMail') .val ();

obj.AdultsNumber = $ ('# AdultsNumber'). val ();

...