我正在开发一个 MVC4 移动应用程序，它使用多个表单，这些表单通过 ajax 加载到布局的一个部分中。我已经关闭了 Ajax 的 jQuery 移动设备，因此我可以自己管理 Ajax。大多数表单工作正常，加载并通过 ajax 提交。但是，到目前为止，有一种表单拒绝触发表单提交并像其他表单一样通过 ajax 提交表单。首先，当用户单击添加联系人时会加载表单，这可以正常工作：
// Handle the add contact button click
$('#btnAddNewContact').on('click', function (e) {
e.preventDefault();
// Make sure a location was selected first.
var locationID = $('#cboLocation').val();
if (locationID.length === 0) {
//$('#alertTitle').text('REQUIRED');
$('#alertMsg').html("<p>A Contact must be associated with a Location.</p><p>Please select or add a Location first.</p>");
$('#alertDialogDisplay').click();
} else {
SaveOpportunityFormState();
$.cookie('cmdLocationId', locationID, { path: '/' });
$.mobile.loading('show');
$.ajax({
url: '/Contact/Add',
type: 'GET',
cache: false,
success: function (response, status, XMLHttpRequest) {
$('section.ui-content-Override').html(response);
// Refresh the page to apply jQuery Mobile styles.
$('section.ui-content-Override').trigger('create');
// Force client side validation.
$.validator.unobtrusive.parse($('section.ui-content-Override'));
},
complete: function () {
$.cookie('cmdPreviousPage', '/Opportunity/Add', { path: '/' });
AddContactLoad();
ShowSearchHeader(false);
$.mobile.loading('hide');
},
error: function (xhr, status, error) {
// TODO - See if we need to handle errors here.
}
});
}
return false;
});
请注意，在成功加载表单后，该AddContactLoad()函数被触发。这工作正常，这里是代码：
function AddContactLoad() {
$('#contactVM_Phone').mask('(999) 999-9999? x99999');
$('#frmAddContact').on('submit', function (e) {
e.preventDefault();
if ($(this).valid()) {
$.mobile.loading('show');
$.ajax({
url: '/Contact/Add',
type: 'POST',
cache: false,
data: $(this).serialize(),
success: function (response, status, XMLHttpRequest) {
if (!response) { // Success
ReturnToAddOpportunity();
} else { // Invalid Form
$('section.ui-content-Override').html(response);
// Force jQuery Mobile to apply styles.
$('section.ui-content-Override').trigger('create');
// Force client side validation.
$.validator.unobtrusive.parse($('section.ui-content-Override'));
AddContactLoad();
$.mobile.loading('hide');
}
},
complete: function () {
},
error: function (xhr, status, error) {
// TODO - See if we need to handle errors here.
}
});
}
return false;
});
$('#btnCancel').on('click', function (e) {
e.preventDefault();
// See where add contact was called from.
var previousPage = $.cookie('cmdPreviousPage');
if (previousPage.indexOf("Detail") >= 0) {
ReturnToOpportunityDetails();
} else {
ReturnToAddOpportunity();
}
return false;
});
}
如果我单击取消按钮，则会触发该代码，因此我知道这也可以正常工作。这是我的表单代码：
@using (Html.BeginForm("Add", "Contact", FormMethod.Post, new { @id = "frmAddContact" }))
{
@Html.ValidationSummary(true)
@Html.AntiForgeryToken()
-- Form Fields Here --
<div class="savecancel" >
<input type="submit" value="Save" data-mini="true", data-theme="b", data-inline="true" />
<a href="#" id="btnCancel" data-role="button" data-inline="true" data-theme="b" data-mini="true">Cancel</a>
</div>
}
如您所见，表单名为 frmAddContact，这就是AddContactLoad()函数将提交事件附加到的内容。为了保存我的唯一身份，我无法弄清楚为什么表单不像应用程序中的其他表单一样通过 ajax 帖子提交。我是否缺少某种初始化，我只是不知道。如果有人可以请帮助我真的很感激！