怎么样动态创建层，并在层中设置一个Image控件,并设置层和Image控件的一些属性？

Question

如题
我想根据数据库的内容来动态创建一些层，并在层中设置一些Image控件
怎么实现呢，最好能给一些实例代码！
谢谢

Answer 1

如果你要的是类似这种效果: 
点击链接后在链接下面显示图片, 那么可以利用asp.net ajax的PopupControlExtender做一下. 
这个例子是读取Northwind数据库的Employees表. 只读取了EmployeeID, LastName, Photo三个字段. 
LastName显示为链接,但点击后不会引起PostBack,在链接下面显示对应的图片. 先做一个根据传进的EmployeeID, 生成图片的ashx. 
注意这里有个78位的位移操作,这个是Northwind数据库的特例,其它显示数据库二进制的代码不用做这个. 
//ShowPic.ashx 
C# code
<%@ WebHandler Language="C#" Class="ShowPic" %>using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;public class ShowPic : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        int empID = System.Convert.ToInt32(context.Request.QueryString["EmployeeID"]);
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["NorthwindConnectionString1"].ConnectionString;
            SqlCommand cmd = conn.CreateCommand();
            cmd.CommandText = "select Photo from Employees where EmployeeID=@empID";
            cmd.Parameters.AddWithValue("@empID", empID);
            conn.Open();
            SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
            if (reader.HasRows)
            {
                if (reader.Read())
                {
                    context.Response.ContentType = "Image/bmp";
                    //下面这些代码在一般的读取二进制时没必要. 可以参考其他代码.
                    const int OleHeaderLength = 78;
                    int length = ((Byte[])reader["Photo"]).Length;
                    int strippedImageLength = length - OleHeaderLength;
                    byte[] strippedImageData = new byte[strippedImageLength];
                    Array.Copy((Byte[])reader["Photo"], OleHeaderLength,
                        strippedImageData, 0, strippedImageLength);                    context.Response.BinaryWrite(strippedImageData);                    context.Response.BinaryWrite((Byte[])reader["Photo"]);
                    
                }
            }
        }
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }}Default.aspx 
HTML code
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" 
        EmptyDataText="没有可显示的数据记录。">
        <Columns>
            <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" ReadOnly="True" 
                SortExpression="EmployeeID" />            
            <asp:TemplateField HeaderText="Last Name">
                <ItemTemplate>
                    <asp:LinkButton runat="server" ID="LinkButton1" Text='<%# Eval("LastName") %>' OnClientClick="return false;"  />
                    <cc1:PopupControlExtender ID="pce" runat="server"  TargetControlID="LinkButton1" PopupControlID="pnlPic" Position="Bottom">
                    </cc1:PopupControlExtender>
                    <asp:Panel runat="server" ID="pnlPic">
                           <img alt='<%# Eval("LastName") %>' src= 'ShowPic.ashx?EmployeeID=<%# Eval("EmployeeID") %>' />
                    </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>" 
        ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>" 
        SelectCommand="SELECT [EmployeeID], [LastName] FROM [Employees]">
    </asp:SqlDataSource>
关键是ItemTemplate内的东西.这个例子不能算太好. 但也可以试一下.

Answer 2

不是这种效果，是这样的，我想在一幅地图上显示一些站点图标，但是这些站点图标的个数和在地图上的左边位置是由数据库中的站点数据表确定的，所以我想在这幅地图加载的时候动态的创建层和Image控件用于显示这些站点图标

Answer 3

你用到了Sql Server 2008的地理数据坐标类型? GIS应用?呵呵,这方面我可不懂了.

Answer 4

也不是的，坐标是相对于地图的左上角的坐标而已，不是GIS

Answer 5

动态创建div，添加到页面
在DIV中通过innnerhtm动态添加inage控件
如
  var   d= document.createElement("DIV");   
  d.style.backgroundColor= "red";   
  d.width= 100;   
  d.height= 100;   
  d.innerText="";   
  document.body.appendChild(d);     mydiv.Controls.Add(new Image());

Answer 6

这样子的话应该是css定位问题了.记得父div指定为position:relative的才能成为子div的参照坐示.
然后子div里position:absolute, top:100px; left: 100px;这样子整?

Answer 7

还是参考wuyq11的吧. 她是技术疯子!

Answer 8

用panel控件,需要时间显示,不需要就隐藏

Answer 9

int width=18, height=18;
string wrt1 = "<div id='picview' class='picview' style='height: 599px'><div id='station2' style='height:"+height.ToString()+"px' position:relative><img src='一级站.bmp'/></div></div>";
        Page.Response.Write(wrt1);
这是我写的语句，结果又创建了一个'picview' 层，不是我想要的
我是想在原先业已存在的picview中创建一个station2层，而且station2层坐标位置是相对于picview层的，其位置可以动态控制
怎么实现呢？

Answer 10

通过js控制
divid.style.top=body.scrollTop+(body.offsetHeight-divid.offsetHeight)/2   
divid.style.left=body.scrollLeft+(body.offsetWidth-divid.offsetWidth)/2

Answer 11

