DataList内部控件间如何相互传递值?

还是上一个问题,重发一下:我在数据库表同一行(即同一IP值)放置了三个图片的地址,估且称之为Img1,Img2,Img3吧,我通过Request["id"]传递过来的参数绑定了数据列表控件DataList1,在DataList1内也显示了三张图片。但我想做一个链接，点击该图片后，在旁边的另一个数据列表控件DataList2中显示出DataList1选中的图片，请问该如何做？我知道应该是设置参数，但就是不知道该如何设置？希望大家赐教！！其实就是客户要求要仿这个网站的做的效果,只是他是做男装的
http://www.vancl.com/Product_0000873/YouYaShuangCengLingShouYaoChangXiuChenShan%ef%bc%88NvKuan%ef%bc%89+BaiSe.html最左边那三个小图我打算就用DataList1绑定(同一个IP的三个图片地址字段),右边那个大图就是另一个DataList绑定左边DataList1选定的图.究竟应该怎么做?或者右边不用DataList控件也行,只要能达到效果就行了.

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

那个图都是一样的嘛  你直接用JS控制不就好了？
<html>
<head>
<style>
BODY {
FONT-SIZE: 14px; font-family: "Arial", Gadget, sans-serif;
}
body, form, h1 {
margin: 0; padding: 0;
}
A {
COLOR: #333; TEXT-DECORATION: none
}
A:hover {
COLOR: #f60; TEXT-DECORATION: underline
}.Hr_1 {
margin-left: 193px;
z-index: 100;
position: absolute;
}
.Hr_1 IMG {
border: #000 2px solid;
width: 455px;
height: 250px;
}
.Hr_11 {
top: 0; left: 0; BORDER-TOP: #000 1px solid; WIDTH: 205px; height: 50px; line-height: 50px; z-index: 300; position:absolute
}
.Hr_11 img {
margin: 3px 10px 0 0;
width: 40px;
height: 40px;
vertical-align: middle;
float: left;
}
.Hr_11 .nor {
margin-bottom: 1px; PADDING-LEFT: 5px; BACKGROUND: url(bg_s_pic.gif); height: 50px; FLOAT: left; WIDTH: 190px; TEXT-DECORATION: none
}
.Hr_11 .nor img {
border: 2px solid #000;
}
.Hr_11 .act {
margin-bottom: 1px; PADDING-LEFT: 5px; BACKGROUND: url(bg_s_pic.gif) 0 50px; height: 50px; FLOAT: left; WIDTH: 200px; font-weight: bold; TEXT-DECORATION: none
}
.Hr_11 .act img {
border: 2px solid #fff;
}
.Hr_1 {
position: relative;
}
.Hr_2 {
top: 205px;
left: 0;
padding: 0 12px;
width: 435px;
height: 50px;
line-height: 50px;
background: url(bg_info.png) !important; background: none;
filter: none !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/bg_info.png',sizingMethod='scale');
z-index: 200px;
position: absolute;
}
.Hr_2 a { color: #fff; }</style>
</head><script type="text/javascript">var n=0;
var showNum = document.getElementById("num");
function Mea(value){
n=value;
setBg(value);
plays(value);
}
function setBg(value){
for(var i=0;i<5;i++){
   if(value==i){
     document.getElementById("a"+value).className='act';
} else{
document.getElementById("a"+i).className='nor';
}
}
}
function plays(value){
for(i=0;i<5;i++){
  if(i==value){
   document.getElementById("pc_"+value).style.display="block";
document.getElementById("if_"+value).style.display="block";
   //alert(document.getElementById("pc_"+value).style.display)
  }else{
    document.getElementById("pc_"+i).style.display="none";
document.getElementById("if_"+i).style.display="none";
  }
}
}
function clearAuto(){clearInterval(autoStart)}
function setAuto(){autoStart=setInterval("auto(n)", 3000)}
function auto(){
n++;
if(n>4)n=0;
Mea(n);
}
function sub(){
n--;
if(n<0)n=4;
Mea(n);
}
setAuto();
</script>
<body>
<div>
        <div class="Hr_11">
            <a class="act" id="a0" onmouseover="clearAuto()"; onclick="Mea(0)"; onmouseout="setAuto()"  target="_self"><img alt="" src="<%=image1 %>" /></a>
            <a class="nor" id="a1" onmouseover="clearAuto()"; onclick="Mea(1)"; onmouseout="setAuto()"  target="_self"><img alt="" src="<%=image2 %>" /></a>
            <a class="nor" id="a2" onmouseover="clearAuto()"; onclick="Mea(2)"; onmouseout="setAuto()"  target="_self"><img alt="" src="<%=image3 %>" /></a>
            <a class="nor" id="a3" onmouseover="clearAuto()"; onclick="Mea(3)"; onmouseout="setAuto()"  target="_self"><img alt="" src="<%=image4 %>" /></a>
            <a class="nor" id="a4" onmouseover="clearAuto()"; onclick="Mea(4)"; onmouseout="setAuto()"  target="_self"><img alt="" src="<%=image5 %>" /></a>        </div>

        <div class="Hr_1"  >
            <a href="<%=url1 %>" target="_blank"><img alt="" id="pc_0" style="DISPLAY: block" src="<%=image1 %>" /></a>
            <a href="<%=url2 %>" target="_blank"><img alt="" id="pc_1" style="DISPLAY: none" src="<%=image2 %>" /></a>
            <a href="<%=url3 %>" target="_blank"><img alt="" id="pc_2" style="DISPLAY: none" src="<%=image3 %>" /></a>
            <a href="<%=url4 %>" target="_blank"><img alt="" id="pc_3" style="DISPLAY: none" src="<%=image4 %>" /></a>
            <a href="<%=url5 %>" target="_blank"><img alt="" id="pc_4" style="DISPLAY: none" src="<%=image5 %>" /></a>

            <div class="Hr_2">
                <a href="<%=url1 %>" target="_blank"><span id="if_0" style="DISPLAY: block"></span></a>                <a href="<%=url2 %>" target="_blank"><span id="if_1" style="DISPLAY: none">123</span></a>
                <a href="<%=url3 %>" target="_blank"><span id="if_2" style="DISPLAY: none">222</span></a>
                <a href="<%=url4 %>" target="_blank"><span id="if_3" style="DISPLAY: none">44</span></a>
                <a href="<%=url5 %>" target="_blank"><span id="if_4" style="DISPLAY: none">44</span></a>
            </div>
    </div>
    </div>
</body>
</html>
很多人总是感觉不用服务器控件心里不踏实。
其实用服务器控件在各方面来说，除了提高开发速度之外没有什么优点，对于初学者用得不好导致性能大大降低。
最常见的做法就是JS+CSS+DIV，偶尔需要跟服务器交互的话就使用AJAX就行了。
datalist1控件的模板列<a href='本页面.aspx?id=<%#Eval("id")%>'></a>在page_load里 int id=convert.Toint32(request["id"].ToString());
根据传递过来的图片的id值来绑定datalist2datalist2摸板里放一个img
src="<%#Eval("imgUrl")%>"
datalist1控件的模板列
C# code
<a href='本页面.aspx?id=<%#Eval("id")%>'></a>
在page_load里
C# code
int id=convert.Toint32(request["id"].ToString());
根据传递过来的图片的id值来绑定datalist2
datalist2摸板里放一个img
src=" <%#Eval("imgUrl")%>" 问题是我在数据表同一IP里面有三个字段放置不同的图片地址,例如是"imgUrl" 、"imgUrl2"、"imgUrl3"吧，如果我src=" <%#Eval("imgUrl")%>" 这样写的话，不就是无论点击哪个字段的图片地址，都是显示第一个图片了吗？这不符合我的需要呀
Img1,Img2,Img3各自绑定一个ID值作为传递查询大图片地址的依据，查询后绑定第二个显示控件
http://blog.csdn.net/xianfajushi/archive/2008/11/30/3413317.aspx