title: bootstrap modal for delete confirmation mvc
body: <p>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.</p>
  
  <ol>
  <li><p>add line before foreach loop</p>
  
  <pre><code>@Html.Hidden("item-to-delete", "", new {@id = "item-to-delete"})
  @foreach (var item in Model)
  {
      &lt;td&gt;
          &lt;button type="" class="btn btn-sm blue deleteLead" 
              data-target="#basic" data-toggle="modal" 
              data-id="@item.bookid"&gt;delete&lt;/button&gt;
      &lt;/td&gt;
  }
  </code></pre></li>
  </ol>
  
  <p>2.and my modal </p>
  
  <pre><code>&lt;div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true" style="display: none;"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;book Delete Confirmation&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  Are you Sure!!! You want to delete this Ad?
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn blue" id="btnContinueDelete"&gt;Continue&lt;/button&gt;
                  &lt;button type="button" class="btn default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>script</p>
  
  <pre><code>&lt;script&gt;
      $(".deletebook").click(function(e) {
          e.preventDefault();
          var id = $(this).data('id');
          $('#item-to-delete').val(id);
      });
      $('#btnContinueDelete').click(function() {
          var id = $('#item-to-delete').val();
          $.post(@Url.Action("Deletebook", "book"), { id: id }, function(data) {
              alert("data deleted");
          });
      });
  &lt;/script&gt; 
  </code></pre>
  
  <p>in console i get  =>
  Empty string passed to getElementById(). </p>