jquery - MVC anchor tag and bootstrap model delete -

jquery - MVC anchor tag and bootstrap model delete -

i'm developing mvc 5 web application. within 1 of razor views have table spits outs several rows of data. beside each row of info delete button. when user clicks delete button want have bootstrap modal popup , inquire user confirm deletion.

<table> <tr> <th> @html.displayname("country") </th> </tr> @foreach (var item in model) { <tr> <td> @html.displayfor(modelitem => item.country) </td> <td> @html.actionlink("edit", "edit", new { id = item.contactid }) | <a class="btn btn-danger btn-xs" data-id="@item.contactid" data-toggle="modal" data-target="#mymodal" id="delete"><i class="glyphicon glyphicon-trash"></i></a> </td> </tr> } </table>

as is, when user clicks delete button modal pops fine, can't seem id in anchor tag pass confirm button within modal sent delete action in 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-body"> <input type="hidden" id="delete" /> sure wish delete customer? </div> <div class="modal-footer"> <button type="button" id="mysubmit" class="btn btn-danger">ok</button> <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> </div> </div> </div> </div>

when click delete button of bootstrap nil happen , cannot delete record

you can seek below:

$(document).on("click", ".btn-xs", function () { var id = $(this).data('id'); $(".modal-body #hdninput").val(id); });

keep hidden field in modal-body this

<input type="hidden" id="hdninput"/>

if have time go through impromptu plugin

edit: assign particular id anchor tag or action link can below:

assumptions : modal, examplemodal has actionlink/anchor tag delete in modal-footer id btndelete

$('#examplemodal').on('show.bs.modal', function () { var hiddenid = $("#hdninput").val() var modal = $(this) modal.find('.modal-footer #btndelete').attr('href','customer/delete?id='+hiddenid); //this attach href actionlink or anchortag in modal. });

edit 2 - plus suggest modify below part of code , remove href since deleting 1 time user confirms , appending href anchor nowadays in modal.

<a href="~/customer/delete" class="btn btn-danger btn-xs" data-id="@item.contactid" data-toggle="modal" data-target="#mymodal"> <i class="glyphicon glyphicon-trash"></i> delete </a>

to

<a class="btn btn-danger btn-xs" data-id="@item.contactid" data-toggle="modal" data-target="#mymodal"> <i class="glyphicon glyphicon-trash"></i> delete </a>

edit 3 -

$(document).on("click", ".btn-xs", function () { var id = $(this).data('id'); console.log(id);//check whether id has been logged in console. $(".modal-body #delete").val(id); console.log($(".modal-body #delete").val())//check whether hidden field has got value id });

change button in footer anchor below

<a href="#" id="mysubmit" class="btn btn-danger">ok</a>

the below code changes href of button in modal:

$('#mymodal').on('show.bs.modal', function () { var hiddenid = $("#delete").val() var modal = $(this) modal.find('.modal-footer #mysubmit').attr('href','customer/delete?id='+hiddenid); //this attach href actionlink or anchortag in modal. });

jquery html asp.net-mvc twitter-bootstrap