Ajax.BeginForm в Bootstrap Модальное представление дважды

Question

У меня есть страница, которая вызывает диалог Bootstrap Modal, содержащий форму. Форма отображается через ASP.NET Razor Htmlelpers, в частности, я вызываю метод Ajax.BeginForm(). Я еще не добавил дополнительный javascript клиента в событие click кнопки отправки.

Когда я нажимаю кнопку отправки, кажется, что и Bootstrap, и помощники ASP.NET прикрепляют код к событию отправки формы, заставляя форму публиковать дважды. Я использую Bootstrap для моего макета сайта, и я решил использовать помощники Ajax, чтобы иметь возможность использовать проверки ASP.NET на мой взгляд, и иметь соответствующий код, чтобы отправить форму обратно в действие, обработанное для меня.

Как я могу остановить выполнение кода Bootstrap (остановка двойного сообщения), но сохранить код помощника Ajax (сохраняя валионации)?

Вот страница Бритва/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"..)).