Question

我正在使用AJAX提交表单。这些字段位于部分视图中，可以发送到控制器操作。部分视图位于单击主窗体上的按钮时弹出的div中。如果用户完成表单并单击提交按钮，则更新将在控制器操作中执行，一切正常。但是，如果用户改变主意，我想添加一个取消按钮来隐藏表单。添加按钮并隐藏表单按预期工作，但仍然会调用控制器操作方法。我尝试过使用

e.preventDefault();

但这还没有奏效。

我尝试使用附加到取消ID的第二个JQuery方法，但我无法使其正常工作。

我的JQuery看起来像这样：

$('#VisitorModal').on('submit', '#visitorform', function (e) {
    var data = $(this).serialize();
    var url = '@Url.Action("CreateVisitor", "Meetings")';
    var text = $('#title').val() + ' ' + $('#firstname').val() + ' ' + $('#surname').val() + ' (' + $('#company').val() + ')'; // a value from the form that you want as the option text
    $.post(url, data, function (response) {
        if (response) {
            $('#VisitorID').append($('<option></option>').val(response).text(text)).val(response);
        } else {
            dialog.hide();
        }
    }).fail(function () {
        dialog.hide();
    });
    dialog.hide();
    e.preventDefault();
    //return false; // cancel the default submit
});

$('#cancel').on('click', function () {
    dialog.hide();
});

这是我的行动方法：

[HttpPost]
public JsonResult CreateVisitor(AppointmentViewModel model)
{
    var visitor = new Visitor()
    {
        Title = model.VisitorTitle,
        FirstName = model.VisitorFirstName,
        LastName = model.VisitorSurname,
        Company = model.VisitorCompany
    };
    db.Visitors.Add(visitor);
    db.SaveChanges();
    return Json(visitor.id);
}

并提交＆amp;取消按钮：

<div class="form-group">
    <div class="col-md-offset-2 col-md-5">
        <input type="submit" value="Create" class="btn btn-success" id="submit" />
        <input type="button" value="Cancel" class="btn btn-warning" id="cancel" />
    </div>
</div>

有没有人有任何建议可以让我的工作像我希望的那样？

Answer 1

由于您的表单是在呈现初始页面后动态加载的，因此您需要使用event delegation使用.on()将侦听器添加到呈现页面时存在的祖先

而不是

$('#cancel').on('click', function () {
    dialog.hide();
});

使用

$(document).on('click', '#cancel', function () {
    dialog.hide();
});

但将document替换为首次生成页面时存在的最近祖先。

取消MVC表单提交

1 个答案: