DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax實現DataGrid/DataList動態ToolTip
Ajax實現DataGrid/DataList動態ToolTip
編輯:AJAX詳解     
 

1.建立一ASPx頁面,Html代碼2.cs代碼


using System.Data.SqlClIEnt;
using System.IO;
protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindData();
           
        }
        if (ID != "")
        {
            GetDescriptionByID(ID);
        }
       
    }

    property#region property
    private string ID
    {
        get
        {
            if (Request["ID"] != null && Request["ID"].ToString() != "")
            {
                return Request["ID"];
            }
            else
            {
                return "";
            }
        }
    }
    #endregion

    GetDescriptionByID#region GetDescriptionByID
    private void GetDescriptionByID(string ID)
    {
        string connStr = ConfigurationSettings.APPSettings["ConnectionString"];
        SqlConnection conn = new SqlConnection(connStr);
        string sql = "select * from testimage where userid='" + ID + "'";
        SqlCommand cmd = new SqlCommand(sql, conn);
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();

        string s = @"<table cellspacing='0' cellpadding='4' width='300' height='200' border='0' id='GridVIEw1' style='color:#333333;border-collapse:collapse;'>";
        if(dr.Read())
        {
            s += "<tr style='color:#333333;background-color:#FFFBD6;'>";
            s += "<td width='50'>名稱:</td>";
            s += "<td>" + dr["UserName"] + "</td>";
            s += "</tr>";
            s += "<tr style='color:#333333;background-color:White;'>";
            s += "<td scope='col'>描述:</td>";
            s += "<td>" + dr["Description"] + "</td>";
            s += "</tr>";
        }
        s += "</table>";
        dr.Close();
        conn.Close();
        this.Response.Write(s);
        this.Response.End();
    }
    #endregion

    save image#region save image
    protected void Button2_Click(object sender, EventArgs e)
    {
        Stream ImageStream;
        string Path = FileUpload1.PostedFile.FileName;// 文件名稱
        int Size = FileUpload1.PostedFile.ContentLength; // 文件大小
        string Type = FileUpload1.PostedFile.ContentType; // 文件類型
        ImageStream = FileUpload1.PostedFile.InputStream;
        byte[] Content = new byte[Size];
        int Status = ImageStream.Read(Content, 0, Size);

        SqlConnection conn = new SqlConnection(ConfigurationSettings.APPSettings["ConnectionString"]);
        SqlCommand comm = new SqlCommand("insert into testimage (UserName,Image,Path,Type,Description) values(@UserName,@Image,@Path,@Type,@Description)", conn);

        comm.CommandType = CommandType.Text;
        comm.Parameters.Add("@UserName", SqlDbType.VarChar, 255).Value = txtUserName.Text;
        comm.Parameters.Add("@Image", SqlDbType.Image).Value = Content;
        comm.Parameters.Add("@Path", SqlDbType.VarChar, 255).Value = Path;
        comm.Parameters.Add("@Type", SqlDbType.VarChar, 255).Value = Type;
        comm.Parameters.Add("@Description", SqlDbType.VarChar, 2000).Value = this.TextBox1.Text;

        conn.Open();
        comm.ExecuteNonQuery();
        conn.Close();
    }
    #endregion

    BindData#region BindData
    private void BindData()
    {
        string sql = "select * from testimage";
        DataSet ds = GetDataSet(sql);
        this.DataList1.DataSource = ds;
        this.DataList1.DataBind();
    }
    #endregion

    GetDataSet#region GetDataSet
    private DataSet GetDataSet(string sql)
    {
        string constring = System.Configuration.ConfigurationSettings.APPSettings["ConnectionString"];
        SqlDataAdapter sda = new SqlDataAdapter(sql, constring);
        DataSet ds = new DataSet();
        sda.Fill(ds);
        return ds;
    }
    #endregion3.數據庫腳本
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[TestImage]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[TestImage]
GO

CREATE TABLE [dbo].[TestImage] (
    [UserID] [int] IDENTITY (1, 1) NOT NULL ,
    [UserName] [nvarchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
    [Image] [image] NULL ,
    [Path] [nvarchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
    [Type] [nvarchar] (20) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
    [Description] [nvarchar] (2000) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

<Html>
 <head>
  <title>WebForm1</title>
  <style type="text/CSS">.logo {}{ POSITION: absolute }.dek {}{ Z-INDEX: 200; VISIBILITY: hidden; POSITION: absolute }</style>
 </head>
 <body>
 <Form runat="server">
  <DIV class="dek" id="dek"></DIV>
    <script language="Javascript"> 
        Xoffset=-20;
        Yoffset=  20;      
        var  nav,yyy=-1000;
        var  skn=dek.style;
        document.onmousemove=get_mouse;
       
        //AJax
        var XMLHttp;       
        function createXMLHttpRequest()
        {
            if (window.ActiveXObject)
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
           
        function startRequest(id)
        {
            createXMLHttpRequest();
            XMLHttp.onreadystatechange = handleStateChange;
            XMLHttp.open("GET", "?ID="+id, true);
            XMLHttp.send(null);
        }
        var content;   
        function handleStateChange()
        {
            if(XMLHttp.readyState == 4)
            {
                if(XMLHttp.status == 200)
                {
                    content=XMLHttp.responseText;
                }
            }
        }
        //tooltip
        function  popup(id)
        {
            startRequest(id);
            yyy=Yoffset;
            document.all("dek").innerHtml=content;
            skn.visibility="visible"
        }

        function  get_mouse(e)
        {
            var  x=event.x+document.body.scrollLeft;
            skn.left=x+Xoffset;
            var  y=event.y+document.body.scrollTop;
            skn.top=y+yyy;
        }

        function  kill()
        {
            yyy=-1000;
            skn.visibility="hidden";
        }
</script> 
  <div>
    <asp:FileUpload ID="FileUpload1" runat="server" /><br>名稱:<ASP:TextBox ID="txtUserName"
            runat="server"></ASP:TextBox><br>
      描述:<asp:TextBox ID="TextBox1" runat="server"></ASP:TextBox><br>
        <ASP:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="保存" />
    <ASP:DataList id="DataList1"
           BorderColor="black"
           CellPadding="1"
           CellSpacing="4" HorizontalAlign="Center"
           RepeatColumns="4"
           RepeatLayout="Table"
           runat="server" ShowFooter="true" ShowHeader="true"
           width="100%">
         <ItemTemplate>
            <%# DataBinder.Eval(Container.DataItem, "UserName")%><br>
            <img ID="img1" onmouseover="popup(<%# DataBinder.Eval(Container.DataItem, "UserID")%>);" onmouSEOut="kill();" src='<%# DataBinder.Eval(Container.DataItem, "Path") %>' height='150'/>
         </ItemTemplate>
      </ASP:DataList>   
    </div>
    </Form>
 </body>
</Html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved