ASP.NET多媒体电子报刊设计（三）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

最后就是展示报刊，通过保存的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 >
        <asp:HiddenField ID="txtTechPaperName" runat="server" />
        <asp:HiddenField ID="txtTechPaperDId" runat="server" />
        <div >
            <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 >
            
        </div>
        <div>
            <a href="Default.aspx">回到首页</a>
            <input  />
            <input  />
        </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();
        }
    }

若有疑问或不正之处，欢迎提出指正和讨论。