MVC 4 passing data to a Bootstrap Modal form

Question

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?

Answer 1

I am not sure if you want to perform an Ajax Delete using something like jQuery - or if you want to just use ASP.NET MVC.

If you want to use Javascript you will pull the Id from data-id and use $.ajax to send a delete request to the controller.

If you want to use MVC and Ajax I think you probably need an Ajax.ActionLink

If you want to just delete then RedirectToAction then just a normal HTML.ActionLink will do