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();

        }

    }

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

你可能感兴趣的:(asp.net)