GVKun编程网logo

【AJAX】——UpdatePanel控件的使用（ajax更新数据）

10

对于【AJAX】——UpdatePanel控件的使用感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍ajax更新数据，并为您提供关于ajaxUpdatePanel用法、ajax–“UpdateP

对于【AJAX】——UpdatePanel控件的使用感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍ajax更新数据，并为您提供关于ajax UpdatePanel用法、ajax – “UpdatePanel”在Razor(mvc 3)、ajax – 如何在UpdatePanel中保存历史记录？、ajax.net updatepanel 中数据量过大导致 500 错误的有用信息。

本文目录一览：

【AJAX】——UpdatePanel控件的使用（ajax更新数据）

【AJAX】——UpdatePanel控件的使用（ajax更新数据）


简介

UpdatePanel是AJAX中的一个很实用的控件，它可以用来创建丰富的局部更新Web应用程序，它的强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。


定义

下面是UpdatePanel控件的定义：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate>

        <!---->

    </ContentTemplate>

    <Triggers>

        <asp:AsyncPostBackTrigger />

        <asp:PostBackTrigger />

    </Triggers>

</asp:UpdatePanel>

重要属性

属性1：ChildrenAsTriggers

当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。

属性2：RenderMode

表示UpdatePanel最终呈现的HTML元素。Block（默认）表示<div>，Inline表示<span>。

属性3：UpdateMode

表示UpdatePanel的更新模式，有两个选项：Always和Conditional。Always是不管有没有Trigger，其他控件都将更新该UpdatePanel，Conditional表示只有当前UpdatePanel的Trigger，或ChildrenAsTriggers属性为true时当前UpdatePanel中控件引发的异步回送或者整页回送，或是服务器端调用Update()方法才会引发更新该UpdatePanel。


工作原理

UpdatePanel的工作依赖于ScriptManager服务端控件和客户端PageRequestManager类，当ScriptManager中允许页面局部更新时，它会以异步的方式回传给服务器，与传统的整页回传方式不同的是只有包含在UpdatePanel中的页面部分会被更新，在从服务端返回HTML之后，PageRequestManager会通过操作DOM对象来替换需要更新的代码片段。


例子

根据所学到的知识，做了一个UpdatePanel控件的小demo，代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test2.WebForm1" %>

<!DOCTYPE html>

<script runat="server">

    void Button1_Click(object sender,EventArgs e)

    {
        this.Label1.Text = "当前时间为：" + System.DateTime.Now.ToString();
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

    <title>UpdatePanel Trigger Sample</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div>
                    <asp:Button ID="Button1" runat="server" Text="更新当前时间" OnClick="Button1_Click"/>
                    <br />
                    <asp:Label ID="Label1" runat="server" Text="" Font-Bold="True" Font-Size="Large"></asp:Label></div>
            </ContentTemplate>

            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1"/>
            </Triggers>

        </asp:UpdatePanel>
    </form>
</body>
</html>

其实现的效果：


每当点击“更新当前时间”按钮，其下的时间便会更新为当前时间，而不用刷新整个页面。



AJAX学习的是王兴魁的视频，经师傅点播学习了这个控件的使用，通过小例子的实践感觉很实用，而且有很多优势，之后也会经常用到！

ajax UpdatePanel用法

ajax UpdatePanel用法

总结

以上是小编为你收集整理的ajax UpdatePanel用法全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

ajax – “UpdatePanel”在Razor(mvc 3)

ajax – “UpdatePanel”在Razor(mvc 3)

是否有类似UpdatePanel(在ASPX中)为Razor？

我想每30秒自动刷新数据(例如表格,图表,…).
类似于每30秒点击一次链接：

@Ajax.ActionLink("Refresh","RefreshItems",new AjaxOptions() {
     UpdateTargetId = "ItemList",HttpMethod = "Post"})

感谢Tobi

编辑：

我可能应该补充说,动作链接呈现局部视图.

cshtml中的代码：

<div id="ItemList">
  @Html.Partial("_ItemList",Model)
</div>

控制器中的代码：

[HttpPost]
    public ActionResult RefreshItems() {
        try {
            // Fill List/Model
            ... 

            // Return Partial
            return PartialView("_ItemList",model);
        }
        catch (Exception ex) {

            return RedirectToAction("Index");
        }
    }

如果PartielView可以刷新本身就会创建.

您可以使用Jquery尝试类似以下内容(尚未测试) 
<script type="text/javascript">
   $(document).ready(function() {
        setInterval(function()
        {
         // not sure what the controller name is
          $.post('<%= Url.Action("Refresh","RefreshItems") %>',function(data) {
           // Update the ItemList html element
           $('#ItemList').html(data);
          });
        },30000);
   });
</script>

上述代码应该放在包含的页面中,而不是局部视图页面.请记住,部分视图不是一个完整的HTML页面.

我最初的猜测是,这个脚本可以放在部分和修改如下.确保ajax数据类型设置为html.

<script type="text/javascript">
    setInterval(function()
    {
      // not sure what the controller name is
      $.post('<%= Url.Action("Refresh",function(data) {
        // Update the ItemList html element
        $('#ItemList').html(data);
      });
    },30000);
</script>

另一个选择是将javascript存储在单独的js文件中,并在ajax成功回调中使用Jquery getScript函数.

ajax – 如何在UpdatePanel中保存历史记录？

ajax – 如何在UpdatePanel中保存历史记录？

我为Web应用程序创建了一个管理页面,它主要是ajax.几乎所有页面中的事件都会更新页面上的一个UpdatePanel.
如何在用户的历史记录中保存每个UpdatePanel状态,以便当用户按下浏览器“返回”按钮时,它们不会被重定向到登录屏幕？

解决方法

在.NET 3.5 SP 1中添加了管理历史记录的功能.以下是一些有助于您加快速度的资源.

Introduction to ASP.NET Ajax History

ASP.NET Podcast Show #117 – Using the History Functionality with the ASP.NET AJAX UpdatePanel in .NET 3.5 Service Pack 1 Beta 1

ASP.NET Podcast Show #119 – Using the History (Back) Functionality with the ASP.NET AJAX Web Services in .NET 3.5 Service Pack 1 Beta 1

ajax.net updatepanel 中数据量过大导致 500 错误

ajax.net updatepanel 中数据量过大导致 500 错误

一个页面莫名其妙的按钮不能点，但是删了数据就可以了，原来是因为updatepanel中数据太多，导致页面报错了。   中数据量过大导致 500 错误 出现的问题描述：当页面的数据量比较大时，出现异常，详细信息: System.InvalidOperationException: 对象的当前状态使该操作无效 问题的原因： 出现这个异常的原因正是因为上年12月29号那次微软发布的最后一次非正常更新程序引起的． 在这次安全更新中对于asp.net单次的提交量做了一个最大量限制1000， 出现这个异常正是因为页面提交量超过了1000这个限制． 问题的解决办法：   .net 2.0 以上版本在web.config中更改：     <appSettings>         <add key="aspnet:MaxHttpCollectionKeys" value="5000" />      </appSettings>

我们今天的关于【AJAX】——UpdatePanel控件的使用和ajax更新数据的分享就到这里，谢谢您的阅读，如果想了解更多关于ajax UpdatePanel用法、ajax – “UpdatePanel”在Razor(mvc 3)、ajax – 如何在UpdatePanel中保存历史记录？、ajax.net updatepanel 中数据量过大导致 500 错误的相关信息，可以在本站进行搜索。

本文标签：

上一篇ajax 请求canceled的问题（ajax请求出错）

下一篇MVC在control内传递AJAX（mvc中controller传值到view）

相关文章