如何使用updatepanel停止页面回发

I am using C#, Ajax for coding.

我正在使用C＃，Ajax进行编码。

Please see below code which I am using for ajax implementation.

请参阅以下用于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>

Actually what I am trying to do is that, you can see there is an .net usercontrol used inside updatepanel i.e. <CCIT.Web:DestinationTabs runat="server" /> this user control will render below html

实际上我想要做的是，你可以看到在updatepanel里面有一个.net用户控件，即这个用户控件将在html下面呈现：destinationtabs>

<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>

Now what I am trying to do is that when ever user will click any of these links that should be handled from Ajax, I mean there would not be any page postback while loading these pages i.e. why I am trying to use update panel.

现在我要做的是，当用户点击任何应该从Ajax处理的链接时，我的意思是在加载这些页面时不会有任何页面回发，即为什么我尝试使用更新面板。

Please suggest what is wrong in the above ajax implementation as the above code is not working for me.

请告诉我上面的ajax实现有什么问题，因为上面的代码对我不起作用。

Thanks.

谢谢。

Best Regards, MS

最诚挚的问候，MS

1 个解决方案

#1

I think you are misunderstanding what a postback is. A postback is when the contents of a form are sent to the server for processing. When a user clicks on one of your links it isn't a postback. Nothing is being sent back to the server - they are just navigating to a new page.

我认为你误解了回发是什么。回发是指将表单的内容发送到服务器进行处理。当用户点击您的某个链接时，它不是回发。没有任何东西被发送回服务器 - 它们只是导航到新页面。

Having the links in an updatepanel is not going to prevent the screen from refreshing or 'flickering' when the user navigates to a new page. The only time this would make a difference is if you were causing a postback (ex. clicking a button).

在用户导航到新页面时，在更新面板中使用链接不会阻止屏幕刷新或“闪烁”。这会产生影响的唯一一次是你是否引发回发（例如点击一个按钮）。

The only way to prevent the screen from refreshing while navigating from page to page would be to get the contents of a page using AJAX (not an update panel) and load that into a div.

在页面之间导航时阻止屏幕刷新的唯一方法是使用AJAX（而不是更新面板）获取页面内容并将其加载到div中。

You could use jquery's load function to do this:

您可以使用jquery的加载函数来执行此操作：

1) Add a reference to jquery to your page

1）在页面中添加对jquery的引用

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

2) Add a div to your page called called divContent

2）在你的页面中添加一个名为divContent的div

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

3) Add this bit of javascript to your page

3）将这一点javascript添加到您的页面

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

4) Make your links look like this:

4）使你的链接看起来像这样：

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

#1