admin管理员组文章数量:1327680
I need to pass object to my modal. For now I have something like this :
@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>
}
my js :
function OpenModalPopUp(id) {
$('#myModal').modal();
};
and my 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> (......)
My problem is here @Model[indexOftheDay].Day
I dont know how to pass indexOftheDay
to my modal.
Thanks in advance!
I need to pass object to my modal. For now I have something like this :
@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>
}
my js :
function OpenModalPopUp(id) {
$('#myModal').modal();
};
and my 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> (......)
My problem is here @Model[indexOftheDay].Day
I dont know how to pass indexOftheDay
to my modal.
Thanks in advance!
Share Improve this question edited Sep 10, 2017 at 10:49 Ashiquzzaman 5,2944 gold badges29 silver badges39 bronze badges asked Sep 10, 2017 at 10:03 BourniBourni 451 gold badge1 silver badge4 bronze badges 3-
Where is the
modal
partial view rendered in the main View? Do you create a modal for each item in yourModel
or you have onemodal
and you want update the modal based on the click? – adiga Commented Sep 10, 2017 at 11:53 - I don't have the partial view, the modal is directly in my main view.I have one modal and i want update my modal based on the click – Bourni Commented Sep 10, 2017 at 12:01
- Then Masoud Sadeghi's answer should work for you – adiga Commented Sep 10, 2017 at 12:02
2 Answers
Reset to default 2Thank you sir! I managed to do it like this :
<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();
};
and in my 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>
Unfortunatelly the next problem I faced is that for some reason (error : A constant value is expected...) I can't pass two parameters to my function :( my updated function looks like this :
function OpenModalPopUp(reservationDay,reservationHour ) {
$('.reservationDay').text(reservationDay);
$('.reservationHour').text(reservationHour);
$('#myModal').modal();
};
if your model like this :
//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;
}
}
your controller must Like :
//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);
}
}
your view must like:
@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>
and you must have a PartialView Like this:
@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>
本文标签: javascriptASPNet MVC 5 Passing data to modalStack Overflow
版权声明:本文标题:javascript - ASP.Net MVC 5 Passing data to modal - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742221724a2435488.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论