У меня есть следующая Jquery
на моей странице MVC View
$(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
выше, а затем выполнить другое действие?
Изменение: данные получены при вызове моего контроллера → класса доступа к данным → SQL, нет веб-служб.
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> </th>
</tr>
</thead>
<tbody id="productParameters"></tbody>
</table>
</div>
</div>
Я бы решил эту проблему несколько иначе -
Давайте возьмем модель продукта -
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>
И выход, когда мы нажимаем на кнопку, будет -
Лучшим подходом было бы вернуть количество строк в качестве дополнительного значения в вашем ответе Ajax, но, поскольку вы просто возвращаете необработанный HTML вместо json или любые другие данные структуры, вы можете подсчитать количество вставленных элементов HTML после того, как вы выполните $('#productParameters').html(content);
,
Предполагая, что вы вставляете список <tr>
элементов внутри <table>
, вы могли бы посчитать их после вставки их с чем-то вроде $('#productParmeters>table>tbody>tr').length
$(document).ready(function(){ });
, Также проверьте правильность хода запроса. Я просто угадал HTML, который вы возвращали после вызова Ajax.
Почему бы не вернуть бот в контент и рассчитывать на успех.
Например, возвращаем объект, у которого есть OriginalContent и ContentCount (int)
а затем в вашем js
var count= data.ContentCount ;
var content = $(data.OriginalContent);
$('#productParameters').html(content);
<tr>
?) Внутри#productParameters
после обновления содержимого. Если вы покажете нам пример того, какими будутdata
(то есть то, что ваш серверный код отправляет в качестве тела ответа), это поможет в огромном количестве.