javascript - 如何使用弹出模式显示我的每个 ViewModel 项目的不同内容？

Question

我有一个 ViewModel，其中包含不同产品的列表。

每个产品都有自己的描述、专辑、标题、描述、价格等。

Foreach(var product in Model)
{
   <img src="/productImage/@product.ImageName"/>
}

当我使用弹出模式单击其图像时，如何显示每个产品的单独内容？

标签： javascriptjqueryajaxasp.net-corebootstrap-modal

Answer 1

您可以使用 Bootstrap 模态，如下所示：

模型：

public class Products
{
    public string Description { get; set; }
    public string Title { get; set; }
    public string ImageName { get; set; }
    public int Price { get; set; }
}

查看（索引.cshtml）：

@model List<Products>
@{
    var i = 0;
}
@foreach (var product in Model)
{
    <img src="/productImage/@product.ImageName" data-toggle="modal" data-target="#exampleModal_@i" style="width:100px;height:150px;" />
    <!--Modal Start-->
    <div class="modal fade" id="exampleModal_@i" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="Close()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!--Modal Body Content-->
                <div class="modal-body" id="details">
                    <dl class="row">
                        <dt class="col-sm-2">
                            @Html.DisplayNameFor(model => product.Title)
                        </dt>
                        <dd class="col-sm-10">
                            @Html.DisplayFor(model => product.Title)
                        </dd>
                        <dt class="col-sm-2">
                            @Html.DisplayNameFor(model => product.Description)
                        </dt>
                        <dd class="col-sm-10">
                            @Html.DisplayFor(model => product.Description)
                        </dd>
                        <dt class="col-sm-2">
                            @Html.DisplayNameFor(model => product.Price)
                        </dt>
                        <dd class="col-sm-10">
                            @Html.DisplayFor(model => product.Price)
                        </dd>
                    </dl>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!--Modal End-->

    i++;  //add this...
}

控制器：

public IActionResult Index()
{
    var model = new List<Products>()
    {
        new Products(){Title="aaa",Description="Description aaaa",Price=45,ImageName="book1.jpg"},
        new Products(){Title="bbb",Description="Description bbbb",Price=33,ImageName="book2.jpg"},
        new Products(){Title="ccc",Description="Description cccc",Price=52,ImageName="book3.jpg"}
    };
    return View(model);
}

结果：