JSON не останавливает отправку формы в модальном окне

У меня есть проект MVC. Я открываю форму в модальном диалоге. Пользователь заполняет форму и нажимает сохранить. Форма отправляет сообщения в контроллер, однако я пытаюсь перехватить и отправить через JSON.

Посмотрите в разделе Dev инструменты сети, а также наличие alert() в моем json, он не работает, и я думаю, что он не подключен должным образом? Я прочитал несколько страниц, и кажется, что мой JSON в основном правильно.

Я знаю, что есть связь между родительской страницей и окном... которое является div, которое становится модальным окном. Однако я не знаю достаточно, чтобы определить, является ли это частью поломки.

В родительском окне вот как запускается мой модал.

$("#edit").click(function (e)
    {
        e.preventDefault();

        var detailsWindow = $("#window").data("kendoWindow");

        if (!detailsWindow)
        {
            // create a new window, if there is none on the page
            detailsWindow = $("#window")
                // set its content to 'loading...' until the partial is loaded
                .html("Loading...")
                .kendoWindow(
                    {
                        modal: true,
                        width: "800px",
                        height: "400px",
                        title: "@T("....")",
                        actions: ["Close"],
                        content:
                            {
                                url: "@Html.Raw(Url.Action("...", "..."))",
                                data: { ... }
                            }
                    }).data('kendoWindow').center();
        }

        detailsWindow.open();

        });

Приведенный выше код попадает в контроллер и заполняет модель, а затем загружает частичное в центрированный модальный режим, как и ожидалось.

В модальной части у меня есть это:

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "formCreateEdit" }))
{ 
   ...HTML ELEMENTS...
   <input type="submit" name="save" id="save" value="@T("...")" />
}

<script>
   $(function()
   {
     $("#formCreateEdit").submit
        (function (e)
        {
            alert(e);
            e.preventDefault(); //As we will manually submit the form
            $.ajax(
            {
                type: "POST",
                url: "@Html.Raw(Url.Action("...", "..."))",
                data: $(this).serialize(),
                success: function (data)
                {
                    //here we check if database called resulted in Success/Failure
                    if (data.Result === "Success")
                    {
                        alert('Finis');
                    }
                    else
                    {
                        //Show error message or whatever.
                    }
                }
            })
            //});
        });

</script>

Редактировать:

Я также попытался перехватить событие нажатия кнопки. Возможно, я хорошо сделал это неправильно, поэтому вот код, когда я попробовал это:

$('#save').click(function(event)
{
    event.preventDefault();
    // take over and perform ajax post

    alert('ddd');

    $.ajax(
    {
        type: "POST",
        url: "@Html.Raw(Url.Action("...", "..."))",
        data: $(this).serialize(),
        success: function (data)
        {
            //here we check if database called resulted in Success/Failure
            if (data.Result === "Success")
            {
                alert('Finis');
            }
            else
            {
                //Show error message or whatever.
            }
        }
    })

});
Источник

2 ответа

Решение

Таким образом, это оказалось более сложным, потому что модал загружается из представления после прохождения через контроллер... таким образом, он считается динамически генерируемым. Таким образом, решение состояло в том, чтобы прикрепить обработчик событий после создания документа, как показано здесь. Я связался с этими двумя постами, чтобы члены SO, которые поделились со мной своими знаниями, могли получить голосование, если это также принесет пользу вам.

Первый пост

Второй пост

Источник

Перехватывать нажатие кнопки отправки, а не на форме.

$('#save').click(function(event){
   event.preventDefault();
   // take over and perform ajax post
})
Источник
Другие вопросы по тегам