MVC Passing Data to and from Bootstrap Modal
I have an MVC 5 page containing a WebGrid and a Bootstrap popup. In a WebGrid, every row has a link, and when the user clicks on the link, I want to display a modal popup and also send some data to the popup, which I can then send to a function in 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">×</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 that processes WebGrid link and shows modal
<script type="text/javascript">
function DeleteCardAskToConfirm(cardid, plade, cardno) {
//$('#<%=cardno.ClientID%>').text(cardno);
$('#Testlbl').html(cardno);
$('#modalDeleteCardQuestion').modal();
};
</script>
While the code "works". The webgrid renders as it should and clicking the link calls the javascript function with all the correct parameters. Also the modal popup is 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 that I send to the Javascript function, send to my Controller function ("RemoveCard" to "AdminCards") when the user clicks on the "Ja" link in the "Modal" folder?
source to share
I thought you can use ajax for this
You can get rid of the onclick first and use unobtrusive javascript. You will probably need to store in hidden fields in the partial representation the values to be sent (this is possible for you and does not mean any risk).
Then you can just make an ajax call and load your opinion in the body. It will be something like this:
<input type="button" id="jaButton" value="Ja" class="btn btn-link" />
Javascript function, assuming you place it in the same partial view for your model (if you place it there, I think you can still use Url.Action, otherwise you should probably pass it to you in a 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);
});
});
});
Obviously, you can use .get as a shorthand if you like.
alternatively you can use instead of ajax call this code inside .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 on the same lines of the last code, you can play with the replacement this way (instead of using the last line, change it to this)
window.location = "@Url.Action("DeleteCard", "AdminCards", new {cardId = -1 })".replace("-1", cardId);
source to share