2016-07-11 13 views
1

Ich versuche, einen Dialog mit Bootstrap-Modal zu machen, um ein Löschen zu bestätigen. Das Löschen funktioniert gut, außer dass es nicht die Daten erhält, die ich auswähle, aber es erhält die ersten Daten in der ID-Reihenfolge von der Datenbank. Ich bin neu auf der Client-Seite Programmierung, also wenn jemand mir helfen könnte, wäre es nett.Löschen Bestätigen mit Bootstrap modal in Asp.Net MVC

Der Code ist:

[HttpPost] 
public async Task<ActionResult> Delete(int id) 
{ 
    RepFilter repFilter = await db.RepFilters.FindAsync(id); 
    db.RepFilters.Remove(repFilter); 
    await db.SaveChangesAsync(); 
    return RedirectToAction("Index"); 
} 


(razor) 
@foreach (var item in Model) 
{ 
    using (Html.BeginForm("Delete", "RepFilters", new { id = item.ID })) 
    { 
    <tr> 
     <td>@index</td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Description) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Report.Description) 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id = item.ID }) | 
      @Html.ActionLink("Details", "Details", new { id = item.ID }) | 
      <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">Delete</button> 
     <!-- Modal --> 
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog modal-sm" role="document"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4> 
      </div> 
      <div class="modal-body">Are you sure you want to delete: <span><b>@item.Description</b></span> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <input type="submit" value="Delete" class="btn btn-danger" /> 
      </div> 
      </div> 
      </div> 
     </div> 
     </td> 
     </tr> 

      } 
     } 
</tbody> 

Die Schaltfläche, die modal ist immer die richtige ID öffnet, aber die modal nicht!

So, wie man das modale nimmt, die adäquaten Daten zu löschen?

Ich versuche zu schreiben Javascript zu vermeiden und verwenden Datenattribute, bis es keine andere Wahl gibt

Antwort

1

Der Modal auf diese Weise die gleiche ID hat, unabhängig davon, welche Daten Sie versuchen, zu löschen. So fügen Sie einfach eine Variable verschiedene ID für die mmodal angeben:

