ビュー内の変数であるIDを持つポップアップモーダルを作る方法C＃mvc4

Question

私は以下の問題があります。私はそれにHTMLフォームをポップアップしたい。私はテーブルの中に示された映画のリストを持つページを持っています。また、上にマウスを置くと表示されるボタンをクリックすると、モーダルポップアップが表示されます。

私の変数html idは、クリックしたムービーボタンに応じて正しく変更されます。ただし、ポップアップが表示されると、ページ上の最初または最後のムービーが表示されます。

これは、一度読み込まれたhtmldocumentが原因であることを理解します。 C＃リストのインデックスは一度このページを上書きします。このため、私はモデルを呼び出すことはできません.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

あなたはrazor syntaxで正しくvariableを連結していないあなたは@

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