Question

我正在研究C＃mvc项目，并且试图加载产品购物车局部视图，我希望在每一行中都有一个按钮Read More，以了解产品规格。当用户单击“阅读更多”时，它应该在加载产品规格的div中折叠。我设法通过为div ID创建CSS样式来实现此目的-product-intro，但它仅在第一行起作用。我现在正在尝试动态创建div ID并设置内联产品简介“ +”-“ + i”的样式，而我无法管理工作。

预先感谢您的任何建议。

这是我的html：

    @{int i = 0;}

@foreach (var line in Model.Lines)
{
    var validQuantityClass = line.Quantity <= line.InStock ? "" : "danger";
    <tr class="article @validQuantityClass" id="article-@line.Product.ProductId">
        <td>
            <div class="media">

                <h4 class="group inner list-group-item-heading">@line.Product.Name</h4>

                @{i++;}

                <script>articleSpec()</script>

                <div class="media-body">
                    <div id="@("product-intro"+"-"+i)" class="collapse" style="margin-bottom: 10px; border-bottom:1px solid #dee2e6; padding:10px 0; font-size: 12px;">
                        <div class="row justify-content-between">
                            <div class="col">
                                <span id='@string.Format("article-{0}-spec", line.Product.tecId)'></span>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#product-intro-@i">Read More +</button>
                </div>

            </div>
        </td>
    </tr>
}

Javascript：

<script>
    function articleSpec() {

        $("#product-intro").each(function (index) {
            var articleId = document.getElementById('tecId').value;
            if (!articleId)
                return;

            var labelSelector = "#article-" + articleId + "-spec";

            var url = "/Search/ArticleSpecification";
            var postdata = "articleid=" + articleId;

            $.post(url,
                postdata,
                function (data) {
                    $(labelSelector).html(data);
                });
        });
    }
</script>

这是我的产品介绍CSS：

.cart-content #product-intro {
    margin-bottom: 10px;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 10px 0;
    font-size: 12px;
}

我还尝试在javascript中传递@i并在div中动态加载数据：

function articleSpec(number) {

        $("#product-intro" + '-' + number).each(function (index) {

在C＃MVC Razor foreach循环中分别折叠每个div

0 个答案: