關閉並提交表單引導程序3

我有一個表單內的引導模式對話框。表單通過AJAX提交。我想submit按鈕也駁回模式（否則我結束了剩餘的模式疊加）關閉並提交表單引導程序3

代碼的模式是：

@using (Ajax.BeginForm("SaveConfiguredReport", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "report-details", OnBegin="preProcessing" })) 
{ 
    <div class="modal fade" id="add-filter-dialog" tabindex="-1" role="dialog" aria-labelledby="add-filter-dialog" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h4>Add a Filter</h4> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       </div> 

       <div class="modal-body"> 
        <p>Adding filters allows you to sort what data will be included in the report. These filters will be default for all ongoing usage of this report.</p> 
        <div id="field-templates"></div> 
        <input type="hidden" id="field-template-id" name="FieldTemplateID" /> 

        @Html.DropDownList("OperatorID", Model.Operators.Select(x => new SelectListItem { Text = x.Name, Value = x.OperatorID.ToString() })) 

        <input type="text" name="FilterValue" class="typeahead" id="filter-value" /> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="submit" class="btn btn-success" data-dismiss="modal" name="Command" value="Add">Add Filter</button> 
       </div> 
      </div> 
     </div> 
    </div> 
} 
<!-- other code --> 
<script> 
    function preProcessing() { 
     $('.modal').each(function (index, element) { 
      $(element).modal('hide'); 
     }); 
    } 
</script>

如果我保持data-dismiss屬性提交按鈕，它將解僱表格但不提交。如果我刪除它，表單將被提交但不會被駁回。任何人都有這個運氣？

編輯
我在AJAX調用中添加了一個預處理器，以便在開始時隱藏所有表單。最後隱藏它們不起作用，因爲表單正在替換模式而不是疊加。這是一個解決方法，直到建議一個合適的解決方案

來源

2014-03-27 David Colwell

你找到一個更好的解決辦法？ – mayu

我通常做的是在表單驗證和AJAX post/get成功後通過Javascript關閉它。

$('#add-filter-dialog').modal('hide');

查看更多選擇這裏http://getbootstrap.com/javascript/#modals-usage

來源

2014-03-27 07:14:24 CharlieBrown

謝謝查理，我想這樣做沒有Javascript，但似乎不是一個選項。我試過這個方法，問題是當AJAX調用返回時，它將替換表示使用'$（'$ add-filter-dialog'）。modal（'hide）;'不起作用的表單。我將它作爲一個onbegin事件添加到AJAX調用中，因此表單在開始時隱藏。但是，這會使驗證的目的無效。 +1解決方案tho –

嗨大衛感謝您的upvote。我不完全理解它，但是，如果你的ajax POST是正確的，你正在更新完整的模式，對嗎？看到你的編輯後，我認爲這是一條路，使用AjaxForm提供的鉤子。或者，您可以使用jQuery獨自使用AjaxForm來完成它，但序列化表單併發送它非常容易，而且您可以完全控制。 – CharlieBrown

關閉並提交表單引導程序3

回答

相關問題