using (Html.BeginForm("Delete", "RepFilters", new { id = item.ID })) 
{ 
var myModal = "myModal" + item.ID; 
<tr> 
    <td>...</td> 
    <td>...</td> 
    <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#@myModal">Delete</button> 
    <!-- Modal --> 
<div class="modal fade" id="@myModal" tabindex="-1" role="dialog" data-keyboard="false" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog modal-sm"> 
    ...........<!--And the rest of the modal code--> 
0

Sie zuerst eine Löschfunktion in jquery schreiben .für displaye Bestätigungsnachricht Sie sweetalert und schreiben Sie eine benutzerdefinierte Datei für sweetalert verwenden können .

Sie müssen Refrence Sweetalert CSS und Skript in Ihrer Ansicht hinzufügen.

function Delete(id) { 
 
      var submitdelete=function(){ $.ajax({ 
 
        url: '@Url.Action("/mycontroller/Delete)', 
 
        type: 'Post', 
 
        data: { id: id } 
 
       }) 
 
       .done(function() { 
 
        $('#' + id).remove();//if you want to delete table row 
 
        msgBox.success("Success","Ok"); 
 
       });} 
 
      msgBox.okToContinue("warning", "Are you sure to delete ?", "warning", "ok","cancel", submitdelete); 
 

 
     }

bestätigen


 
var msgBox = { 
 
    message: { 
 
     settings: { 
 
      Title: "", 
 
      OkButtonText: "", 
 
      type:"info" 
 
     } 
 
    }, 
 
    okToContinue: function(title, text, type, okButtonText,closeButtonText, isConfirmDo) { 
 
     swal({ 
 
       title: title, 
 
       text: text, 
 
       type: type, 
 
       showCancelButton: true, 
 
       confirmButtonClass: 'btn-danger', 
 
       confirmButtonText: okButtonText, 
 
       cancelButtonText: closeButtonText, 
 
       closeOnConfirm: false, 
 
       closeOnCancel: true 
 
      }, 
 
      function(isConfirm) { 
 
       if (isConfirm) { 
 

 
        isConfirmDo(); 
 
       } 
 
      }); 
 
    }, 
 
    
 
    confirmToContinue: function(title, text, type, confirmButtonText, cancelButtonText, isConfirmDo, isNotConfirmDo, showLoader) { 
 
     if (!showLoader) { 
 
      showLoader = false; 
 
     } 
 

 
     swal({ 
 
       title: title, 
 
       text: text, 
 
       type: type, 
 
       showCancelButton: true, 
 
       confirmButtonColor: "#DD6B55", 
 
       confirmButtonText: confirmButtonText, 
 
       cancelButtonText: cancelButtonText, 
 
       closeOnConfirm: true, 
 
       closeOnCancel: true, 
 
       showLoaderOnConfirm: showLoader 
 

 
      }, 
 
      function(isConfirm) { 
 
       if (isConfirm) { 
 
        isConfirmDo(); 
 
       } 
 
      }); 
 
    } , 
 

 
    success: function (title, text,okButtontex) { 
 
     
 
     swal({ 
 
      title: title, 
 
      text: text, 
 
      type: "success", 
 
      confirmButtonText: okButtontex 
 
     }); 
 

 
    }, 
 
    info: function (title, text) { 
 

 
     swal({ 
 
      title: title, 
 
      text: text, 
 
      type: "info", 
 
      confirmButtonText: "OK" 
 
     }); 
 

 
    }, 
 
    warning: function (title, text) { 
 

 
     swal({ 
 
      title: title, 
 
      text: text, 
 
      type: "warning", 
 
      confirmButtonText: "OK" 
 
     }); 
 

 
    }, 
 
    error: function (title, text) { 
 

 
     swal({ 
 
      title: title, 
 
      text: text, 
 
      type: "error", 
 
      confirmButtonText: "OK" 
 
     }); 
 

 
    }, 
 

 
} 
 

 

 

+0

aber in der Bootstrap-Dokumentation sagt, dass ich Javascript vermeiden und stattdessen Datenattribute verwenden. Das ist, was ich versuche herauszufinden, welches Attribut übergibt die Daten, die ich brauche – Arianit

1

Es Dialog sind eigentlich durchaus ein paar Dinge, die Sie in Ihrer Ansicht adressieren möchten. Sie durchlaufen die Elemente in Ihrem Modell und erstellen ein separates Formular (und Modal) für jedes Element. Dies ist wahrscheinlich nicht ideal, aber wenn Sie es wirklich so machen wollen, können Sie einen Verweis auf die Item-ID innerhalb des HTML für das Modal hinzufügen. Fügen Sie einfach eine versteckte Eingabe hinzu und legen Sie den Wert für item.id fest.

Allerdings würde ich diesen Ansatz nicht empfehlen. Ich bin mir nicht sicher, ob Sie JavaScript vermeiden möchten, aber die Funktionalität, die Sie hier erstellen möchten, ist eigentlich ziemlich einfach.

Sehen Sie diesen Beitrag: Confirm delete modal/dialog with Twitter bootstrap?

Edit:

@foreach (var item in Model) 
{  
<tr> 
    <td>@index</td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Description) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Report.Description) 
    </td> 
    <td> 
     @Html.ActionLink("Edit", "Edit", new { id = item.ID }) | 
     @Html.ActionLink("Details", "Details", new { id = item.ID }) | 
     <button type="button" class="btn btn-danger btn-sm" data-item-id="@item.ID" data-item-description="@item.Report.Description" data-toggle="modal" data-target="#confirm-delete">Delete</button>     
    </td> 
</tr>  
} 

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog modal-sm" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4> 
     </div> 
     <div class="modal-body"> 
      Are you sure you want to delete: <span class="description"></span> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <input type="submit" value="Delete" class="btn btn-danger" /> 
     </div> 
    </div> 
</div> 

<script> 
$('#confirm-delete').on('click', '.btn-ok', function(e) { 
    var $modalDiv = $(e.delegateTarget); 
    var id = $(this).data('itemId');   
    $modalDiv.addClass('loading'); 
    $.post('/RepFilters/Delete/' + id).then(function() { 
     $modalDiv.modal('hide').removeClass('loading'); 
    }); 
}); 
$('#confirm-delete').on('show.bs.modal', function(e) { 
    var data = $(e.relatedTarget).data(); 
    $('.description', this).text(data.itemDescription); 
    $('.btn-ok', this).data('itemId', data.itemId); 
}); 
</script> 
+0

können Sie mir bitte mit Code zeigen, wie in Asp.Net MVC bitte? – Arianit

+0

Sie sagen also, es ist besser, Javascript zu verwenden und keine gute Praxis, um es zu vermeiden? – Arianit

+1

Nein, ich würde nicht empfehlen, die Verwendung von JavaScript zu vermeiden. – Steve

Verwandte Themen