我正在尝试在我的应用程序中实现一个模态,似乎我已经尝试了几个我找到的示例 - http://www.c-sharpcorner.com/uploadfile/092589/implementing-modal-pop-up-in-mvc-application/,https://codemagik.wordpress.com/2015/04/07/render-mvc-partial-view-inside-bootstrap-modal-dialog/和https://www.youtube.com/watch?v=1yrTszHY-mQ只是一些而且似乎我甚至无法让这些例子起作用。目前我的第一个视图
<div>
<div class="col-md-3>">
<h2>Reports</h2>
<a href="javascript:void(0);" class="anchorDetail" >Daily Requested Burns</a>
</div>
@section scripts
{
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
var TeamDetailPostBackURL = '/Home/DateSearch';
$(function () {
$(".anchorDetail").click(function () {
debugger;
var $buttonClicked = $(this);
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
url: TeamDetailPostBackURL,
datatype: "json",
success: function () {
debugger;
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function (error) {
alert("Dynamic content load failed. - " + error );
}
});
});
$("#closbtn").click(function () {
$('#myModal').modal('hide');
});
});
</script>
}
我的模态视图
<div class="container">
<div class="row">
<div id='myModal' class='modal'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'>
<div class="col-md-12">
<div class="modal-header">
<button type="button" class="close" data-dissmiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Daily Requested Burns Date Search</h4>
</div>
<hr />
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(model => model.BurnStartDate, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.BurnStartDate, new { @id = "BurnStartDate" })
@Html.ValidationMessageFor(model => model.BurnStartDate)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.BurnEndDate, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.BurnEndDate, new { @id = "BurnEndDate" })
@Html.ValidationMessageFor(model => model.BurnEndDate)
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btnSubmit" name="Command" value="Submit" class="btn btn-sm btn-primary"><i class="glyphicon glyphicons-camp-fire"></i> Submit</button>
<button id="btnClose" class="btn btn-sm btn-primary" data-dissmiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我的DataSearch包含HttpPost
public ActionResult DataSearch()
{
//Render the partial view to be loaded in the modal dialog
RequestedBurn requestedBurn = new RequestedBurn();
requestedBurn.BurnStartDate = DateTime.Now;
requestedBurn.BurnEndDate = DateTime.Now;
return PartialView("_DateSearch", requestedBurn);
}
[HttpPost]
public ActionResult DateSearch(FormCollection form)
{
// Process the post back data from the view
string startDate = form["BurnStartDate"].ToString();
string endDate = form["BurnEndDate"].ToString();
//return View("DailyBurns");
return RedirectToAction("DailyBurns", "RequestedBurns", new { startDate = startDate, endDate = endDate });
}