如何将Linq查询检索到的所有JQuery数据列追加到Div元素？_Jquery_Json_Ajax_Asp.net Mvc

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

jquery json ajax asp.net-mvc

如何将Linq查询检索到的所有JQuery数据列追加到Div元素？,jquery,json,ajax,asp.net-mvc,Jquery,Json,Ajax,Asp.net Mvc,我有一个controlleractionresult方法，它只是从服务器获取数据并以JSON格式检索数据，在视图中还有一段Ajax和JQuery代码，从中获取JSON数据并将其附加到容器中。以前我有一个控制器ViewResult，它获取数据并使用@Model属性检索到视图中。数据以一种很好的方式排列，下面是最终用户看到的图片。我也可以用JQuery数据生成同样的结果吗？现在我想将JQuery数据附加到我的视图元素中，但我不能这样做。这是我的JQuery函数和Ajax调用 <head&

我有一个controlleractionresult方法，它只是从服务器获取数据并以JSON格式检索数据，在视图中还有一段Ajax和JQuery代码，从中获取JSON数据并将其附加到容器中。以前我有一个控制器ViewResult，它获取数据并使用

@Model

属性检索到视图中。数据以一种很好的方式排列，下面是最终用户看到的图片。

我也可以用JQuery数据生成同样的结果吗？现在我想将JQuery数据附加到我的视图元素中，但我不能这样做。这是我的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>


这是无限的控制
var pageSize=10；
var pageIndex=0；
$（文档）.ready（函数（）{
GetData（）；
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）==
$（文档）.height（）-$（窗口）.height（））{
GetData（）；
}
});
});
函数GetData（）{
$.ajax({
键入：“GET”，
url:“/Product/GetData”，
数据：{“pageindex”：pageindex，“pagesize”：pagesize}，
数据类型：“json”，
成功：功能（数据）{
如果（数据！=null）{
对于（变量i=0；i


上面只附加了产品名称，这不是我想要的。
这是我以前的看法
<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>


类别
@动作（“菜单”、“产品”）
特色项目
@Model.ProductCategory
@Model.ProductPrice.ToString（“c”）
@Model.ProductName
@模型产品价格
@Model.ProductName

任何帮助都将不胜感激，非常感谢
编辑。
<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>


@Model.ProductCategory
@型号产品价格
@Model.ProductName
@型号产品价格
@ActionLink（Model.ProductName，“ProductDetails”，新的{Model.ProductID}）
< /代码>  3个选项，您可以考虑。为了简单起见，我假设您只想生成并附加以下html

.... 
..

选项1：在ajax成功回调中构建完整的新html
var container=$（'#container'）；//缓存它
成功：功能（数据）{
$。每个（数据、功能（索引、项目）{
var image=$（'img'）.attr（'src'，item.Url）；
变量类别=$（''）.text（item.ProductCategory）；
var name=$（'）.text（item.ProductName）；
var div=$（''）.addClass（'productinfo文本中心'）.append（图像、类别、名称）；
$（“#容器”）。追加（div）；
});
}

旁注：您需要在服务器上生成图像url，并将其传递到您的JsonResult

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

那你想要什么？您显示的所有代码都是在
元素中添加ProductName
。@StephenMuecke不，我不能用jquery数据生成如上图所示的视图。我该怎么做？以前我使用@HTML helpers将数据放置在正确的位置，现在我该怎么做？您的意思是要根据您的命令生成HTML吗“以前的”视图在这种情况下，您只需要附加额外的元素。如果GetData（）
方法返回部分视图并将其附加到DOM中，您会发现这要容易得多。（但对于图像，您需要在第三个选项中构建一个属性），因为它看起来是一个逻辑解决方案，在脚本中定义了容器？实际上，我想把你刚才调用的部分视图中的数据附加到一个容器中，还有一个问题，这个脚本应该放在哪里？在局部视图中？我在你的ans的脚本部分看不到我的脚本代码
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!");
        }
    });
}