Ajax.BeginForm在引導模態提交兩次

Question

我有一個調用包含形式的引導模式對話框的頁面。表單通過ASP.NET Razor Htmlelpers呈現，具體來說我稱之爲Ajax.BeginForm（）方法。我沒有添加任何額外的客戶JavaScript到提交按鈕的點擊事件。

當我點擊提交按鈕，看來，無論是引導和ASP.NET輔助函數的代碼粘貼到窗體的提交按鈕的事件，引起了形式發佈兩次。我使用的引導爲我的網站佈局，我選擇了使用Ajax的傭工能夠使用ASP.NET驗證在我看來，並有相應的代碼張貼的形式回到我處理的動作。

我怎樣才能阻止執行（暫停雙崗）的引導代碼，但保留了AJAX輔助代碼（保持valiations）？

這裏是頁的剃刀/ HTML佈局

@model Valkyrie.Web.Models.Tickets.TicketHistoryViewModel 

@{ 
    ViewBag.Title = String.Format("{0} Ticket History", Model.DisplayName); 
} 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryval") 
<style> 
    div.list-group-item { 
     color: #000; 
    } 

    #myModal { 
     color: #000; 
    } 
</style> 


<div class="list-group"> 
    @foreach (var ticket in Model.Tickets) 
    { 
     <div class="list-group-item"> 

      <div class="pull-right"> 
       TT: #@ticket.TicketId.ToString().PadLeft(7, '0') <br /> 
       Opened @ticket.DateCreated.ToShortDateString() 
       <br /> @ticket.OpenedBy 
      </div> 
      <div style="clear: both; padding-bottom: 10px;"> 
       @ticket.Interactions[0].InteractionTypeId <br /> 
       @ticket.Interactions[0].Notes 
      </div> 
      <div class="pull-left"> 
       <a href="#">@(ticket.Interactions.Count-1) follow ups</a> 
      </div> 
      <div class="pull-right"> 
       <a href="#myModal" role="button" data-toggle="modal" data-ticket="@ticket.TicketId" class="btn btn-success btn-pop">Add Follow Up</a> 
      </div> 
      <div class="clearfix"></div> 
     </div> 
    } 
</div> 
<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Add Followup</h4> 
      </div> 
      <div class="modal-body"> 

       @using (Ajax.BeginForm("Interaction", "Ticket", new AjaxOptions { AllowCache = false, HttpMethod = "POST", OnSuccess = "doubleStuff" })) 
       { 
         <div class="form-horizontal"> 
      @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
      @Html.HiddenFor(model => model.InteractionId) 
      @Html.HiddenFor(model => model.TicketId, new { @class = "ticket-id" }) 
      @Html.HiddenFor(model => model.UserId) 

      <div class="form-group"> 
       @Html.LabelFor(model => model.InteractionTypeId, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.DropDownListFor(model => model.InteractionTypeId, new SelectList(Model.InteractionTypes, "Value", "Text"), "Select", new { @class = "form-control" }) 
        @Html.ValidationMessageFor(model => model.InteractionTypeId, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.TextAreaFor(model => model.Notes, new { @class = "form-control", rows = 10 }) 
        @Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

     </div> 


        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="submit" id="submit_button_1" class="btn btn-primary">Save changes</button> 
        </div> 
       } 
      </div> 
     </div> 
    </div> 
</div> 

@section Scripts { 
<script type="text/javascript"> 

    var fobj = {}; 
    fobj.InteractionTypeId = $('#InteractionTypeId'); 
    fobj.TicketId = $('#TicketId'); 
    fobj.UserId = $('#UserId'); 
    fobj.Phone = $('#Phone'); 
    fobj.Email = $('#Email'); 
    fobj.Notes = $('#Notes'); 

    function doubleStuff(data) { 
     alert(data.HasErrors); 
    } 

    $(document).ready(function() { 
     $(".btn-pop").on("click", function (event) 
     { 
      var button = $(this); 
      var ticketId = button.data('ticket'); 
      $('.ticket-id').val(ticketId); 
      fobj.Phone.val(''); 
      fobj.Email.val(''); 
      fobj.Notes.val(''); 
      fobj.InteractionTypeId.val(''); 

     }); 

     //$('#submit_button_1').on("click", 
     // function (event) { 

     // }); 

    }); 



</script> 
} 

Answer 1

我的猜測是，你有jquery.unobtrusive-ajax.min.js引用了兩次。

此外，如果你要附加點擊按鈕的事件改變從提交按鈕，它的類型。 （但如果您想讓jquery.unobtrusive-ajax.min.js爲您處理它，則不需要）。因此，首先確保您僅參考jquery.unobtrusive-ajax.min.js一次（並刪除$(".btn-pop").on("click"..)事件）。