关闭解除ajax请求的Bootstrap警报

时间:2014-03-12 13:40:21

标签: jquery asp.net-mvc-4 twitter-bootstrap twitter-bootstrap-2

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

3 个答案:

答案 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页面。