Question

我正在使用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>&nbsp;<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调用并提交表单。 如何避免此行为？

Answer 1

而不是使用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
            }
        });
    }
});

Answer 2

这是因为按钮的默认行为是触发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
  });
});

Answer 3

来自 @Verkion 和 @Matt 的评论都足以解决此问题。 但不在Bootstrap的上下文中。

因为我之前的 MVC4 + Bootstrap 应用程序在相同条件下正常工作。我进一步调查可能是什么原因？

最后我找到了一个愚蠢的解决方案。 解决方案是包含bootstrap-alert脚本文件 （＆＃34;〜/ Content / bootstrap / js / bootstrap-alert.js＆＃34;）< / em>在ajax页面。

关闭解除ajax请求的Bootstrap警报

问题

3 个答案: