Question

我的MVC视图页面中有以下Jquery

$(function () {
    $('#SelectedProductId').change(function () {
    var selectedProduct = $('#SelectedProductId option:selected').val();
    if (selectedProduct == null || selectedProduct == -1) {
        return false;
    }
    $('#pleaseWaitMessage').dialog("open");
    $.ajax({
        type: "POST",
        url: "MyProducts.aspx/GetProducts",
        data: { ProdId: selectedProduct },
        timeout: 8000,
        success: function (data) {
            var content = $(data);
            $('#productParameters').html(content);
            $('#pleaseWaitMessage').dialog("close");
        },
        error: function () {
            $('#pleaseWaitMessage').dialog("close");
            $('#systemError').dialog("open");
        }
    });
});

}）;

这完全正常，它会返回产品列表，并根据从下拉列表中选择的选项在页面上显示它们。

我想要尝试做的是在success上稍微扩展一下，它还会检查已返回的项目数，这样我就可以尝试启用/禁用选项。因此，如果它返回0，我将从页面中禁用“购买”按钮，如果它大于0，则应启用它。

我尝试过使用content.count >0，但是当我第一次计入alert时，它就说了34，当我真正期待1时（只有1行）。

在上面的jquery中，有没有简单的方法可以检查已返回的行数，然后执行其他操作？

编辑：数据是通过调用我的控制器获得的 - ＆gt;数据访问层类 - ＆gt; SQL，没有Web服务。

EDIT2：根据@Roberto Linares的建议，我的完整脚本如下所示，文档就绪功能

$(function () {
    $('#SelectedProductId').change(function () {
    var selectedProduct = $('#SelectedProductId option:selected').val();
    if (selectedProduct == null || selectedProduct == -1) {
        return false;
    }
    $('#pleaseWaitMessage').dialog("open");
    $.ajax({
        type: "POST",
        url: "MyProducts.aspx/GetProducts",
        data: { ProdId: selectedProduct },
        timeout: 8000,
        success: function (data) {
            var content = $(data);
            $('#productParameters').html(content);
            $('#pleaseWaitMessage').dialog("close");
        },
        error: function () {
            $('#pleaseWaitMessage').dialog("close");
            $('#systemError').dialog("open");
        }
    });
});

}）;

$(document).ready(function () {
    $('#SelectedProductId').change(function () {
        var selectedProduct = $('#SelectedProductId option:selected').val();
        if (selectedProduct == null || selectedpProduct == -1) {
            return false;
        }
        alert($('#productParameters>table>tbody>tr').count);
    });
});

我的观看页面包含

<div>
    <div id="tableHolder">
        <table id="productList">
            <thead>
                <tr>
                    <th>product</th>
                    <th>Date From</th>
                    <th>Date To</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody id="productParameters"></tbody>
        </table>
    </div>
</div>

Answer 1

为什么不回报机器人的内容和成功的数量。

E.g。返回一个具有OriginalContent和ContentCount（一个int）的对象

然后在你的js

var count= data.ContentCount ;
var content = $(data.OriginalContent);
$('#productParameters').html(content);

Answer 2

最好的方法是在Ajax响应中将行数作为额外值返回，但由于您只是返回原始HTML而不是json或任何其他结构数据，因此您可以计算在您之后插入的HTML元素的数量做 $('#productParameters').html(content);。

假设您要在<tr>内插入<table>元素列表，可以在插入$('#productParmeters>table>tbody>tr').length

之后对其进行计数

Answer 3

我会以稍微不同的方式解决这个问题 -

让我们采取产品模型 -

public class Product
{
    public string Name { get; set; }
    public int Quantity { get; set; }
}

并且有一个控制器动作将返回产品列表作为Json结果 -

    [HttpGet]
    public ActionResult GetProducts()
    {
        List<Product> products = new List<Product>();
        products.Add(new Product() { Name = "Toyota", Quantity = 10 });
        products.Add(new Product() { Name = "Merc", Quantity = 20 });
        products.Add(new Product() { Name = "BMW", Quantity = 30 });

        return new JsonResult() { Data = products, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

在View上，我使用JQuery模板呈现所有产品。这种模板方法的优点是我们的控制器动作不需要返回html响应，它可以简单地返回产品列表。因此，可以使用data.length计算计数，同时可以使用模板实现数据的动态绑定。

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>

<script id="productsTmpl" type="text/x-jquery-tmpl">
    <tr>
        <th>${Name}</th>
        <th>${Quantity}</th>
    </tr>
</script>

<table id="tblProducts">
    <thead>
        <tr>
            <th>Name</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tr></tr>
</table>

<input type="submit" value="click" id="click" />

<div id="count"></div>

不是JQuery函数 -

<script>
    $(function () {
        $('#click').click(function (e) {
            jQuery.ajax({
                type: "GET",
                url: "@Url.Action("GetProducts")",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                $("#count").html(data.length);
                $("#productsTmpl").tmpl(data).appendTo("#tblProducts");
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
            });                
        });
    });
</script>

点击按钮时的输出将是 -

enter image description here

jquery计算返回的行数

3 个答案: