MVC ASP.Netのデータベースからのデータを含むブートストラップモーダルを表示

Question

私は基本的に、ブートストラップモーダルを使ってデータベースにある単一の製品の詳細を表示しようとしています。

以下のコードでは、どのボタンを選択しても、いずれかの製品の詳細だけをクリックすることができます。

私が間違っていると思います。あなたの助けが大変ありがとうございます。以下のコードスニペット：

@foreach (var product in Model.Products) 
{ 
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"> 
      @product.ProductName 
     </button>   

     <!-- Modal --> 
     <div id="myModal" class="modal fade" role="dialog" data-backdrop="true"> 
      <div class="modal-dialog"> 

       <!-- Modal content--> 
       <div class="modal-content" style="margin-bottom: 20px"> 
        <div class="modal-header" style="padding:35px 50px;"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4>@product.ProductName</h4> 
        </div> 
        <div class="modal-body" style="padding:40px 50px;"> 
         <div class="img-rounded col-md-5"> 
          <img class="img-circle" src="@Url.Action("RenderImage", "Products", new { id = product.ProductID})" width="150" height="150"/> 
         </div> 
         <div class="col-md-7"> 
          <p float="right">@product.ProductDescription</p> 
         </div> 
        </div> 

        <div style="margin-top:100px" class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 
       </div> 

      </div> 
      </div> 
} 

Answer 1

これに変更してみてください。注：これが正しく機能するためには、ProductIDは重複しないものとします。

@foreach (var product in Model.Products) 
 
{ 
 
    var sModalURL = "#myModal" + product.ProductID.ToString(); 
 
    var sModalId = "myModal" + product.ProductID.ToString(); 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" 
 
      data-target="@sModalURL"> 
 
     @product.ProductName 
 
    </button> 
 

 
     <!-- Modal --> 
 
     <div id="@sModalId" class="modal fade" role="dialog" data-backdrop="true"> 
 
      <div class="modal-dialog"> 
 

 
       <!-- Modal content--> 
 
       <div class="modal-content" style="margin-bottom: 20px"> 
 
        <div class="modal-header" style="padding:35px 50px;"> 
 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
         <h4>@product.ProductName</h4> 
 
        </div> 
 
        <div class="modal-body" style="padding:40px 50px;"> 
 
         <div class="img-rounded col-md-5"> 
 
          <img class="img-circle" src="@Url.Action("RenderImage", "Products", new { id = product.ProductID})" width="150" height="150" /> 
 
         </div> 
 
         <div class="col-md-7"> 
 
          <p float="right">@product.ProductDescription</p> 
 
         </div> 
 
        </div> 
 

 
        <div style="margin-top:100px" class="modal-footer"> 
 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
        </div> 
 
       </div> 
 

 
      </div> 
 
     </div> 
 
}