Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Разработка под ASP.NET > JQuery и AJAX


Автор: Ivankult 24.3.2012, 23:14
Добрый вечер. Замучился со связкой Jquery+AJAX на ASP. Возникла следующая проблема:
Есть страница Default.aspx,
На ней два Ajax-контрола:Меню и контент.
В первом из них-стайка div-ов, которые полностью управлятся jquery(расолзаются как аккордеон, подсвечиваются).
Необходимо, что бы при наведении на пункт меню отрисовывалась картинка во втором аякс-контроле.
Долго думал, как это сделать. Додумался до банального:

Код

$.post("Default.aspx",
            { client: "menu",
                method: "select",
                categoryid: $(this).attr('categoryid')
            });
.

Затем, на Default.aspx:
Код

protected void Page_Load(object sender, EventArgs e)
    {
            if (Request.Params["client"] != null)
            {
                if (Request.Params["method"].ToString() == "select")
                {
                    this.pageContent.LoadData(Request.Params["categoryid"].ToString());
                }                                
            }        
    }


И в pageContent:
Код

public void LoadData(string id)
    {
        Label1.Text = id;

        //UpdatePanel1.Update();        
    }


Фиддлером отлавливаю запрос, он проходит, брейкпоинтом ловлю вызов и отработку метода LoadData, но ничего визуально не меняется. Содержимое обоих контролов в UpdatePanel'ах. Что я делаю не так?

И второе. Вот полный код аккордеона:
Код

<script type="text/javascript">
    $(document).ready(function () {

        $('div[type="parent"]').hide();
        $('div[type="child"]').hide();

        $('div[type="primary"]').click(function () {
            $('div[type="parent"]').hide();
            $('div[type="child"]').hide();

            $('div[isactive="true"]').removeClass('active').removeAttr('isactive');

            $(this).addClass('active');
            $(this).attr("isactive", "true");

            $('div[parentid="' + $(this).attr("categoryid") + '"]').show();

        });

        $('div[type="parent"]').click(function () {
            $('div[type="child"]').hide();

            $('div[isactive="true"]').removeClass('active').removeAttr('isactive');

            $(this).addClass('active');
            $(this).attr("isactive", "true");

            $('div[parentid="' + $(this).attr("categoryid") + '"]').show();

        });

        $('div[type]').hover(function () {
            $(this).addClass('selected');

            $.post("Default.aspx",
            { client: "menu",
                method: "select",
                categoryid: $(this).attr('categoryid')
            });

           // alert("I'm Soldier");

        });

        $('div').mouseout(function () {
            $(this).removeClass('selected');
        });
    });

</script>


При нажатии на кнопку во втором аякс-контроле, аккордеон раскрывается и все атрибуты isactive слетают. Почему?

И главный вопрос:может, я думаю в совершенно неверном направлении и jquery здесь никуда не упал? Как поставленную задачу решить правильно?

Заранее благодарю.

Автор: 1stain 1.4.2012, 22:27
По поводу первого вопроса: или реализовать свои web controls с поддержкой ASP.NET Ajax (например, как здесь: http://msdn.microsoft.com/en-us/library/bb386450.aspx), или добавить в код статический метод, который звать ajax'ом из javascript'а и в котором выдавать url для картинки, которую надо обновить. Затем, в обработчике success метода jQuery.post менять src картинки в контенте на возвращаемый сервером.

По поводу второго вопроса - если меню контрол не кидает постбэков, то самый простой вариант - обернуть его в UpdatePanel с UpdateMethod="Conditional"

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)