ASP.Net MVC 5 Passing data to modal

Thank 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">&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>