Как остановить постбэк с помощью updatepanel

Question

Я использую C #, Ajax для кодирования.

Пожалуйста, посмотрите ниже код, который я использую для реализации AJAX.

<div id="column2Container">
            <ajax:ScriptManager ID="ScriptManager1" runat="server">
            </ajax:ScriptManager>
            <div id="column2">
                 <ajax:UpdateProgress ID="uprogDestinationsTabs" runat="server" AssociatedUpdatePanelID="upDestinationTabs">
                    <ProgressTemplate>
                        <span style="display: block; text-align: center">
                            <p style="font-family: Verdana; font-size: larger; font-weight: bold;">
                                <img src="/Images/ajax-loader-circle-thickbox.gif" alt="Processing..." /><br />
                                <br />
                                Processing...</p>
                        </span>
                    </ProgressTemplate>
                </ajax:UpdateProgress>
                <ajax:UpdatePanel ID="upDestinationTabs" runat="server" RenderMode="Inline" UpdateMode="Conditional">
                    <ContentTemplate>
                        <CCIT.Web:DestinationTabs runat="server" />
                    </ContentTemplate>
                </ajax:UpdatePanel>
            </div>
</div>  

На самом деле я пытаюсь сделать это, вывидно, что внутри панели обновления используется .net usercontrol, т.е. <CCIT.Web:DestinationTabs runat="server" /> этот пользовательский элемент управления будет отображаться ниже html

<ul class="tabHead tabs-nav">
    <li class="tabLeftEnd"></li>
    <li id="tab-1">
    <a class="load-fragment" href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx"><span>Overview</span></a>
    </li>
    <li class="tabs-selected" id="tab-2">
    <a href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx"><span>Guide</span></a>
    </li>
    <li id="tab-3">
    <a href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx"><span>Flight Schedule</span></a>
    </li>
    <li id="tab-4">
    <a href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx"><span>Special Offers</span></a>
    </li>
    <li id="tab-5">
    <a class="load-fragment" href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx"><span>Photos</span></a>
    </li>
    <li class="tabRightEnd"></li>
</ul>

Теперь я пытаюсь сделать так, чтобы каждый раз, когда пользователь нажимал любую из этих ссылок,должен обрабатываться из Ajax, я имею в виду, что при загрузке этих страниц не будет обратной передачи страницы, то есть, почему я пытаюсь использовать панель обновления.

Пожалуйста, предложите, что не так в вышеупомянутой реализации ajax, так как приведенный выше кодне работает для меня.

Спасибо.

С наилучшими пожеланиями, MS

Answer 1

Я думаю, вы неправильно понимаете, что такое постбэк.Обратная передача - это когда содержимое формы отправляется на сервер для обработки.Когда пользователь нажимает на одну из ваших ссылок, это не постбэк.На сервер ничего не отправляется - они просто переходят на новую страницу.

Наличие ссылок на панели обновления не препятствует обновлению или «мерцанию» экрана при переходе пользователя на новую страницу.Единственный раз, когда это будет иметь значение - это если вы вызываете обратную передачу (например, нажатие кнопки).

Единственный способ предотвратить обновление экрана при переходе от страницы к странице - это получить содержимое страницы с помощью AJAX (не панели обновления) и загрузить его в div.

Вы можете использовать функцию загрузки jquery для этого:

1) Добавить ссылку на jquery на свою страницу

<script src="<%=ResolveUrl("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript" />

2) Добавить div на свою страницу под названием divContent

<div id="divContent"></div>

3) Добавьте этот бит javascript на свою страницу

<script type="text/javascript">
    function LoadPage(url) {
        $('#divContent').load(url, 'divContent');
    }
</script>

4) Сделайте так, чтобы ваши ссылки выглядели так:

<a href="javascript: LoadPage('path/to/page.aspx');"><span>Guide</span></a>