使用DATALIST控件 （比较乱，有时间再整理）
<table width="1000px" id="lazy">
<tr height="80px">
<td colspan="9">
金舟产品展示系统
</td>
</tr>
<tr height="80px">
<td colspan="9">
<asp:LinkButton ID="Cmd_Add" runat="server" Text="新 增" OnClick="cmdSaveUrl"></asp:LinkButton>
</td>
</tr>
<tr>
<asp:DataList ID="DataList1" runat="server" Width="1000">
<ItemTemplate>
<td colspan="3" rowspan="3">
<table>
<tr>
<td colspan="3" style="width: 300px; font-size: 13px;">
<a href='Product_Detail.aspx?id=<%# DataBinder.Eval(Container.DataItem, "ProductID")%>'>
<img src="<%# get_img(DataBinder.Eval(Container.DataItem,"PicUrl").ToString()) %>"
width="300" height="200" />
<a>
</td>
</tr>
<tr>
<td colspan="3" style="width: 300px; font-size: 13px;">
<asp:HyperLink ID="HyperLink1" runat="server" Text='<%# Eval("ProductName") %>' NavigateUrl='<%# Eval("ProductID","~//showbook.aspx?ProductID={0}")%>'></asp:HyperLink>
</td>
</tr>
<tr height="40px">
<td align="left">
<asp:HyperLink ID="HyperLink2" runat="server" Text='详 情' NavigateUrl='<%# EditUrl("ProductID",DataBinder.Eval(Container.DataItem,"ProductID").ToString()) %>'></asp:HyperLink>
</td>
<td style="font-size: 13px;">
<asp:HyperLink ID="HyperLink3" runat="server" Text='编 辑' NavigateUrl='<%# EditUrl("ProductID",DataBinder.Eval(Container.DataItem,"ProductID").ToString()) %>'></asp:HyperLink>
</td>
<td align="right" style="padding-right: 20px; font-size: 13px;">
<a href="javascript:void(0)">
<img src="/DesktopModules/YourCompany.Jz_Product/images/Intention.png" width="50" height="23" border="0" οnclick="alertDiv('<%# Eval("ProductName","{0}")%>','<%# Eval("ProductID","{0}")%>')"></a>
</td>
</tr>
</table>
</td>
</ItemTemplate>
</asp:DataList>
</tr>
</table>Jz_ProductController objJz_Products = new Jz_ProductController();
List<Jz_ProductInfo> AllProducts;
AllProducts = objJz_Products.Get_AllProduct();
// 绑定产品DataList
DataList1.DataSource = AllProducts;
DataList1.DataBind();#region 返回照片地址
public string get_img(string str)
{
string s = str.Trim();
if (s != "")//当存在图片的时候
{
string strImageUrl = "";
strImageUrl = Request.Url.AbsoluteUri;
strImageUrl = strImageUrl.Substring(0, strImageUrl.IndexOf("/", 7));
strImageUrl = strImageUrl + "/DesktopModules/YourCompany.Jz_Product/ProductPic/" + s;
return strImageUrl;
}
else //不存在图片的时候
{
return "";
}
}
#endregionDNN接收参数
if ((Request.QueryString["ProductID"] != null))
{
ProductID = Convert.ToInt32( Request.QueryString["ProductID"]);
}普通的JS控制弹出DIV居中
document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。
document.body.clientHeight（网页可见区域高）：是指浏览器显示网页的区域所能看到的高度，不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。
document.body.scrollTop（网页被卷去的高）：是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。
document.body.scrollLeft（网页被卷去的左）：是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。
现在我们来分析一下程序该如何实现：
第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。
1.计算出层距离显示区域左边和上边的位置
注意：divId指的是所要居中的层,divId.clientWidth为其宽度！＠
var divId = document.getElementById("xxx");
var v_left=(document.body.clientWidth-divId.clientWidth)/2;
var v_top=(document.body.clientHeight-divId.clientHeight)/2;
2.把得到的值重新赋给DIV的left和top属性
divId.style.left＝v_left;
divId.style.top=v_top;
说明：divId为DIV标签的id值
这样这个层就是居中显示的了。
第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。
其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK 了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;
( 当上面的取不到滚动条时可以用这个 sScrollTop = document.documentElement.scrollTop;)
2.把得到的值重新赋给DIV的left和top属性
divId.style.left＝v_left;
divId.style.top=v_top;
这样显示出来就是居中的了
DNN模块中的 JS控制弹出DIV居中
由于DNN模块可编辑部分只有模块那部分而不是整个网页，所以以下两个不起效果
var v_left=(document.body.clientWidth-divId.clientWidth)/2;
var v_top=(document.body.clientHeight-divId.clientHeight)/2;
myAlert.style.top = "0%";
myAlert.style.left = (1016 - myAlert.clientWidth) / 2 + "px";
以下是代码
<div id="alert">
<h4>
<span>您的意见</span><span id="close">关闭</span>
</h4>
<p>
<%--<asp:TextBox ID="Txb_ProductID" runat="server"></asp:TextBox>--%>
<input id="Txb_ProductID" runat="server" type="hidden" />
</p>
<p>
<label>产品名称</label>
<asp:TextBox ID="Txb_ProductName" runat="server"></asp:TextBox>
</p>
<p>
<label>姓名</label>
<asp:TextBox ID="Txb_Name" Width = "200px" Height="25px" runat = "server"></asp:TextBox>
</p>
<p>
<label>电话号码</label>
<asp:TextBox ID="Txb_Phone" Width = "200px" Height="25px" runat = "server"></asp:TextBox>
</p>
<p>
<label>公司</label>
<asp:TextBox ID="Txb_Company" Width = "200px" Height="25px" runat = "server"></asp:TextBox>
</p>
<p>
<label>意向</label>
<asp:TextBox ID="Txb_IntentionContent" runat="server" TextMode="MultiLine" class="ckeditor" ></asp:TextBox>
<script type="text/javascript">
if (CKEDITOR.instances['Txb_IntentionContent']) {
CKEDITOR.remove(CKEDITOR.instances['Txb_IntentionContent']);
}
CKEDITOR.replace('<%= Txb_IntentionContent.ClientID %>',
{
toolbar: 'Basic',
width: '400px',
height:'150px',
toolbarStartupExpanded: false
}
);
</script>
</p>
<p>
<asp:LinkButton ID = "CmdSave" Width="130px" runat="server" text="提交" OnClick ="cmdSave_Click"></asp:LinkButton>
<input type="reset" value="重置" class="sub" />
</p>
</div>
<script type="text/JavaScript">
var myAlert = document.getElementById("alert");
var mClose = document.getElementById("close");
function alertDiv() {
myAlert.style.display = "block";
myAlert.style.position = "absolute";
myAlert.style.top = "0%";
myAlert.style.left = (1016 - myAlert.clientWidth) / 2 + "px";
// alert(document.body.clientHeight);
// alert(myAlert.clientHeight);
// alert(myAlert.style.top);
// myAlert.style.marginTop = "-75px";
// myAlert.style.marginLeft = "-"+divId.clientWidth+"px";
// mybg = document.createElement("div");
// mybg.setAttribute("id", "mybg");
// mybg.style.background = "#000";
// mybg.style.width = "100%";
// mybg.style.height = "100%";
// mybg.style.position = "absolute";
// mybg.style.top = "0";
// mybg.style.left = "0";
// mybg.style.zIndex = "1000";
// mybg.style.opacity = "0.3";
// mybg.style.filter = "Alpha(opacity=30)";
// document.body.appendChild(mybg);
// document.body.style.overflow = "hidden";
//获取产品名称
document.getElementById('<% =Txb_ProductName.ClientID %>').value = arguments[0];
//获取ID值
document.getElementById('<% =Txb_ProductID.ClientID %>').value = arguments[1];
}
mClose.onclick = function () {
myAlert.style.display = "none";
mybg.style.display = "none";
}
</script>其中有个小细节困扰了我好久，就是JS传值给TEXTbox控件，C#里怎么取得到
<input id="Txb_ProductID" runat="server" type="hidden" /> //需要隐藏的只能这么写,不能用TextBox配合C#Txb_ProductID.Visible = false;这么写
<asp:TextBox ID="Txb_ProductName" runat="server"></asp:TextBox>//这是显示的不可编辑的控件配合C#Txb_ProductName.ReadOnly = true;
JS赋值的时候就是这样
document.getElementById('<% =Txb_ProductName.ClientID %>').value = arguments[0];
document.getElementById('<% =Txb_ProductID.ClientID %>').value = arguments[1];