ASP.Net MVC 5将数据传递给模态

Question

我需要将对象传递给我的模态。 现在我有这样的事情：

 @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">&times;</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传递给我的模态。

提前致谢！

Answer 1

如果您的模型是这样的：

//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">&times;</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>

Answer 2

谢谢你，先生！ 我设法做到这一点：

<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();
    };