Ajax应用实例－显示影片描述信息

最新推荐文章于 2024-07-10 10:02:20 发布

ackwie8024934

最新推荐文章于 2024-07-10 10:02:20 发布

阅读量79

点赞数

文章标签： c# 数据库 xhtml

原文链接：http://www.cnblogs.com/yuji/archive/2009/04/10/1432881.html

版权

鼠标悬停在片名上时显示其详细信息
在效果如下图所示:

表DVD:

CREATE TABLE [DVD] (
[ID] [int] IDENTITY (1, 1) NOT NULL ,
[Name] [char] (10) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[Description] [nvarchar] (100) COLLATE Chinese_PRC_CI_AS NOT NULL ,
CONSTRAINT [PK_DVD] PRIMARY KEY CLUSTERED
(
  [ID]
) ON [PRIMARY]
)
GO

DVD_request.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DVD_request.aspx.cs" Inherits="Ajax_DVD_request" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script>
document.write("<div id='divDesc' style='background-color:red;left:-100;top:-100;POSITION:absolute;width:100;height:100;Z-INDEX:99'></div>");
var xmlHttp;
    function displayInfo(source,id)
    {
        getDVDInfo(id);
        moveDiv(source);
    }

function moveDiv(source)
{
  var   x,y;
        var oRect = source.getBoundingClientRect();
        x=oRect.left;
        y=oRect.top;
        var divD = document.getElementById('divDesc');
        divD.style.posLeft = x+source.clientWidth;
        divD.style.posTop = y+source.clientHeight;
}

function getDVDInfo(id)
{
  if (window.ActiveXObject)
  {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest)
  {
   xmlHttp = new XMLHttpRequest();
  }
  xmlHttp.onreadystatechange = handleStateChange;
  xmlHttp.open("GET","DVD_response.aspx?id="+id+"&timeStamp="+new Date().getTime(),true);
  xmlHttp.send(null);
}

function handleStateChange()
{
  if (xmlHttp.readyState==4 && xmlHttp.status==200)
  {
   var divD = document.getElementById('divDesc');
   divD.innerHTML = xmlHttp.responseText;
  }
}
</script>
</head>
<body>
    <form id="form1" runat="server">

        <asp:DataList ID="DataList1" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
            <HeaderTemplate>
                <table style="word-break:break-all;table-layout:fixed;">
                    <tr>
                        <td width="100" align="center">片名</td>
                        <td width="100" align="center">片名</td>
                        <td width="100" align="center">片名</td>
                    </tr>
                </table>
            </HeaderTemplate>
            <ItemTemplate>
                <table style="word-break:break-all;table-layout:fixed;" cellspacing="1">
                    <tr>
                        <td width="100" onMouseOver="displayInfo(this,'<%#DataBinder.Eval(Container.DataItem,"id")%>');" bgcolor="#0066FF"><asp:Label runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"name")%>'></asp:Label></td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>
    </form>
</body>
</html>

DVD_response.aspx:

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<body>
<script language="C#" runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            string id = Request.QueryString["id"].ToString();
            SqlConnection con = new SqlConnection("server=.;uid=sa;pwd=;database=test");
            con.Open();
            SqlCommand cmd = new SqlCommand("select description from DVD where id=" + id, con);
            string desc = cmd.ExecuteScalar().ToString();
            con.Close();
            Response.Write(desc);
        }
    }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/yuji/archive/2009/04/10/1432881.html

ackwie8024934

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax应用实例－显示影片描述信息

鼠标悬停在片名上时显示其详细信息在效果如下图所示:表DVD:CREATE TABLE [DVD] ([ID] [int] IDENTITY (1, 1) NOT NULL ,[Name] [char] (10) COLLATE Chinese_PRC_CI_AS NOT NULL ,[Description] [nvarchar] (100) COLLATE Chinese_PRC...
复制链接

扫一扫