divid.style.top=body.scrollTop+(body.offsetHeight-divid.offsetHeight)/2  
divid.style.left=body.scrollLeft+(body.offsetWidth-divid.offsetWidth)/2
这些代码应该在哪里写呢?
我想应该只能在Page_Load函数里面写吧

Answer 12

wuyq11（5楼）能不能说详细一点，
我感觉不太符合我的需求
我是要在一个图片中动态创建几个层，在动态创建的层中再动态的穿件Image控件
因为我还要对这幅地图进行放大、缩小及平移工作，这些动态创建的Image控件
也要进行相应的工作

Answer 13

绝对定位元素的默认的定位环境是body元素。定位环境就是当我们使用top, left, right, bottom属性移动元素时，我们会参照另外一个元素移动它，而这个作为参照的元素就称为定位环境。在绝对定位的情况下，绝对定位元素的定位环境是body——除非我们明确地改变它。通过将元素的任何一个祖先元素的position属性设置为relative，就可以使该祖先元素成为这个元素的定位环境。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        * { margin: 0; padding: 0; }
        #outer_div { position: relative; width: 250px; margin: 50px 40px; border-top: solid 3px Red; }
        #inner_div { position: absolute; top:10px; left: 20px; background: #AAA; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="outer_div">
        The outer div
        <div id="inner_div">
            This is some text...
        </div>
    </div>
    </form>
</body>
</html>
没别的，主要说明一个外层position:relative会成为新的定位环境。参考一下。

Answer 14

namhyuk真是很感谢你这么耐心的指导
我还有一个问题：
int width=18, height=18; 
string wrt1 = " <div id='station2' style='height:"+height.ToString()+"px' position:relative> <img src='一级站.bmp'/> </div>"; 
        Page.Response.Write(wrt1); 在这些代码中怎么设置picview层为我想动态创建的station2的祖先元素呢？谢谢

Answer 15

其实js我也不是太熟. 不过你这个问题好像可以参照wuyq11在5楼的回复吧, 我过一会儿也试试.

Answer 16

5楼的回复我不知道怎么用，我js和ASP.NET刚开始学，好多概念都不太懂，但是项目又需要

Answer 17

说点别的:ajax controltoolkit新增的SeaDragon挺好玩的啊. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Seadragon/Seadragon.aspx

Answer 18

namhyuk我把代码发给你，能不能帮我看看代码？
谢谢
你邮箱多少?
qq号码多少？

Answer 19

下面是我的用户实现图片放大、缩小以及平移的JavaScript代码，其中station1是一个用户放置站点图标的层，但是有下述问题：平移的时候，地图平移不动了，站点图标还在移动，还有就是站点图标移动出去以后还出现，此时应该隐藏的，不知道这个问题该怎么解决
<script type="text/jscript" language="javascript">
var rate = 0.2;
var pp = document.getElementById("viewArea");
var vv = document.getElementById("picview");var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var st,sl;
var tmpX,tmpY;function moveMouse(e) {
 if (isdrag) {
 var mouseX = nn6 ? e.clientX : event.clientX;
 var mouseY = nn6 ? e.clientY : event.clientY;
 vv.scrollTop = st+(y-mouseY);
 vv.scrollLeft = sl+(x-mouseX);
  staton1.style.top = tmpY-(y-mouseY);
  station1.style.left = tmpX-(x-mouseX);
 return false;
 }
}function initDrag(e) {
 var oDragHandle = nn6 ? e.target : event.srcElement;
 isdrag = true;
 x = nn6 ? e.clientX : event.clientX;
 y = nn6 ? e.clientY : event.clientY;
 st = vv.scrollTop;
 sl = vv.scrollLeft;
 tmpX = station1.style.pixelLeft;
 tmpY = station1.style.pixelTop;
 document.onmousemove = moveMouse;
 return false;
}
        
pp.onmousedown=initDrag;
pp.onmouseup=new Function("isdrag=false");function bigit(){
  pp.style.height = pp.height*(1+rate)+"px";
}function smallit(){
  pp.style.height = pp.height*(1-rate)+"px";
  pp.style.width = pp.width*(1-rate)+"px";
}function realsize(){
  var newImg = new Image();
  newImg.src = pp.src;
  pp.style.height = newImg.height+"px";
  pp.style.width = newImg.width+"px";
}function clickMove(s){
 if(s=="up"){
  vv.scrollTop = vv.scrollTop-100;
  
 }else if(s=="down"){
  vv.scrollTop = vv.scrollTop+100;
 }else if(s=="left"){
  vv.scrollLeft = vv.scrollLeft-100;
 }else if(s=="right"){
  vv.scrollLeft = vv.scrollLeft+100;
 }
}function changeImage(path){
  pp.src = path;
  pp.style.width = "600px";
  vv.scrollTop = 0;
  vv.scrollLeft = 0;
}</script>

Answer 20

还有一个问题，就是我那些动态创建的层，我在JavaScript中怎么知道啊，上面的station1不是我动态创建的，我动态创建了一个station2，但是我怎么能够获得这些动态创建层的名称和数目啊