триггерное модальное всплывающее окно в форме mvc при нажатии кнопки

Question

У меня есть этот вид в mvc, в котором я показываю детали модели. Модальное всплывающее окно работало нормально, пока я не поместил его в блок формы. Теперь его единственное сообщение вместо отображения всплывающего окна.

Это мнение у меня есть:

@using App.Portal.WebUI.Controllers 
@using MvcPaging 
@model IPagedList<App.Models.Device> 

    @{ 
     ViewBag.Title = "Manage Devices"; 
    } 

<h2>Manage Devices</h2> 
@Html.ActionLink("Add New Device", "Manage", "Handhelds", new { @class = "editUser btn btn-info" }) 
<button id="showInactive" class="btn btn-primary">Show Inactive Devices</button> 
<br /><br /> 
@using (Ajax.BeginForm("Home", "Handhelds", 
    new AjaxOptions {UpdateTargetId = "grid-list", HttpMethod = "get", LoadingElementId = "loading", OnBegin = "beginPaging", OnSuccess = "successPaging", OnFailure = "failurePaging"}, 
    new {id = "frm-search"})) 
{ 
    <div class="input-append"> 
     <input class="span2" id="appendedInputButton" type="text" name="handheld" placeholder="Enter Text" /> 
     <button class="btn" type="submit"> 
      <i class="icon-search"></i>&nbsp;Search</button> 
    </div> 
    <br /> 
    <div id="grid-list"> 
     <div class="table-responsive"> 
      <table id="dataTable" class="table table-striped"> 
       <tr> 
        <td>No</td> 
        <td>Device ID</td> 
        <td>Serial Number</td> 
        <td>Options</td> 
       </tr> 
       @foreach (var device in Model) 
       { 
        <tr> 
         <td>@device.DeviceID</td> 
         <td>@device.DeviceIDView</td> 
         <td>@device.DeviceSerialNumber</td> 
         <td> 
          @Html.ActionLink("Edit", "Manage", new {id = @device.DeviceID}, new {@class = "editUser btn btn-info"}) 
          <button id="btnDeleteHandheld" class="deleteHandheld btn btn-danger" data-id="@device.DeviceID">Delete</button> 
         </td> 
        </tr> 
       } 
      </table> 
     </div> 
    </div> 
} 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('button.btnAddDevice').click(function() { 
      $('#addNewDevice').modal('show'); 
     }); 

     $('button.deleteHandheld').click(function() { 
      $("#hfDeviceId").val($(this).data('id')); 
      $('#deleteConfirm').modal('show'); 
     }); 

     $('button.deleteDeviceConfirm').click(function() { 
      $.ajax({ 
       url: '@Url.Action("Delete", "Handhelds")', 
       data: { deviceid: $("#hfDeviceId").val() }, 
       dataType: "json", 
       type: 'POST', 
       success: function (data) { 
        if (data === "OK") { 
         $('#deleteConfirm').modal('hide'); 
         $('#deleteConfirmation').modal('show'); 
         setTimeout(function() { 
          location.reload(); 
         }, 3000); 
        } 
       }, 
       error: function (textStatus, errorThrown) { 
        Success = false;//doesnt goes here 
       } 
      }); 
     }); 
    }); 

</script> 

<div id="deleteConfirm" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <h4>Are you sure you want to remove the device?</h4> 
       <button class="btn btn-success deleteDeviceConfirm">Yes</button> 
       <button class="btn btn-danger" data-dismiss="modal">No</button> 
       <input type="hidden" id="hfDeviceId" /> 
      </div> 
     </div> 
    </div> 
</div> 

<div id="deleteConfirmation" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <h4>Device removed</h4> 
       <button class="btn btn-danger btn-block" data-dismiss="modal">OK</button> 
      </div> 
     </div> 
    </div> 
</div> 

мне нужна кнопка с идентификатором btnDeleteHandheld, чтобы вызвать соответствующее модальное всплывающее окно. Может ли кто-нибудь дать мне несколько советов, что мне нужно изменить?

Спасибо, Лацьал

Answer 1

Я думаю, что button сделать вход отправить по умолчанию. Для того, чтобы предотвратить пост использовать preventDefault так:

$('button.deleteHandheld').click(function (e) { 
     e.preventDefault(); 
     $("#hfDeviceId").val($(this).data('id')); 
     $('#deleteConfirm').modal('show'); 
    }); 

Вы также можете заменить вам кнопку с этим:

<input type="button" "id="btnDeleteHandheld" class="deleteHandheld btn btn-danger" data-id="@device.DeviceID">Delete</input>