Question

我有MVC应用程序;当用户单击“保存”按钮时，表单内部应将表单提交给控制器并保存更改。如果满足某些条件，它将弹出JQuery UI dialoog，在对话框中执行一些要求用户输入的ajax调用，并在用户单击对话框内的新“保存”按钮后提交表单。

我的问题是，在单击“保存”按钮上，对话框出现但页面立即发布（我可以看到加载器在浏览器选项卡窗口中工作），用户永远不会与对话框进行交互，因为它消失了成功的页面发布后。我的HTML：

@using (Html.BeginForm("Edit", "LsaPage", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    //some other fields
    <input type="submit" name="actionType" value="Save" id="btnFormSubmit"/>

<div id="inctivePageDialog" title="This is JQuery dialog">
    <p> Do you wish to terminate LSA Page on Grids?</p>
    <div id="termdatebox">
        <h5>Enter Page termination date.</h5> 
        <input class = "datepicker" id="pageTermDate"/>
        <button type="submit" id="finalize" value="Save">Save</button>
    </div>
</div>
}

和JQuery：

$('#btnFormSubmit').click(function (e) { //form submit button

    if (newPageStatus == "I" && pageStatus == "A") { //conditions
        $.ajax({
            type: 'GET',
            url: '@Url.Action("InactivatePage", "LsaPage")',
            data: { pageId: "@Model.PageID" },
            dataType: 'json',
            cache: false,
            async: false,
            success: function (data) {

                var anyActive = 0;

                $.each(data, function (index, item) {
                    //processing
                    anyActive += 1;
                });

                if (anyActive > 0) {

                    $('#inctivePageDialog').dialog("open"); //open the jquery dialog
                }
            }
        });
    }
});

//dialog that shows up when conditions are met
$('#inctivePageDialog').dialog({
    autoOpen: false,
    modal: true,
    width: 500,
    height: 500,
    buttons: {
        Yes: function () {
            //if user clicks yes on the dialog, it will ask for the date and show new Save button
            $('#termdatebox').show(); //show input textbox
            $('.ui-button:contains("Yes")').hide(); //hide original dialog Yes button
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

//Save button click event on the dialog 
$('#finalize').on('click', function (e) {

    var termdate = $('#pageTermDate').val();//get user input

    $('#inctivePageDialog').dialog('close');

    $.ajax({
        type: 'POST',
        url: '@Url.Action("InactivatePageRelations", "LsaPage")',
        data: { pageId: "@Model.PageID", termDt: termdate },
        dataType: 'json',
        cache: false,
        async: false,
        success: function (data) {
            debugger
            $('form').submit();
        }
    });
});

Answer 1

你应该将e.PreventDefault（）作为$（＆＃39;＃btnFormSubmit＆＃39;）的第一行代码。点击（function（e）{...}）它会阻止你的执行表单提交事件，以便您可以执行ajax调用和逻辑

有关致电查看this

的更多信息

Answer 2

您正在通过Ajax发布表单。按钮类型应为type="button"，这将阻止回发的形式。

<button type="button" ...>Save</button>

此外，你不应该同时使用 ajax 和成功：... $（＆＃39; form＆＃39;）。submit（）; ;它没有意义。

表单上的MVC提交打开的JQuery对话框并等待用户响应

2 个答案: