Question

我已经创建了一个包含几个步骤的引导向导。当用户点击“保存＆amp;继续＆＃39;在第二个向导步骤上的按钮，我想在转移到第三步之前提交输入到底层数据存储的表单数据。我似乎无法让表单提交工作，控制器上的动作方法没有被调用。这是页面上的javascript，它被点击，但控制器动作不是

＆＃13;

$("#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']);
                    }
                });
            }
        });

＆＃13;

和控制器动作方法

[HttpPost]
    [ValidateAntiForgeryToken]

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

是否有任何最佳做法＆＃39;这样做？我做错了什么？

Answer 1

好吧，作为一个开始，我可以帮助你能够调用控制器动作的部分。至于问题＆＃34;最佳实践＆＃34;，您提供的细节很少。

所以：

/**
 * 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'));

Nota bene：

我使用了dataType: json。您也可以使用dataType: html。如果，那么在没有json_encode的情况下回显字符串或数组。
我将您的returnval重命名为response。
观看ajax fail()的参数，例如旧error()的参数。
我在函数中构造了js代码。
当我来自PHP世界时，我使用echo打印并json_encode以JSON格式进行编码。

祝你好运！

Answer 2

我最终发现了isue，我使用的向导示例中已经有一个表单元素（没有注意到它），我已经用我自己的形式包装了这个表单提交了表单。现在工作正常

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

2 个答案: