Vs 自带AjAx控件--局部更新

 

这篇博客简单介绍下vs的AjAx自带的两个插件

ScripManager  与 UpdatePanel

这两个控件是vs sap.net 中使用最大的几个控件之一.主要作用是对网页的内容,进行局部的更新的

下面进行局部的讲解

ScripManager

1  它是脚本控制器,是asp.net.Ajax存在的基础,是所有的ajax的控件的的基础

2  一个页面只允许有一个ScriptManager,并且放在其他的ajax的控件的前面

3  ScriptManager掌管着客户端Ajax页的多个脚本,并在页面中注册ajax类库, 用来实现页面的局部更新和对Web服务的调用 

它的基本属性有以下几种

 

AllowCustomError :是否要使用错误处理

AsyncPostBackErrorMessage:异步返回错误的时候是否返回错误洗洗脑

AsypostBackTimeOut:异步返回事件显示:默认为90秒

EnablePartialZRendering:是否支持页面的局部刷新

ScriptMode:指定发送到客户端的脚本模式:有四种:

Auto,Inherit,Debug,Release,默认为Aurto的

ScripPath:设置所有的脚本快的根目录,作为全局属性

 

UpdatePanel控件

也是Ajax里使用的最多的控件之一,updatePanel控件是用来局部更新网页上的内容.网页上要局部更新的内容必须

放在updatepanel控件里.它必须和上面说的ScriptManager控件放在一起使用.下面看看一些属性

属性	说明
Children                           As   Triggers	当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。
RenderMode	表示UpdatePanel最终呈现的HTML元素。Block（默认）表示<div>，Inline表示<span>
UpdateMode	表示UpdatePanel的更新模式，有两个选项：Always和Conditional。Always是不管有没有Trigger，其他控件都将更新该UpdatePanel，Conditional表示只有当前UpdatePanel的Trigger， 或ChildrenAsTriggers属性为true时当前UpdatePanel中控件引发的异步回送或者整页回送，或 是服务器端调用Update()方法才会引发更新该UpdatePanel。
Contente Template	用来定义UpdatePanel的内容
Triggers	分别为AsyncPostBackTrigger和PostBackTrigger

 

上面的基本属性介绍完后,下面就解决一个小问题 .将整个界面的刷新改为局部的刷新

 ======================================================================

隔开以上都是为了这个问题做铺垫的

现在的问题是: 在网页中有删除的新闻的一个功能

 

当删除新闻的时候却进行了真个页面的刷新,这个是我们不想要的,刷新带来的不必要的时间和资源.那有什么办法能直

接删除而不刷新么

这个就用到了我们上面说到的aso.net.Ajax的控件了

用到基础控件ScriptManager 和局部刷新控件UpdatePanel

那代码又是怎样写的呢.

首先需要明白, 是要将内容放在 UpdatePanel的内容里

而内容是不同的. 就需要不同的模板了

上图运用的是table表格数据

所以这里就用UpdatePanel 的ContentTemplate的属性了

将table 的数据放在 ContentTemplate的下面

这样小问题就迎刃而解了

实例代码如下

<div class="fontcolor">提示：点击新闻标题后可进行对该新闻评论的删除！</div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <table class="m_table">
                        <tr>
                            <th class="xuhao">序号</th>
                            <th>标题</th>
                            <th class="del">修改</th>
                            <th class="del">删除</th>
                        </tr>
                        <asp:Repeater ID="repNews" runat="server">
                            <ItemTemplate>
                                <tr>
                                    <td><%#Eval("id")%></td>
                                    <td><a href='../NewsContent.aspx?newsid=<%#Eval("id") %>' target="_blank"><%# Eval("title") %></a></td>
                                    <td><a href="#">修改</a>
                                    </td>
                                    <td>
                                        <asp:LinkButton ID="lbtnDel" OnClientClick="returnconfirm('删除新闻会将其评论一起删除,是否删除')" OnClick="lbtnDel_Click" CommandArgument='<%#Eval("id") %>' runat="server">删除</asp:LinkButton></td>
                                </tr>
                            </ItemTemplate>
                        </asp:Repeater>
                    </table>
                </ContentTemplate>
            </asp:UpdatePanel>

到这里控件的基本属性就说完了,但是实例几乎还没有说明,待续详细讲解.