I'm developing an MVC 5 web application. Within one of my Razor Views I have a table which spits outs several rows of data. Beside each row of data is a Delete button. When the user clicks the delete button I want to have the Bootstrap Modal popup and ask the user to confirm their deletion.
@foreach (var item in Model.Data) {
<tr>
<td>...</td>
<td>@Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @class = "btn btn-danger btn-xs", data_toggle = "modal", data_target = "#myModal" })</td>
</tr>
}
As it is, when the user clicks the Delete button the Modal pops up fine, but I can't seem to get the ID in the Actionlink parameter to pass to the Confirm button within my Modal so that it will then be sent to the delete action in my controller.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete Nomination</h4>
</div>
<div class="modal-body">
Are you sure you wish to delete this nomination?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="mySubmit" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
Can anyone please help?
Thanks.
ActionLink creates a hyperlink on a view page and the user clicks it to navigate to a new URL. It does not link to a view directly, rather it links to a controller's action. Here are some samples of Html.
ActionLink(HtmlHelper, String, String, Object, Object)Returns an anchor element (a element) for the specified link text, action, route values, and HTML attributes. C# Copy.
ActionLink is rendered as an HTML Anchor Tag (HyperLink) and hence it produces a GET request to the Controller's Action method which cannot be used to submit (post) Form in ASP.Net MVC 5 Razor. Hence in order to submit (post) Form using @Html. ActionLink, a jQuery Click event handler is assigned and when the @Html.
<script type="text/javascript">
//Everytime we press delete in the table row
$('.delete').click(function(e) {
e.preventDefault();
//Update the item to delete id so our model knows which one to delete
var id = $(this).data('id');
$('#item-to-delete').val(id);
});
//Everytime we press sumbit on the modal form...
$('#mySubmit').click(function() {
//Get the id to delete from the hidden field
var id = $('#item-to-delete').val();
//Call our delete actionresult and pass over this id
$.post(@Url.Action("Delete", "Delete"), { id : id } , function (data) {
alert("Deleted");
});
});
</script>
and your html...
@Html.Hidden("item-to-delete", "", new { @id = "item-to-delete"})
@foreach (var item in Model.Data) {
<tr>
<td>...</td>
<td><a href="" class="btn btn-danger btn-xs delete" data-toggle= "modal" data-target="#myModal" data-id="@item.id">Delete</a></td>
</tr>
}
Your controller action I assume is something like this...
public ActionResult Delete(Guid id)
{
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With