ASP.Net MVC 5将数据传递到模态
问题描述:
我需要传递对象到我的模式。现在我有这样的事情:ASP.Net MVC 5将数据传递到模态
@for (int i = 0; i < @Model.Count; i++)
{
<div id="contentDiv" style="margin: 10px">
<div class="form-group">
<div>
DAY : @Model[i].Day.Day/Hour : @Model[i].Hour
</div>
<div class="form-group">
<button id="reservationButton" class="btn-default btn-lg" disabled="@Model[i].IsHourTaken()" onclick="@($"OpenModalPopUp('{i}')");">Book</button>
</div>
</div>
</div>
}
我的JS:
function OpenModalPopUp(id) {
$('#myModal').modal();
};
和我的模式:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Book this hour!</h4>
</div>
<div class="modal-body">
<div>
<div>
<div class="row">
<b>Day:</b>
<div class="col-lg-5">
<span class="reservationDay"> @Model[indexOftheDay].Day </span>
</div>
</div>
<div class="row">
<b>Hour:</b>
<div class="col-lg-5">
<span class="reservationHour"> @Model[indexOftheDay].Hour </span>
</div>
</div> (......)
我的问题是在这里@Model[indexOftheDay].Day
我不知道如何通过indexOftheDay
我模态。
在此先感谢!
答
如果你的模型是这样的:
//TestModel: Name of your model
public class TestModel
{
public int Id { get; set; }
public DateTime Day { get; set; }
public DateTime Hour { get; set; }
public bool IsHourTaken()
{
//your code
return false;
}
}
控制器必须像:
//HomeController: name of your controller
public class HomeController : Controller
{
public ActionResult Index()
{
//get list from db or ...
List<TestModel> models = new List<Models.TestModel>()
{
new Models.TestModel { Day = DateTime.Now, Hour = DateTime.Now, Id = 1},
new Models.TestModel { Day = DateTime.Now, Hour = DateTime.Now, Id = 2},
new Models.TestModel { Day = DateTime.Now, Hour = DateTime.Now, Id = 3},
};
return View(models);
}
public ActionResult Details(int Id)
{
//find item from db or ...
var model = new Models.TestModel { Day = DateTime.Now, Hour = DateTime.Now, Id = 1 };
return PartialView("_ModalView", model);
}
}
你的观点一定是喜欢:
@model IEnumerable<WebApplication4.Models.TestModel>
@foreach (var item in Model)
{
<div id="contentDiv" style="margin: 10px">
<div class="form-group">
<div>
DAY : @item.Day
</div>
<div class="form-group">
<button id="reservationButton" data-id='@item.Id' class="btn-default btn-lg" disabled='@item.IsHourTaken()'>Book</button>
</div>
</div>
</div>
}
<script>
var detailUrl = '/Home/Details';
$(function() {
$(".btnDetail").click(function() {
var $buttonClicked = $(this);
var id = $buttonClicked.attr('data-id');
var options = { "backdrop": "static", keyboard: true };
$.ajax({
type: "GET",
url: detailUrl,
contentType: "application/json; charset=utf-8",
data: { "Id": id },
datatype: "json",
success: function (data) {
debugger;
$('#myModalContent').html(data);
$('#myModal').modal(options);
$('#myModal').modal('show');
},
error: function() {
alert("Dynamic content load failed.");
}
});
});
});
</script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div id='myModalContent'></div>
</div>
,你必须有一个PartialView就像这样:
@model WebApplication4.Models.TestModel
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Book this hour!</h4>
</div>
<div class="modal-body">
<div>
<div>
<div class="row">
<div class="col-lg-5">
<b>
Day:
<span class="reservationDay"> @Model.Day </span>
</b>
</div>
</div>
<div class="row">
<div class="col-lg-5">
<b>
Hour:
<span class="reservationHour">@Model.Hour </span>
</b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
+0
书 –
+0
@Bourni如果你的第二个答案是一个问题,这个评论为它的水平。 –
答
谢谢先生! 我设法做到这一点是这样的:
<button id="reservationButton" class="btn-default btn-lg" disabled="@Model[i].IsHourTaken()" onclick="@($"OpenModalPopUp('{@Model[i].GetDay()}')");">Book</button>
JS:
function OpenModalPopUp(reservationDay) {
$('.reservationDay').text(reservationDay);
$('#myModal').modal();
};
,并在我的模式
<div class="modal-body">
<div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<b>Day</b>
</div>
<div class="col-xs-9">
<span class="reservationDay"/>
</div>
</div>
可惜的是接下来的问题,我面对的是,由于某种原因(错误:恒定值预期...)我不能传递两个参数,以我的功能:(我的更新功能如下:
function OpenModalPopUp(reservationDay,reservationHour) {
$('.reservationDay').text(reservationDay);
$('.reservationHour').text(reservationHour);
$('#myModal').modal();
};
哪里'modal'局部视图在主视图中呈现?你是否为'Model'中的每个项目创建了一个模态,或者你有一个'modal',并且想要根据点击更新模态? – adiga
我没有局部视图,该模式是直接在我的主要view.I有一个模式,我想我的更新基于点击 – Bourni
模式然后马苏德Sadeghi的答案应该为你工作 – adiga