作者在 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;
}
}
}
效果图:
效果和用途:根据选择动态改变页面的现实内容
属性:
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;
}
}
}
效果图:



————————————————————