Question

我有以下问题。我想用一个带有html表单的弹出窗口。我有一个页面，其中包含表格中显示的电影列表。我希望如果你单击一个按钮，如果你将鼠标悬停在它上面，它将显示模态弹出窗口。

我的变量html id确实会根据您单击的电影按钮正确更改。但是，当弹出窗口显示时，它会拍摄页面上的第一部或最后一部电影。

据我所知，这是由加载一次的htmldocument引起的。 c＃list index遍历此页面一次，因此我无法调用model.Title with Javascript。

   @for (int i = 0; i < Model.Count(); i++)
    {
        <tr>
            @for (int j = 0; j < 3; j++)
            {
                if (movieNr < Model.Count())
                {
                    if (Model.ElementAt(movieNr).ItemAfbeelding != null)
                    {
                        <td>

                            <div class="col-lg-3 col-md-4 col-sm-6 col-lg-12">

                                <div class="hovereffect">
                                    @*<p class="movie_index_item_title">@Model.ElementAt(movieNr).Titel</p>*@
                                    <img class="img-responsive" src=@Model.ElementAt(movieNr).ItemAfbeelding.Link alt=@Model.ElementAt(movieNr).Titel title="@Model.ElementAt(movieNr).Titel">
                                    <div class="overlay">


                                        <h2>@Model.ElementAt(movieNr).Titel</h2>


                                        <!-- Trigger/Open The Modal -->
                                        <!-- The Modal -->
                                        <button class="movie_index_item_description_button" id="@movieNr">Voeg toe aan Cart</button>

以上代码可以满足我的需求。当我将鼠标悬停在按钮上时，它会显示悬停效果。

  <div id="myModal + @movieNr" class="modal">

                                            <!-- Modal content -->
                                            <div class="modal-content">
                                                <div class="modal-header + @movieNr">



                                                    <span class="close">&times;</span>
                                                    <h3>@Model.ElementAt(movieNr).Titel</h3>


                                                </div>

                                                <div class="modal-body">


                                                    <h3>hello</h3>

                                                </div>
                                                <div class="modal-footer">
                                                    <h3>Heeft u al een restaurant gereserveerd?</h3>
                                                </div>

                                            </div>
                                        </div>
                                        <script>
                                            var modal = document.getElementById('myModal + @movieNr');
                                            var btn = document.getElementById("@movieNr");
                                            var span = document.getElementsByClassName("close")[0];




                                            btn.onclick = function () {

                                                modal.style.display = "block";

                                            }
                                            span.onclick = function () {
                                                modal.style.display = "none";
                                            }

                                            window.onclick = function (event) {
                                                if (event.target == modal) {
                                                    modal.style.display = "none";
                                                }
                                            }




                                        </script>

但是这段代码不能正常工作。它为列表中的第一个元素或最后一个元素打开一个模态。我知道这是因为当你将鼠标悬停在它上面时已经加载了c＃。因此，调用ElementAt（movieNr）将显示最后一个。

如何制作一个受所选电影约束的按钮，并在其上显示该特定电影的表格，并在弹出窗口中显示电影标题。

PS：此表单应使用填充的数据转到我的控制器中的httppost。

我希望你能帮助我们，因为我们迷失了。

Answer 1

您没有使用variable

连接razor syntax正确联接@

<div id="myModal@movieNr" class="modal">

如何在视图C＃mvc4中创建一个id为变量的弹出模式

1 个答案: