I'm developing an intranet web app with ASP.NET MVC4 and Entity Framework. I have a view which enumerates all the "persons" I have in my database and I can edit or delete them. I'm trying to use a modal form to confirm the deleting action (so to use my Action "Delete"). But, in order to do that, I have to retrieve the Id of the person that I want to delete.
Having read examples and documentation, I can't find the right way to retieve the id of the person I want to delete that to use it my action.
My Delete Action :
public ActionResult Delete(long id) { Person person = db.Persons.Single(p => p.Id_Person == id); if (person == null) { return HttpNotFound(); } db.Persons.DeleteObject(person); db.SaveChanges(); return RedirectToAction("Index"); } My View (and modal) :
@model IEnumerable<BuSIMaterial.Models.Person> @{ ViewBag.Title = "Index"; } @using PagedList.Mvc; @using PagedList; <link href="/Content/PagedList.css" rel="stylesheet" type="text/css" /> <h2>Index</h2> <br /> <div class="group"> <div class ="btn-group"> <input type="button" value="New person" class="btn" onclick="location.href='@Url.Action("Create")';return false;"/> <input type="button" value="Download report" class="btn" onclick="location.href='@Url.Action("PersonReport")';return false;"/> </div> </div> @using (Html.BeginForm("SelectedPersonDetails", "Person")) { <form class="form-search"> <label for="person">Search an employee : </label> <input type="text" id="tbPerson" name="tbPerson" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form> } <br /> @Html.PagedListPager((IPagedList)ViewBag.PageOfPersons, page => Url.Action("Index", new { page })) <br /> <table class="table table-striped"> <thead> <tr> <th> First Name </th> <th> Last Name </th> <th> National Number </th> <th> Start Date </th> <th> End Date </th> <th> Actions </th> </tr> </thead> <tbody> @foreach (BuSIMaterial.Models.Person item in ViewBag.PageOfPersons) { <tr> <td> @item.FirstName </td> <td> @item.LastName </td> <td> @item.NumNat </td> <td> @item.StartDate.ToShortDateString() </td> <td> @if (item.EndDate.HasValue) { @item.EndDate.Value.ToShortDateString() } </td> <td> <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions <span class="caret"></span> </a> <ul class="dropdown-menu"> @{ <li>@Html.ActionLink("Edit", "Edit", new { id = item.Id_Person })</li> <li>@Html.ActionLink("Details", "Details", new { id = item.Id_Person })</li> <li>@Html.ActionLink("Desactivate", "Desactivate", new { id = item.Id_Person })</li> <li><a href="#myModal" data-toggle="modal" data-id="@item.Id_Person">Delete</a></li> } </ul> </div> </td> </tr> } </tbody> <tfoot> <tr> <th> First name </th> <th> Last name </th> <th> National number </th> <th> Start date </th> <th> End date </th> <th> Actions </th> </tr> </tfoot> </table> <div>@Html.PagedListPager((IPagedList)ViewBag.PageOfPersons, page => Url.Action("Index", new { page }))</div> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Deleting an employee</h3> </div> <div class="modal-body"> <p>Are you sure you want to delete this person? All the concerned data also will be deleted.</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Delete</button> </div> </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/jqueryui") @Styles.Render("~/Content/themes/base/css") <script type="text/javascript" language="javascript"> $(document).ready(function () { $('#tbPerson').autocomplete({ source: '@Url.Action("AutoComplete")' }); }) $('#myModal').modal(options) </script> } I can get the id by doing data-id ="@item.Id_Person" but I have no idea about how to use it to finally call my action. Any idea guys?