我正在使用Bootstrap2。以下是ASP.NET MVC4 AJAX表单中的HTML标记 -
@using (Ajax.BeginForm("ItemPost", "Supervisor", null, ajaxOptions, new { @id = "frmItem" }))
{
<button id="btnShowNewItemDiv" class="btn pull-right">
<i class="sm-icon-cube"></i> <span id="newItemSpan">@Supervisor.IBtnNewItem</span>
</button>
<div id="NewItemDiv" style="display: none;">
<h2 class="h2NewItem">@Supervisor.Ih2</h2>
<div id="itemContent">
<div class="alert alert-info fade in">
<button class="close" data-dismiss="alert" formnovalidate>x</button>
Some text here
</div>
</div>
我故意省略了其余代码以缩短代码。
点击bootstrap alert中的dismiss按钮,它正在执行ajax调用并提交表单。 如何避免此行为?
答案 0 :(得分:0)
而不是使用ajax.beginform将您的ajax调用放入按钮单击事件
$('#btnShowNewItemDiv').on('click', function(){
if ($('form').valid()) {
$.ajax({
url: '@Url.Action("Action", "Controller")',
type: 'POST',
cache: false,
async: true,
data: $('form').serialize(),
success: function(result){
//do something with the result
}
});
}
});
答案 1 :(得分:0)
这是因为按钮的默认行为是触发POST
。
试试这个,停止默认行为:
$(function() {
// wire up close button click event
$("#itemContent button").click(function(e) {
e.preventDefault(); // cancel default behavior
var alert = $(this).closest('.alert');
$(alert).alert('close'); // close the alert
});
});
答案 2 :(得分:0)
来自 @Verkion 和 @Matt 的评论都足以解决此问题。 但不在Bootstrap的上下文中。
因为我之前的 MVC4 + Bootstrap 应用程序在相同条件下正常工作。我进一步调查可能是什么原因?
最后我找到了一个愚蠢的解决方案。 解决方案是包含bootstrap-alert脚本文件 (&#34;〜/ Content / bootstrap / js / bootstrap-alert.js&#34;)< / em>在ajax页面。