jQuery来计算返回的行数

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，然后执行另一个操作？

编辑： 该数据是通过调用我的Controller - > Data Access Layer类 - > SQL获得的，没有web服务。

EDIT2： 在@Roberto利纳雷斯的建议，我完整的脚本看起来与文档准备功能

$(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"); 
     } 
    }); 
}); 

}）如下：

我的视图页包含

<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

为什么不返回BOT的内容和成功计数。

E.g.返回具有OriginalContent和ContentCount（一个int）

，然后在你的JS对象

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

Answer 2

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

假设你插入<table>内<tr>元素的列表，你可以用东西将他们像$('#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 }; 
    } 

而在视图上，我使用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> 

当我们点击按钮即可输出 -