取消MVC表单提交
Cancel MVC Form submit
我正在使用AJAX提交表单。字段位于被发送到控制器动作的局部视图中。局部视图位于一个div中,当单击主表单上的按钮时,该div会弹出。如果用户完成表单并单击提交按钮,那么更新将在控制器操作中执行,一切正常。但是,如果用户改变了主意,我喜欢添加一个取消按钮来隐藏表单。添加按钮和隐藏表单按预期工作,但是对控制器动作方法的调用仍然发生。我试过使用
e.preventDefault();
但是这行不通。
我已经尝试使用第二个JQuery方法附加到取消id,但我不能得到这个工作。
我的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);
}
并提交&取消按钮:
<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>
有没有人有任何建议,可能得到这个工作,因为我希望?
由于您的表单是在初始页面呈现后动态加载的,因此您需要使用事件委托,通过使用.on()
向呈现页面时存在的祖先添加侦听器
$('#cancel').on('click', function () {
dialog.hide();
});
使用$(document).on('click', '#cancel', function () {
dialog.hide();
});
但是将document
替换为第一次生成页面时存在的最接近的祖先
相关文章:
- HTML表单提交时未执行外部函数
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- ASP MVC复选框表单提交问题
- jquery禁用表单提交时输入MVC 4
- 客户表单提交日期时间,MVC应用程序
- 在表单提交后,无法使用 mvc razor 中的 ajax 从其中的另一个分部视图刷新分部视图
- MVC/Javascript:如何在表单提交中发布整数数组
- ASP MVC jQuery验证专注于工作,但不专注于表单提交
- 表单提交后显示感谢信息mvc umbraco
- Spring MVC-处理错误,使用多个表单提交表单
- 表单提交和javascript函数调用提交按钮点击在spring mvc
- Jquery表单提交不会到达MVC控制器
- 使用Javascript函数防止MVC表单提交
- 没有表单提交的MVC表单验证
- 在ASP中.NET MVC 3视图,如何在JavaScript中处理所有表单提交
- 取消MVC表单提交
- 在表单提交后启用文本框和按钮.Net MVC 4
- 表单提交后的ASP.net MVC成功提示
- 防止表单提交,使用Ajax检查记录,如果有记录,请继续ASP.NET MVC
- 数据表在表单提交时未将 rowid 返回给 asp.net MVC 控制器