javascript - ASP.Net MVC 5 Passing data to modal - Stack Overflow

admin管理员组

文章数量:1327834

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">&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> (......)

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">&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> (......)

My problem is here @Model[indexOftheDay].Day I dont know how to pass indexOftheDay to my modal.

Thanks in advance!

• javascript
• jquery
• asp-mvc
• binding
• bootstrap-modal

Share Improve this question Follow edited Sep 10, 2017 at 10:49 Ashiquzzaman 5,29444 gold badges2929 silver badges3939 bronze badges asked Sep 10, 2017 at 10:03 BourniBourni 4511 gold badge11 silver badge44 bronze badges 3

• Where is the modal partial view rendered in the main View? Do you create a modal for each item in your Model or you have one modal 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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>

本文标签： javascriptASPNet MVC 5 Passing data to modalStack Overflow