ActionLink Pass Parameter zu Bootstrap Modal

Question

Begonnen von Anfang an, habe ich eine Listenansicht in meiner MVC5 App. Ich habe Links zu Aktionen wie Bearbeiten und Löschen. Wenn ich auf Löschen klicke, will ich Bootstrap Modal Popup anzeigen, welches ich bereits habe. Aber das Problem ist, dass ich Html.ActionLink habe, der mein Modal Popup prompt auf die Methode umleitet, die ich in ActionLink angegeben habe. Ich möchte nur Popup anzeigen und dann auf Senden oder etwas anderes klicken und dann die Aktion ausführen. Aber es gab ein anderes Problem - auf welche Weise kann ich Parameter aus meiner Listenansicht an modales Popup übergeben?

Einige Code unten:

@model IEnumerable<SupportStudentSystem.Models.Category> 

@{ 
    ViewBag.Title = "List of Categories"; 
} 

<h1 class="text-center">Categories</h1> 

<div style="margin-top:1%"> 
    <a href="AddCategory" type="button" class="btn btn-lg btn-success"><i class="glyphicon glyphicon-plus"></i> Add Category</a> 
</div> 
<table class="table" style="margin-top:2%"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.CategoryName) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Description) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.RequiredAge) 
     </th> 
     <th></th> 
    </tr> 

    @foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.CategoryName) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Description) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.RequiredAge) 
      </td> 
      <td> 
       @Html.ActionLink("Edit", "EditCategory", "Admin", new { item.CategoryID }, null) | 
       @Html.ActionLink("Delete", "DeleteCategory", "Admin", new { item.CategoryID }, new {data_toggle = "modal", data_target = "#Delete" })    </td> 
     </tr> 
    } 
</table> 

Und hier ist mein modal:

<div class="modal active" id="Delete" role="dialog" style="overflow-y:auto"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h3 style="text-align:center">Delete Category</h3> 
    </div> 
<div class="modal-body"> 
    <p style="text-align:center"><strong> Do you want to delete this category ? </strong> </p> 
</div> 
<div class="modal-footer"> 
    <button type="submit" onclick="location.href='@Url.Action("DeleteCategory", "Admin")'" class="btn btn-default">Delete category</button> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
</div> 
</div> 

In DeleteCategory Verfahren I Kategorie löschen, hat sich zu einem bestimmten CategoryID wie ein Parameter übergeben, und es dann auch löschen aus Datenbank.

Kann mir jemand helfen, dieses Problem zu lösen?

Answer 1

Wenn es Ihnen nichts ausmacht, jQuery zu verwenden, können Sie einen Handler für das onclick-Ereignis definieren, um einen Klick auf den ActionLink-Löschbefehl zu erhalten. Also erst mal einer ID zu Ihrer Action geben und einen Parameter in Datenattribut speichern:

@Html.ActionLink("Delete", "DeleteCategory", "Admin", new { item.CategoryID }, new {data_toggle = "modal", data_target = "#Delete", id="deleteActionLink", data_parameter="<here goes your parameter>" }) 

dann in jQuery-Code fügen Sie eine Variable für Ihre Parameter und Ereignishandler:

var parameter; 
$("#deleteActionLink").on("click", function(){ 
    //save your parameter in variable 
    parameter = $("#deleteActionLink").data("parameter"); 
}); 

Dann man hinzufügen mehr Handler, nur für Senden Schaltfläche auf Ihrem modal, und senden Sie eine Post-Anfrage von hier (mit Ajax)