Show Partial view in Bootstrap modal - html

Question

I am creating MVC app and using Bootstrap Modal to give an opportunity to user to check input data, and to send those data to controller using Ajax. Modal window:
<div class="modal" tabindex="-1" role="dialog" id="myModal" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Check input data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))
{
<div class="modal-body">
<table class="table">
<tr>
<td>Category name: </td>
<td><b>#Model.CategoryName </b></td>
</tr>
<tr>
<td>Date: </td>
<td><label id="SelectedDateTimeLabel"></label></td>
</tr>
<tr>
<td>Client name: </td>
<td><input type="text" name="ClientName" id="ClientName" value="#Model.ClientName" /></td>
</tr>
<tr>
<td>Client code: </td>
<td><input type="text" name="ClientCode" id="ClientCode" value="#Model.ClientCode" /></td>
</tr>
</table>
</div>
<input type="hidden" name="CategoryId" id="CategoryId" value="#Model.CategoryId" />
<input type="hidden" name="SelectedDateTime" id="SelectedDateTime" />
<div class="modal-footer" id="divChangeRegion">
<input type="submit" class="btn btn-info" value="OK" data-backdrop="static">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>
</div>
And after pressing the submit button I execute controller's method which save inputed data in database and send back partial view, whcih I want to input in those Modal
Controller's code:
public ActionResult SelectReservationDateTime(ReservationTimeModel PartialViewModel)
{
...
return PartialView(newModel);
}
Partial view code:
#model EQueue.Data.Ticket
<div class="row">
<div class="col-md-4 offset-md-4">
<table>
<tr>
<td class="border" id="printThis">
You get ticket №<b>#Model.CodeTicket</b><br />
Category Name <br />
<b>"#Model.TicketCategory.NameCategory"</b><br />
</td>
</tr>
<tr>
<td><input type="button" class="btn btn-primary text-center" value="Print ticket" onclick="printTicket('printThis')" data-dismiss="modal"></td>
<td><input type="button">
</tr>
</table>
</div>
</div>
<script>
function printTicket(partForPrint)
{
var printContents = document.getElementById(partForPrint).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
But I get new window instead of creating partial view in existing Modal, can anybody help me?

Answer 1

Firstly I would change this line:
#using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))
To:
#using(Html.BeginForm(null, null, FormMethod.Post, new {id = "whatever"}))
Then have some jquery that uses the id of the form to check if it's been submitted. Once it has you should fire an ajax call to that method of yours that returns a partialview. To implement a partialview you need to specify a div where it will be place using an id and then in your success use this line of code to put the partialview into that div.
$("id of the div").html(result);