title: MVC 4 passing data to a Bootstrap Modal form
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>My Delete Action : </p>
  
  <pre><code>public ActionResult Delete(long id)
      {
          Person person = db.Persons.Single(p =&gt; p.Id_Person == id);
          if (person == null)
          {
              return HttpNotFound();
          }
  
          db.Persons.DeleteObject(person);
          db.SaveChanges();
  
          return RedirectToAction("Index");
      }
  </code></pre>
  
  <p>My View (and modal) : </p>
  
  <pre><code>    @model IEnumerable&lt;BuSIMaterial.Models.Person&gt;
  
  @{
      ViewBag.Title = "Index";
  }
  
  @using PagedList.Mvc;
  @using PagedList;
  
  &lt;link href="/Content/PagedList.css" rel="stylesheet" type="text/css" /&gt;
  
  
  &lt;h2&gt;Index&lt;/h2&gt;
  
  &lt;br /&gt;
  
  &lt;div class="group"&gt;
      &lt;div class ="btn-group"&gt;
          &lt;input type="button" value="New person" class="btn" onclick="location.href='@Url.Action("Create")';return false;"/&gt;
          &lt;input type="button" value="Download report" class="btn" onclick="location.href='@Url.Action("PersonReport")';return false;"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  @using (Html.BeginForm("SelectedPersonDetails", "Person"))
  {  
      &lt;form class="form-search"&gt;
          &lt;label for="person"&gt;Search an employee : &lt;/label&gt;
          &lt;input type="text" id="tbPerson" name="tbPerson" class="input-medium search-query"&gt;
          &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
  }
  
  
  &lt;br /&gt;
  
  @Html.PagedListPager((IPagedList)ViewBag.PageOfPersons, page =&gt; Url.Action("Index", new { page }))
  
  &lt;br /&gt;
  
  &lt;table class="table table-striped"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;
              First Name
          &lt;/th&gt;
          &lt;th&gt;
              Last Name
          &lt;/th&gt;
          &lt;th&gt;
              National Number
          &lt;/th&gt;
          &lt;th&gt;
              Start Date
          &lt;/th&gt;
          &lt;th&gt;
              End Date
          &lt;/th&gt;
          &lt;th&gt;
              Actions
          &lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  
  &lt;tbody&gt;
  @foreach (BuSIMaterial.Models.Person item in ViewBag.PageOfPersons)
  {
      &lt;tr&gt;
          &lt;td&gt;
              @item.FirstName
          &lt;/td&gt;
          &lt;td&gt;
              @item.LastName
          &lt;/td&gt;
          &lt;td&gt;
              @item.NumNat
          &lt;/td&gt;
          &lt;td&gt;
              @item.StartDate.ToShortDateString()
          &lt;/td&gt;
          &lt;td&gt;
              @if (item.EndDate.HasValue)
              {
                  @item.EndDate.Value.ToShortDateString()
              }
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div class="btn-group"&gt;
                      &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
                          Actions
                          &lt;span class="caret"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          @{
  
                              &lt;li&gt;@Html.ActionLink("Edit", "Edit", new { id = item.Id_Person })&lt;/li&gt;
                              &lt;li&gt;@Html.ActionLink("Details", "Details", new { id = item.Id_Person })&lt;/li&gt;
                              &lt;li&gt;@Html.ActionLink("Desactivate", "Desactivate", new { id = item.Id_Person })&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#myModal" data-toggle="modal" data-id="@item.Id_Person"&gt;Delete&lt;/a&gt;&lt;/li&gt;
                          }
                      &lt;/ul&gt;
               &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  }
  &lt;/tbody&gt;
  &lt;tfoot&gt;
      &lt;tr&gt;
          &lt;th&gt;
              First name
          &lt;/th&gt;
          &lt;th&gt;
              Last name
          &lt;/th&gt;
          &lt;th&gt;
              National number
          &lt;/th&gt;
          &lt;th&gt;
              Start date
          &lt;/th&gt;
          &lt;th&gt;
              End date
          &lt;/th&gt;
          &lt;th&gt;
              Actions
          &lt;/th&gt;
      &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;/table&gt;
  
  &lt;div&gt;@Html.PagedListPager((IPagedList)ViewBag.PageOfPersons, page =&gt; Url.Action("Index", new { page }))&lt;/div&gt;
  
      &lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;h3 id="myModalLabel"&gt;Deleting an employee&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
          &lt;p&gt;Are you sure you want to delete this person? All the concerned data also will be deleted.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
          &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
          &lt;button class="btn btn-primary"&gt;Delete&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  @section Scripts
  {
      @Scripts.Render("~/bundles/jqueryval")
      @Scripts.Render("~/bundles/jqueryui")
      @Styles.Render("~/Content/themes/base/css")
  
      &lt;script type="text/javascript" language="javascript"&gt;
          $(document).ready(function () {
              $('#tbPerson').autocomplete({
                  source: '@Url.Action("AutoComplete")'
              });
          })
  
          $('#myModal').modal(options)
  
      &lt;/script&gt;
  }
  </code></pre>
  
  <p>I can get the id by doing <code>data-id ="@item.Id_Person"</code> but I have no idea about how to use it to finally call my action. Any idea guys? </p>