jquery для подсчета количества возвращенных строк

0

У меня есть следующая 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>&nbsp;</th>
                </tr>
            </thead>
            <tbody id="productParameters"></tbody>
        </table>
    </div>
</div>
  • 1
    почему вы не отправляете номера строк в этом ответе с сервера?
  • 0
    Похоже, вы сейчас только что вернули HTML? Объект JSON, в котором свойства и количество, и новое HTML-содержимое являются свойствами, могут быть односторонними. В качестве альтернативы вы можете посчитать количество строк (они являются фактическими элементами <tr> ?) Внутри #productParameters после обновления содержимого. Если вы покажете нам пример того, какими будут data (то есть то, что ваш серверный код отправляет в качестве тела ответа), это поможет в огромном количестве.
Теги:
asp.net-mvc

3 ответа

0

Я бы решил эту проблему несколько иначе -

Давайте возьмем модель продукта -

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>

И выход, когда мы нажимаем на кнопку, будет -

Изображение 174551

0

Лучшим подходом было бы вернуть количество строк в качестве дополнительного значения в вашем ответе Ajax, но, поскольку вы просто возвращаете необработанный HTML вместо json или любые другие данные структуры, вы можете подсчитать количество вставленных элементов HTML после того, как вы выполните $('#productParameters').html(content); ,

Предполагая, что вы вставляете список <tr> элементов внутри <table>, вы могли бы посчитать их после вставки их с чем-то вроде $('#productParmeters>table>tbody>tr').length

  • 0
    Мне скорее нравится идея подсчета ТР, поскольку это кажется простым. Где было бы лучшее место, чтобы поместить этот код в jquery, который я перечислил? Я пытался сразу после $ ('# productParameters'). Html (content); но он возвратил 0 (я могу только собрать это, потому что это посчитали до того, как страница закончила рендеринг).
  • 0
    @MattR, если страница не завершила рендеринг, тогда код должен находиться внутри $(document).ready(function(){ }); , Также проверьте правильность хода запроса. Я просто угадал HTML, который вы возвращали после вызова Ajax.
Показать ещё 4 комментария
0

Почему бы не вернуть бот в контент и рассчитывать на успех.

Например, возвращаем объект, у которого есть OriginalContent и ContentCount (int)

а затем в вашем js

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню