ASP.NET 多媒体电子报刊设计（三）
最后就是展示报刊，通过保存的VML的Point来勾画矩形，通过保存的X轴和Y轴的最小值以及最大值来生成JS。
HTML代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head runat="server">
<title>显示报刊</title>
<style>
v\:* { BEHAVIOR: url(#default#VML) }
</style>
<script type="text/javascript" language="javascript">
function ShowTechPaperDetails(val)
{
var varTechPaperName = document.getElementById("txtTechPaperName").value;
var varTechPaperDName = val;
var varTechPaperDId = document.getElementById(val).title;
document.getElementById("txtTechPaperDId").value = varTechPaperDId;
var varImageUrl = "TechheroPaper/"+varTechPaperName+"/"+varTechPaperDName;
document.getElementById("divRight").innerHTML = FlexPaperExample.WebDemo.ShowPaper.GetTechPaperRects(varTechPaperDId).value;
document.getElementById("imgShow").src = varImageUrl;
//document.getElementById("imgShow").onmousemove = ShowPolyLine;
//document.getElementById("divRight").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+varImageUrl+"',sizingMethod= 'scale')";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="txtTechPaperName" runat="server" />
<asp:HiddenField ID="txtTechPaperDId" runat="server" />
<div id="divLeft" style="float: left; width: 200px;">
<asp:Repeater ID="rptTechPapers" runat="server">
<ItemTemplate>
<div>
<asp:LinkButton ID="lbtnTechPaperName" ToolTip='<%# Eval("TechPaperId") %>' OnClick="lbtnTechPaperName_Click"
runat="server" Text='<%# Eval("TechPaperName") %>'>
</asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
<br />
<br />
<asp:Repeater ID="rptTechPaperDetails" runat="server">
<ItemTemplate>
<div>
<a onclick="ShowTechPaperDetails(this.id);" href="#" id='<%# Eval("TechPaperDName") %>'
title='<%# Eval("TechPaperDId") %>'>
<%# Eval("TechPaperDName")%>
</a>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div id="divRight" style="float: left; width: 400px; height: 550px; border: 1px solid black;">
</div>
<div>
<a href="Default.aspx">回到首页</a>
<input id="txtX" type="text" />
<input id="txtY" type="text" />
</div>
</form>
</body>
</html>
C#代码：
public partial class ShowPaper : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(ShowPaper));
if (!IsPostBack)
{
DataTable dt = SqlHelper.ExcuteDataTable("SELECT * FROM tb_TechPapers");
rptTechPapers.DataSource = dt;
rptTechPapers.DataBind();
}
}
protected void lbtnTechPaperName_Click(object sender, EventArgs e)
{
LinkButton lbtn = (LinkButton)sender;
txtTechPaperName.Value = lbtn.Text;
DataTable dt = SqlHelper.ExcuteDataTable("SELECT * FROM tb_TechPaperDetails WHERE TechPaperId = " + lbtn.ToolTip);
rptTechPaperDetails.DataSource = dt;
rptTechPaperDetails.DataBind();
}
[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]
public string GetTechPaperRects(string strTechPaperDId)
{
StringBuilder strHtml = new StringBuilder();
StringBuilder strShowJs = new StringBuilder();
StringBuilder strHideJs = new StringBuilder();
string strSql = "";
strSql = "SELECT * FROM tb_TechPaperRects WHERE TechPaperDId = " + strTechPaperDId;
DataTable dt = SqlHelper.ExcuteDataTable(strSql);
//strJs.Append("<script>");
//strJs.Append("function ShowPolyLine(){");
strShowJs.Append("var varX = event.offsetX;");
strShowJs.Append("var varY = event.offsetY;");
foreach (DataRow row in dt.Rows)
{
strHtml.Append("<v:PolyLine StrokeColor='red' StrokeWeight='2' id='");
strHtml.Append("polyLine");
strHtml.Append(row["TechPaperRId"].ToString());
strHtml.Append("' filled='false' Points='");
strHtml.Append(row["TechPaperRPoint"].ToString());
strHtml.Append("' style='position:absolute;display:none;' Title='");
strHtml.Append(row["TechPaperRName"].ToString());
strHtml.Append("'></v:PolyLine>");
strShowJs.Append("if (varX > " + row["TechPaperRMinX"].ToString()
+ " && varX < " + row["TechPaperRMaxX"].ToString()
+ " && varY > " + row["TechPaperRMinY"].ToString()
+ " && varY < " + row["TechPaperRMaxY"].ToString() + ")");
strShowJs.Append("{");
strShowJs.Append(" document.getElementById('polyLine" + row["TechPaperRId"].ToString() + "').style.display = 'block';");
strShowJs.Append("}");
strShowJs.Append("else");
strShowJs.Append("{");
strShowJs.Append(" document.getElementById('polyLine" + row["TechPaperRId"].ToString() + "').style.display = 'none';");
strShowJs.Append("}");
strHideJs.Append("document.getElementById('polyLine" + row["TechPaperRId"].ToString() + "').style.display = 'none';");
}
//strJs.Append("}");
//strJs.Append("</script>");
strHtml.Append("<img width='400px' height='550px' onmousemove=\"" + strShowJs.ToString() + "\" onmouseout=\""+strHideJs.ToString()+"\" id='imgShow' />");
return strHtml.ToString();
}
}
若有疑问或不正之处，欢迎提出指正和讨论。
