在特定的引导向导步骤中提交表单数据

Question

我创建了一个包含几个步骤的引导向导。当用户在第二个向导步骤中单击“保存并继续”按钮时，我想在进入第三个步骤之前将输入的表单数据提交到底层数据存储。我似乎无法让表单提交工作，控制器上的 actionmethod 没有被调用。这是页面上的 javascript，它正在被点击，但控制器操作不是

$("#scheduleReport").on("click", function () {
            // Get the record's ID via attribute
            //var id = $(this).attr('data-id');
            $('#frmAddSchedule').validate();
            $('#frmAddSchedule').submit();
        });

        $('#frmAddSchedule').on('submit', function (e) {
            var $form = $(e.target);
            if ($form.valid()) {

                e.preventDefault();
                $.ajax({
                    url: '@Url.Action("Create", "ReportScheduler")',
                    data: $form.serialize(),
                    async: true,
                    type: 'POST',
                    success: function (returnval) {
                        if (returnval.success == true) {
                            
                            $("#schedulerGrid").igGrid("dataBind");
                        }
                        if (returnval.success == false) {
                            //$form.parents('.bootbox').modal('hide');
                            bootbox.alert({ title: '<div class="text-center text-danger"><i class="fa fa-exclamation-triangle"></i>&nbsp;&nbsp;ERROR</div>', message: returnval['responseText'] });
                        }
                    },
                    error: function (returnval) {
                        //$form.parents('.bootbox').modal('hide');
                        bootbox.alert(returnval['responseText']);
                    }
                });
            }
        });

和控制器动作方法

[HttpPost]
    [ValidateAntiForgeryToken]

    public async Task<ActionResult> Create([Bind(Prefix = "Schedule")]ReportScheduleViewModel item)
    {

有没有这样做的“最佳实践”？我做错了什么？

Answer 1

我最后发现了问题，我使用的向导示例里面已经有一个表单元素（没有注意到它），我用我自己的表单包装了它，它正在停止表单提交。现在可以正常使用了

Answer 2

好吧，作为开始，我也许可以帮助您处理蜜蜂能够调用控制器动作的部分。至于“最佳实践”这个问题，您提供的细节很少。

所以：

/**
 * On document ready.
 * 
 * @return void
 */
$(document).ready(function () {
    activateScheduleReport();
    activateAddScheduleFormSubmit();
});

/**
 * Activate schedule report click event.
 * 
 * @return void
 */
function activateScheduleReport() {
    $("#scheduleReport").on("click", function () {
        // Get the record's ID via attribute
        //var id = $(this).attr('data-id');
        validateAddScheduleForm();
        submitAddScheduleForm();
    });
}

/**
 * Activate add schedule form submit.
 * 
 * @return void
 */
function activateAddScheduleFormSubmit() {
    $('#frmAddSchedule').submit(function (e) {
        var $form = $(this);

        var ajax = $.ajax({
            async: true, // Please don't use this! :-)
            method: 'post',
            dataType: 'json',
            url: '@Url.Action("Create", "ReportScheduler")',
            data: $form.serialize()
        });
        ajax.done(function (response, textStatus, jqXHR) {
            if (response.success) {
                $("#schedulerGrid").igGrid("dataBind");
            } else {
                //$form.parents('.bootbox').modal('hide');
                bootbox.alert({
                    title: '<div class="text-center text-danger"><i class="fa fa-exclamation-triangle"></i>&nbsp;&nbsp;ERROR</div>',
                    message: response.responseText
                });
            }
        });
        ajax.fail(function (jqXHR, textStatus, errorThrown) {
            //$form.parents('.bootbox').modal('hide');
            bootbox.alert(textStatus + ' ' + errorThrown);
        });
        ajax.always(function (response, textStatus, jqXHR) {
            // Do whatever you want here...
        });

        // Use this to prevent page refreshing. No need for preventDefault().
        return false;
    });
}

/**
 * Validate add schedule form.
 * 
 * @return void
 */
function validateAddScheduleForm() {
    $('#frmAddSchedule').validate();
}

/**
 * Submit add schedule form.
 * 
 * @return void
 */
function submitAddScheduleForm() {
    $('#frmAddSchedule').submit();
}

在你应该使用的动作中：

echo json_encode('whatever response string');

或

echo json_encode(array(responseText: 'whatever response string'));

注意事项：

• 我使用了dataType: json。您也可以使用dataType: html。如果，那么 回显不带json_encode 的字符串或数组。
• 我将您的 returnval 重命名为 response。
• 观察ajax fail()的参数，例如旧的error()。
• 我在函数中构建了 js 代码。
• 由于我来自 PHP 世界，我使用 echo 进行打印，使用 json_encode 以 JSON 格式进行编码。

祝你好运！