ajax控件之DynamicPopulateExtender

作者在 2008-05-03 18:25:55 发布以下内容
控件名:DynamicPopulateExtender
效果和用途:根据选择动态改变页面的现实内容
属性:
TargetControlID 控制改变的控件id
ServiceMethod  webserver方法;
做法:
1.托两个html的radio和一个web控件panel
2.托一个DynamicPopulateExtender控件,并设置它的属性
3.编写js代码用来用来在radio控件的onclick事件中调用。
    <script type="text/javascript">
        function updateContent(value)     //带参数的方法这是个
            {
            var item = $find('dpe');            //寻找DynamicPopulateExtender控件
            if(item)
            {
            item.populate(value);           如果存在执行DynamicPopulateExtender的populate方法
            }
            }
            Sys.Application.add_load(function(){updateContent("m");});   //这个js是不执行的,这里让它执行,并带上默认值m
                   
        </script>
4.编写css代码
.panelNormal
{
border-;
border-color:#fff;
background:#ff9900;
font-size:14px;
;
height:250px;
font-family:Tahoma;
vertical-align:middle;
text-align:center;
}
.panelUpdating
{
border-;
border-color:#000;
background:#cccccc;
font-size:14px;
;
height:250px;
}
5.编写webserver的方法
   [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static string getHtml(string contextKey)
    {
        System.Threading.Thread.Sleep(1000);
        if (contextKey == "m")
        {
            string a = @"<img src=";
            a += @"img/meinv.gif";
            a += @"/>";

            return a;
        }
        else
        {
            string a = @"<img src=";
            a += @"img/nan.jpg";
            a += @"/>";

            return a;
        }
    }
eg:
aspx页面:
<form id="form1" runat="server">
    <div style="text-align: center">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
       
        <script type="text/javascript">
        function updateContent(value)
            {
            var item = $find('dpe');
            if(item)
            {
            item.populate(value);
            }
            }
            Sys.Application.add_load(function(){updateContent("m");});
                   
        </script>
       
        <input id="m" checked="checked" name="sex" type="radio" value="m" onclick="updateContent(this.value)" /> 
        美女                     
        <input id="s" name="sex" type="radio" value="s" onclick="updateContent(this.value)" />
        帅哥<br />
         <asp:Panel ID="Panel1" runat="server" Height="345px" "277px" CssClass="panelNormal">
            </asp:Panel>
        <cc1:DynamicPopulateExtender ID="dpe" runat="server" TargetControlID="Panel1" UpdatingCssClass="panelUpdating" ServiceMethod="getHtml">
        </cc1:DynamicPopulateExtender>
      
    </div>
    </form>
cs页面:
public partial class Default10 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static string getHtml(string contextKey)
    {
        System.Threading.Thread.Sleep(1000);
        if (contextKey == "m")
        {
            string a = @"<img src=";
            a += @"img/meinv.gif";
            a += @"/>";

            return a;
        }
        else
        {
            string a = @"<img src=";
            a += @"img/nan.jpg";
            a += @"/>";

            return a;
        }
    }
}

效果图:

 
 
————————————————————
技术日志 | 阅读 1925 次
文章评论,共0条
游客请输入验证码