UpdatePanel控件实现无刷新级联

.master代码如下:

<%@ Master Language="VB" CodeFile="0_MST_ASPNET12.master.vb" Inherits="_0_MST_ASPNET12" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/CSS_DEFAULT.css" rel="stylesheet" type="text/css" />
    <link href ="JS/jquery-1.9.1.js" type ="text/javascript" />

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div style ="width:720px; margin:0px auto;">
        <div id="div_nav">

            <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
                Orientation="Horizontal" StaticDisplayLevels="2">
            </asp:Menu>

            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

        </div>

        <%--说明性文字--%>
        <div id="div_memo">
            <asp:ContentPlaceHolder id="CPH_memo" runat="server" />
        </div>

        <%--主程序及控件--%>
        <div id="div_main">
            <asp:ContentPlaceHolder id="cph_main" runat="server"/>
        </div>

        <%--输出部分--%>
        <div id="div_result">
        <h4>输出检测内容:</h4>
             <asp:ContentPlaceHolder id="cph_output" runat="server"/>
        </div>

    </div>
    </form>
</body>
</html>

.aspx代码如下:

<%@ Page Title="" Language="C#" MasterPageFile="~/0_MST_ASPNET12.master" AutoEventWireup="true" CodeFile="S4_UpdatePanel_ddls.aspx.cs" Inherits="Sample_code_S4_UpdatePanel_ddls" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPH_memo" Runat="Server">
    <strong>级联查询DropDownList:</strong>
    <ul>
        <li>ddl_p[省],内容不会改变,放在UpdatePanel外</li>
        <li>设置Triggers -> ddl_p</li>
        <li>ddl_c[市]数据绑定之后,会再次影响ddl_d的数据,所以绑定完成之后,需要强制ddl_d再次绑定数据</li>
        <li>掌握数据绑定在页面生命周期中的位置</li>
    </ul>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cph_main" Runat="Server">
    <p class ="showtime">页面时间: <%=DateTime.Now.ToFileTime() %></p>
    请选择地区:
    <asp:DropDownList ID="ddl_p" runat="server" DataSourceID="ads_p"
        DataTextField="p_name" DataValueField="p_id" AutoPostBack="True">
    </asp:DropDownList>
    <asp:AccessDataSource ID="ads_p" runat="server" DataFile="~/DATA/China.mdb"
        SelectCommand="SELECT * FROM [T_Province]"/>

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

    <asp:UpdatePanel ID="Upnl_ddls" runat="server" RenderMode="Inline"
        UpdateMode="Conditional"> <%--RenderMode="Inline" 以流的方式显示(行显示)--%>
        <ContentTemplate>

            <asp:DropDownList ID="ddl_c" runat="server" DataSourceID="ads_c"
                DataTextField="c_name" DataValueField="c_id" AutoPostBack="True" OnDataBound="load_d"><%--OnDataBound="load_d"强制绑定一下--%>
            </asp:DropDownList>
            <asp:AccessDataSource ID="ads_c" runat="server" DataFile="~/DATA/China.mdb"
                SelectCommand="SELECT [c_name], [c_id] FROM [T_City] WHERE ([c_pid] = ?)">
                <SelectParameters>
                    <asp:ControlParameter ControlID="ddl_p" Name="c_pid"
                        PropertyName="SelectedValue" Type="Int32" />
                </SelectParameters>
            </asp:AccessDataSource>

              <asp:DropDownList ID="ddl_d" runat="server" DataSourceID="ads_d"  OnDataBound="checkitems"
                DataTextField="d_name" DataValueField="d_id">
            </asp:DropDownList>
            <asp:AccessDataSource ID="ads_d" runat="server" DataFile="~/DATA/China.mdb"
                SelectCommand="SELECT [d_id], [d_name] FROM [T_District] WHERE ([d_cid] = ?)">
                <SelectParameters>
                    <asp:ControlParameter ControlID="ddl_c" Name="d_cid"
                        PropertyName="SelectedValue" Type="Int32" />
                </SelectParameters>
            </asp:AccessDataSource>

            <p class ="showtime">UpdatePanel时间: <%=DateTime.Now.ToFileTime() %></p>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID ="ddl_p" />
        </Triggers>
    </asp:UpdatePanel>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="cph_output" Runat="Server">
    <asp:Button ID="Button1" runat="server" Text="读取选择" onclick="Button1_Click" />
    <asp:Label ID="lbl_result" runat="server" />
</asp:Content>

注意点:

<span style="background-color: rgb(204, 0, 0);"> RenderMode="Inline" </span>
<span style="background-color: rgb(204, 0, 0);"> OnDataBound="load_d"</span>

