在 MVC ASP.Net 中使用来自数据库的数据显示引导模式答案

【问题标题】：Displaying a bootstrap modal with data from a database in MVC ASP.Net在 MVC ASP.Net 中使用来自数据库的数据显示引导模式
【发布时间】：2017-09-07 18:32:02
【问题描述】：

我基本上是在尝试使用引导模式显示数据库中单个产品的详细信息。

无论我选择哪个按钮，下面的代码都允许我点击一个产品按钮，其中只有一个产品的详细信息。

知道我哪里出错了。非常感谢您的帮助。代码如下：sn-p：

@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>
}

【问题讨论】：

您可以设置一个变量并增加您的数据目标和 id 值以用于模态弹出窗口，例如 id="myModal"+i 其中“i”将是一个变量，或者点击产品进行 ajax 调用并在您的模式中设置详细信息
基本上，您在每个模式上复制 ID 属性，并且每个按钮都有相同的模式目标，因此您只会看到一个模式。
非常感谢！我基本上将数据目标编辑为“#myModal-@(product.productID)”，它似乎工作得很好！谢谢

标签： jquery asp.net asp.net-mvc twitter-bootstrap modal-dialog

【解决方案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>
}

【讨论】：