CODEWITHSUNDEEP
jqueryasp.net-mvctwitter-bootstrapasp.net-mvc-5
SorenA
SorenA

Reputation: 35

MVC Passing data to and from Bootstrap Modal

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.

This is what I have so far:

WebGrid:

@grid.GetHtml(
  tableStyle: "table",
  mode: WebGridPagerModes.All,
  columns: new[] {
    grid.Column(header: "", columnName: "", format: (item) => MvcHtmlString.Create(string.Format("<a href='#' onclick=\"DeleteCardAskToConfirm('" + item.CardId + "','" + item.licenseplateno+"','" + item.cardno +"');\" return false;'>Slet</a>"))),
    grid.Column(format: @<input type="hidden" name="CardId" value="CardId" />),
    grid.Column(format: @<input type="hidden" name="CustomerId" value="CustomerId" />),
    grid.Column("cardno", "Kort nr." ),
    grid.Column("licenseplateno", "Nummerplade" ),
    grid.Column("createddate", "Oprettet" ),
    grid.Column("inactivedate", "Deaktiveret den" ),
    grid.Column(format: @<input type="hidden" name="pno" value="Pno" /> )
 }

)

Model popup:

<div class="modal" id="modalDeleteCardQuestion" tabindex="-1" role="dialog" data-id="" aria-labelledby="ModelDeleteCardQuestionLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Slet kort?</h4>
    </div>
    <div class="modal-body">
      <div class="alert alert-info">
        <div class="header">Ønsker du at deaktivere kort nr. <label id="Testlbl"></label>?</div>
        Hvis du deaktivere dette kort, vil det ikke længere kunne bruges ved indkørsel på genbrugspladser.<br/>
        Kortet kan senere genaktiveres og tilknyttes til en ny nummerplade.
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-link" data-dismiss="modal" aria-hidden="true">Nej</button>
      <input type="button" onclick="window.location='@Url.Action("DeleteCard", "AdminCards", new {  })'" value="Ja" class="btn btn-link" />
    </div>
  </div>
</div>

Java script which handles the WebGrid link click and displays the modal

<script type="text/javascript">
    function DeleteCardAskToConfirm(cardid, plade, cardno) {
        //$('#<%=cardno.ClientID%>').text(cardno);
        $('#Testlbl').html(cardno);

        $('#modalDeleteCardQuestion').modal();

    };
</script>

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.

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??

Upvotes: 3

Views: 14724

Answers (1)

mitomed
mitomed

Reputation: 2066

I was thinking you can use ajax for this

First you can get rid of the onclick and use unobstrusive javascript. Yo would probably need to store in hidden fields in your partial view the values you need to send (it that's possible for you and means no risk).

Then you can just make an ajax call and load your view in success in the body. It would be something like this:

<input type="button" id="jaButton" value="Ja" class="btn btn-link" />

Javascript function, assuming you're placing it in the same partial view for your model (if you place it there I think you can still use Url.Action otherwise you have to probably pass it to you js file)

$(document).ready(function() {
    $('#jaButton').click(function() {
        $.ajax({
            url: '@Url.Action("DeleteCard", "AdminCards")',
            type: 'GET',
            data: { cardId: $('#cardId').val() } //you should build your data here as you need
        }).success(function(result) {
            $("body").html(result);
        });
    });
});

You can obviously use .get as a shorthand if you prefer.

alternatively you can use instead of the ajax call this code inside the .click 

var cardId = $('#cardId').val(); // and so on getting the values using jquery
window.location = '@Url.Action("DeleteCard", "AdminCards")' + '?cardId=' + encodeURIComponent(cardId); //and the same with the rest of them

Even along the same lines of the latest code you can play with replace in this way (instead of using the last line, swap it with this one)

window.location = "@Url.Action("DeleteCard", "AdminCards", new {cardId = -1 })".replace("-1", cardId);

Upvotes: 1

Related Questions