Question

我有一个控制器ActionResult方法，该方法只从服务器获取数据并以JSON格式检索它，并在视图中获取JSON数据并将其附加到容器中。以前我有一个控制器ViewResult，它使用@Model属性获取数据并检索到视图中。数据以一种很好的方式排列，这里是最终用户的样子。

我是否也可以使用JQuery Data生成相同的内容？现在我想将JQuery Data附加到我的视图元素，但我无法做到。这是我的JQuery函数和Ajax调用。

<head>
    <title>This is infinite control</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">

        var pageSize = 10;
        var pageIndex = 0;

        $(document).ready(function () {
            GetData();

            $(window).scroll(function () {
                if ($(window).scrollTop() ==
                   $(document).height() - $(window).height()) {
                    GetData();
                }
            });
        });

        function GetData() {
            $.ajax({
                type: 'GET',
                url: '/Product/GetData',
                data: { "pageindex": pageIndex, "pagesize": pageSize },
                dataType: 'json',
                success: function (data) {
                    if (data != null) {
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2>" +
                            data[i].ProductName + "</h2>");
                        }
                        pageIndex++;
                    }
                },
                beforeSend: function () {
                    $("#progress").show();
                },
                complete: function () {
                    $("#progress").hide();
                },
                error: function () {
                    alert("Error while retrieving data!");
                }
            });
        }
    </script>
</head>

以上只附加产品名称，这不是我想要的。这是我以前的观点。

<section>
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <div class="left-sidebar">
                    <h2>Category</h2>
                    <div class="panel-group category-products" id="accordian">
                        <div class="panel panel-default">
                            @Html.Action("Menu","Product")
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-9 padding-right">
                <div class="features_items">
                    <h2 class="title text-center">Features Items</h2>

                    <div class="col-sm-4">
                        <div class="product-image-wrapper" id="container">
                            <div class="single-products">
                                <div class="productinfo text-center">
                                    <img src="@Url.Action("GetMainPicture", "Product", new { Model.ProductID })" alt="" />
                                    <h2>@Model.ProductCategory</h2>
                                    <h2>@Model.ProductPrice.ToString("c")</h2>
                                    <p>@Model.ProductName</p>
                                    <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                                </div>
                                <div class="product-overlay">
                                    <div class="overlay-content">
                                        <img src="@Url.Action("GetSecondPicture", "Product", new { Model.ProductID })" alt="" />
                                        <h2>@Model.ProductPrice</h2>
                                        <p>@Model.ProductName</p>
                                        <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                                    </div>
                                </div>
                                <img src="images/home/new.png" class="new" alt="" />
                            </div>
                        </div>
                    </div>      
                </div>
            </div>
        </div>
    </div>
</section>

非常感谢任何帮助。非常感谢。

修改

<div class="col-sm-4">
        <div class="product-image-wrapper">
            <div class="single-products">
                <div class="productinfo text-center">
                    <img src="@Url.Action("GetMainPicture", "Product", new { Model.ProductID })" alt="" />
                    <h2>@Model.ProductCategory</h2>
                    <h2>@Model.ProductPrice AFN</h2>
                    <p>@Model.ProductName</p>

                    <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                </div>
                <div class="product-overlay">
                    <div class="overlay-content">
                        <img src="@Url.Action("GetSecondPicture", "Product", new { Model.ProductID })" alt="" />
                        <h2>@Model.ProductPrice AFN</h2>
                        <p>@Html.ActionLink(Model.ProductName, "ProductDetails", new { Model.ProductID })</p>
                        <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

您可以考虑3个选项。为了简单起见，我假设您要生成并附加以下html

<div class="productinfo text-center">
    <img src="...." /> <!-- url to the product image -->
    <h2>....</h2> <!-- the product category -->
    <p>....</p> <!-- the product name -->
</div>

选项1：在ajax成功回调中构建完整的新html。

var container = $('#container'); // cache it

success: function (data) {
    $.each(data, function(index, item) {
        var image = $('img').attr('src', item.Url);
        var category = $('<h2></h2>').text(item.ProductCategory);
        var name = $('<p></p>').text(item.ProductName);
        var div = $('<div></div>').addClass('productinfo text-center').append(image, category, name);
        $("#container").append(div);
    });
}

附注：您需要在服务器上生成图片网址并将其传递到JsonResult

选项2：创建客户端模板，克隆它，更新其属性（通过引用类名）并将其添加到DOM。模板将是

<div id="product" style="display:none">
     <div class="productinfo text-center">
        <img class="image" src="" />
        <h2 class="category></h2>
        <p class="name"></p>
    </div>
<div>

和脚本

var container = $('#container');
var template = $('#product');

success: function (data) {
    $.each(data, function(index, item) {
        var clone = template.clone().html();
        clone.find('.image').attr('src', item.Url);
        clone.find('.category').text(item.ProductCategory);
        clone.find('.name').text(item.ProductName);
        container.append(clone);
    });
}

选项3 :(目前为止最容易和最易维护的）是返回部分视图而不是JsonResult（比如_Product.cshtml）

@model IEnumerable<Product>
@foreach (var item in Model)
{
    <div class="col-sm-4">
        <div class="product-image-wrapper" id="container">
            <div class="single-products">
                <div class="productinfo text-center">
                    <img src="@Url.Action("GetMainPicture", "Product", new { id = item.ProductID })" alt="" />
                    <h2>@item.ProductCategory</h2>
                    <h2>@item.ProductPrice.ToString("c")</h2>
                    <p>@item.ProductName</p>
                    <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                </div>
                <div class="product-overlay">
                    <div class="overlay-content">
                        <img src="@Url.Action("GetSecondPicture", "Product", new { id = item.ProductID })" alt="" />
                        <h2>@item.ProductPrice</h2>
                        <p>@item.ProductName</p>
                        <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                    </div>
                </div>
                <img src="images/home/new.png" class="new" alt="" />
            </div>
        </div>
    </div>      
}

和GetData()方法

var products = // your query to get the collection of products
return PartialView("_Product", products);

并在脚本中

var container = $('.features_items');
function GetData() {
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetData", "Product")', // don't hard code your url's
        data: { pageindex: pageIndex, pagesize: pageSize },
        dataType: 'html', // change this
        success: function (html) {
            container.append(html);
            pageIndex++;
        },
        beforeSend: function () {
            $("#progress").show();
        },
        complete: function () {
            $("#progress").hide();
        },
        error: function () {
            alert("Error while retrieving data!");
        }
    });
}

如何将Linq查询检索到的所有JQuery数据列附加到Div元素？

1 个答案: