使用bootrap模式调用ajax后插入多个记录

时间:2016-10-15 22:30:15

标签: jquery ajax asp.net-mvc twitter-bootstrap

我在ASP.NET CORE项目上工作。我在一个视图中使用Bootstrap的模态并调用ajax在数据库中插入新记录。在bootstrap模式对话框中有少量输入字段,保存和关闭按钮。第一次单击“保存”后,Bootstrap的模态将消失,新的记录将插入到DB表中。但是,当我打开模态时它会插入两条记录,然后再次单击“保存”。

此外,如果我打开模态输入并再次保存,它将插入三条记录。

它似乎总是保留先前的插入实例会话。我花了几个小时研究它,但仍然失败了。

感谢您的帮助和建议。感谢。

仅供参考:

                     $('#exampleModal').on('show.bs.modal', function (event)                             

                     {
                         var modal = $(this);
                         modal.find('.modal-title').text('New Record');
              modal.find('#saveNewServiceRecord').click(function () {
                             _addActivity();

                         });
                     });


                     $('#exampleModal').on('hidden.bs.modal', function () {
                         var modal = $(this);
                         modal.find('.modal-body input').val('');

                     });





                     function _addActivity() {
                         var data = {
                             ActivityDetails: $('#message-text').val(),
                             TicketID:      id                                                                       
                         };

                             $.ajax({
                                 url: "/Record/Create",
                                 type: "POST",
                            contentType: "application/json;charset=utf-8",
                                 dataType: "json",
                                 data: JSON.stringify(data),
                                 success: function (result) {

                                     _getRecordList();
                                 },
                                 error: function(errormessage) {
                                     alert(errormessage.responseText);
                                 }
                             });
                         }

1 个答案:

答案 0 :(得分:1)

每次click事件被触发时,您都会附加show.bs.modal事件。

modal.find('#saveNewServiceRecord').click(function () {
     _addActivity();
}

您需要在click事件之外定义此show.bs.modal事件,或者unbind事件中hidden.bs.modal事件。我建议您使用onoff来解除绑定事件。

或者使用以下内容:

$('#exampleModal').on('show.bs.modal', function (event)  {
      var modal = $(this);
      modal.find('.modal-title').text('New Record');
})
.on('click', '#saveNewServiceRecord', function() {
    _addActivity()
});
function _addActivity() {
   // your code
}