title: MVC Passing data to and from Bootstrap Modal
body: <p>I have an MVC 5 page which contains a WebGrid and a Bootstrap modal popup. In the WebGrid each row has a link, and when the user click on the link, I want to display the modal popup, as well as send some data to the popup which I can then send to a function on my Controller page.</p>
  
  <p>This is what I have so far:</p>
  
  <p><strong>WebGrid:</strong></p>
  
  <pre><code>@grid.GetHtml(
    tableStyle: "table",
    mode: WebGridPagerModes.All,
    columns: new[] {
      grid.Column(header: "", columnName: "", format: (item) =&gt; MvcHtmlString.Create(string.Format("&lt;a href='#' onclick=\"DeleteCardAskToConfirm('" + item.CardId + "','" + item.licenseplateno+"','" + item.cardno +"');\" return false;'&gt;Slet&lt;/a&gt;"))),
      grid.Column(format: @&lt;input type="hidden" name="CardId" value="CardId" /&gt;),
      grid.Column(format: @&lt;input type="hidden" name="CustomerId" value="CustomerId" /&gt;),
      grid.Column("cardno", "Kort nr." ),
      grid.Column("licenseplateno", "Nummerplade" ),
      grid.Column("createddate", "Oprettet" ),
      grid.Column("inactivedate", "Deaktiveret den" ),
      grid.Column(format: @&lt;input type="hidden" name="pno" value="Pno" /&gt; )
   }
  </code></pre>
  
  <p>)</p>
  
  <p><strong>Model popup:</strong></p>
  
  <pre><code>&lt;div class="modal" id="modalDeleteCardQuestion" tabindex="-1" role="dialog" data-id="" aria-labelledby="ModelDeleteCardQuestionLabel" aria-hidden="true"&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;&amp;times;&lt;/button&gt;
        &lt;h4 class="modal-title"&gt;Slet kort?&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;div class="alert alert-info"&gt;
          &lt;div class="header"&gt;Ønsker du at deaktivere kort nr. &lt;label id="Testlbl"&gt;&lt;/label&gt;?&lt;/div&gt;
          Hvis du deaktivere dette kort, vil det ikke længere kunne bruges ved indkørsel på genbrugspladser.&lt;br/&gt;
          Kortet kan senere genaktiveres og tilknyttes til en ny nummerplade.
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-link" data-dismiss="modal" aria-hidden="true"&gt;Nej&lt;/button&gt;
        &lt;input type="button" onclick="window.location='@Url.Action("DeleteCard", "AdminCards", new {  })'" value="Ja" class="btn btn-link" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Java script which handles the WebGrid link click and displays the modal</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function DeleteCardAskToConfirm(cardid, plade, cardno) {
          //$('#&lt;%=cardno.ClientID%&gt;').text(cardno);
          $('#Testlbl').html(cardno);
  
          $('#modalDeleteCardQuestion').modal();
  
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>So far the code "works". The webgrid is shown as it should and clicking the link calls the javascript function, with all the correct parameters. The modal popup box is also displayed and when I click the "Ja" link in the modal popup, my Controller function is called. </p>
  
  <p>My problem is: How do I get the three parameters I send to my Javascript function send to my Controller function ("DeleteCard" on "AdminCards") when the user clicks the "Ja" link in the Modal popup??</p>