我正在创建MVC应用程序,并使用Bootstrap Modal为用户提供了检查输入数据的机会,并使用Ajax将这些数据发送到控制器。模态窗口:
<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>
在按下提交按钮后,我执行控制器的方法,该方法将输入的数据保存在数据库中并发回部分视图,这就是我想在那些模态中输入的
控制器代码:
public ActionResult SelectReservationDateTime(ReservationTimeModel PartialViewModel)
{
...
return PartialView(newModel);
}
部分视图代码:
@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>
但是我得到了新的窗口,而不是在现有的Modal中创建局部视图,有人可以帮助我吗?
最佳答案
首先,我将更改此行:
@using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))
至:
@using(Html.BeginForm(null, null, FormMethod.Post, new {id = "whatever"}))
然后使用一些jQuery,它使用表单的ID来检查是否已提交。一旦有了它,您应该向您的方法触发一个ajax调用,该方法将返回partialview。要实现partialview,您需要使用一个id指定一个div,然后将其成功放置在此代码行中,将partialview放入该div中。
$("id of the div").html(result);