.aspx.cs代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Sample_code_S4_UpdatePanel_ddls : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    //第二个DDL,数据绑定完成后,要求第三个DDL重新进行数据绑定
    protected void load_d(object sender, EventArgs e) {
        ddl_d.DataBind();
    }

    //最后一个DDL,如果内容为空,则不显示
    protected void checkitems(object s, EventArgs e) {
        if (ddl_d.Items.Count == 0) { ddl_d.Style["display"] = "none"; } else { ddl_d.Style.Remove("display"); }
    }

    //读取选择的按钮
    protected void Button1_Click(object sender, EventArgs e)
    {
        string _s = "您选择的是:" + ddl_p.SelectedItem.Text + " / " +  ddl_c.SelectedItem.Text + " / " + ddl_d.SelectedItem.Text + "。";

        lbl_result.Text = _s;
    }

}

效果如下:

时间: 2024-07-30 01:48:43

UpdatePanel控件实现无刷新级联的相关文章

通过Ajax来简单的实现局部刷新(主要为C#中使用的UpdatePanel控件和ScriptManager控件)

1. ScriptManager和UpdatePanel控件联合使用可以实现页面局部异步刷新的效果.UpdatePanel用来设置页面中局部异步刷新的区域,它必须依赖于ScriptManager,因为ScriptManager控件提供了客户端脚本生成与管理UpdatePanel的功能. ScriptManager属性 解释 EnablePartialRendering 如果启用了部分呈现且禁止了整页更新,则为 true:否则为 false. 默认值为 true.       一.实例一 Upda

ASP.Net UpdatePanel控件(转)

Asp.net UpdatePanel 允许用户构建一个丰富的,以客户端为中心的应用程序,引用UpdatePanel控件,能够实现页面的部分刷新,一个包含scriptManage和 UpdatePanel控件的页面自动具有页面部分刷新的功能,不需要写任何的客户端JavaScript代码.一个web页面只能包含一个 ScriptManage控件,但可以包含一个或多个UpdatePanel控件.  使用UpdatePanel控件实现页面的局部更新,需要包含一个ScriptManage控件,并且必须将

ASP.NET AJAX入门系列(5):使用UpdatePanel控件(二) UpdatePanel

UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新.通过本文来学习一下UpdatePanel其他的一些使用方法(第二篇). 主要内容 1.用编程的方法控制UpdatePanel的更新 2.UpdatePanel的嵌套使用 3.同一页面上使用多个UpdatePan

UpdatePanel控件

Asp.net UpdatePanel 允许用户构建一个丰富的,以客户端为中心的应用程序,引用UpdatePanel控件,能够实现页面的部分刷新,一个包含scriptManage和 UpdatePanel控件的页面自动具有页面部分刷新的功能,不需要写任何的客户端JavaScript代码.一个web页面只能包含一个 ScriptManage控件,但可以包含一个或多个UpdatePanel控件. 使用UpdatePanel控件实现页面的局部更新,需要包含一个ScriptManage控件,并且必须将S

服务器端控件的局部刷新,CallBack

服务器端控件的局部刷新,CallBack (2007-01-13 13:46:37) 转载▼   分类: 技术资料 发现了.net2.0原来有套CallBack机制,可以轻松实现服务器控件类似AJAX的效果(实现局部刷新),不过真的是服务器端控件用AJAX的话,效果确乎是没ASP.NET AJAX 好Callback与asp.net ajax的UpdatePanel控件内在实现机制都是Ajax但采用UpdatePanel控件的页面仍然采用Postback方式与服务器交互,会更新ViewState

动态添加HTML表单控件,无(runat=&quot;server&quot;)

JS部分<script> var allChildCount; //整个模块 allChildCount = 1; var sTxt = "<%=htmlselectName%>"; function addChildModel() { allChildCount++; var rown = filetb.rows.length; newRow = filetb.insertRow(rown); newRow.id = "mytdb" + a

android控件 下拉刷新pulltorefresh

外国人写的下拉刷新控件,我把他下载下来放在网盘,有时候访问不了github 支持各种控件下拉刷新 ListView.ViewPager.WevView.ExpandableListView.GridView.(Horizontal )ScrollView.Fragment上下左右拉动刷新,比下面johannilsson那个只支持ListView的强大的多.并且他实现的下拉刷新ListView在item不足一屏情况下也不会显示刷新提示,体验更好. 国内网盘地址:http://www.400gb.c

ASP.NET AJAX入门系列(4):使用UpdatePanel控件(一)

UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新.通过本文来学习一下UpdatePanel简单的使用方法(第一篇). 主要内容 1.UpdatePanel控件概述 2.UpdatePanel工作原理 3.ContentTemplate属性 4.ContentT

asp.net中updatepanel控件向外传值

.aspx代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdatePanel控件传值.aspx.cs" Inherits="UpdatePanel控件传值" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: