当前位置：首页 > 设计在线 > 网页设计 > Javascript > Ajax实现网易相册样式的修改

Ajax实现网易相册样式的修改

点击次数：27 次 发布日期：2008-11-26 23:17:50 作者：源代码网
源代码网推荐  普通的Ajax应用，结合javascript对html元素的动态操控，结合而成一个优美的效果。
  
  还是用Ajax.net，设置与前篇文章一样，不再累述。
  代码如下：
  163photoTest.aspx.cs
  using System;
  using System.Data;
  using System.Configuration;
  using System.Collections;
  using System.Web;
  using System.Web.Security;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.Web.UI.WebControls.WebParts;
  using System.Web.UI.HtmlControls;
  using System.Data.SqlClient;
  
  public partial class _163photoTest : System.Web.UI.Page
  {
   protected void Page_Load(object sender, EventArgs e)
   {
   description.Text = GetDescription();
   AjaxPro.Utility.RegisterTypeForAjax(typeof(_163photoTest));
   }
  
   //取数据库里的描述
   protected string GetDescription()
   {
   try
   {
   string strComm = "select photo_description from tab_photo where photo_id=1";
   SqlConnection myConn = new SqlConnection("user id=sa;password=123;Database =test;data source=z;");
   myConn.Open();
   SqlCommand myComm = new SqlCommand(strComm, myConn);
   SqlDataReader myReader = myComm.ExecuteReader();
   myReader.Read();
   return myReader.GetString(0);
   }
   catch
   {
   return "";
   }
   }
  
   [AjaxPro.AjaxMethod]
   //将description保存进数据库 www.knowsky.com
   public bool UpdateDesc(string description)
   {
   try
   {
   string strComm = "update tab_photo set photo_description="" + description + "" where photo_id=1";
   SqlConnection myConn = new SqlConnection("user id=sa;password=123;Database =test;data source=z;");
   myConn.Open();
   SqlCommand myComm = new SqlCommand(strComm, myConn);
   myComm.ExecuteNonQuery();
   return true;
   }
   catch
   {
   return false;
   }
   }
  }
  
  163photoTest.aspx
  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="163photoTest.aspx.cs" Inherits="_163photoTest" %>
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml" >
  <head runat="server">
   <title>无标题页</title>
  <script language="javascript" type="text/javascript">
   function display()
   {
   document.getElementById("descfield").style.display="block";
   document.getElementById("descfield").value = document.getElementById("description").innerText ;
   document.getElementById("description").style.display="none";
   document.getElementById("save").style.display="block";
   }
   var s;
   function UpdateDesc()
   {
   s= document.getElementById("descfield").value;
   document.getElementById("descfield").value="正在保存";
   _163photoTest.UpdateDesc(s,UpdateDesc_callback);
   }
  
   function UpdateDesc_callback(res)
   {
   if (res)
   {
   document.getElementById("description").style.display="block";
   document.getElementById("description").innerText =s;
   document.getElementById("descfield").style.display="none";
   document.getElementById("save").style.display="none";
   }
   }
  </script>
  </head>
  <body onload="document.getElementById("descfield").style.display="none";document.getElementById("save").style.display="none";">
   <form id="form1" runat="server">
   <div id="div1" onmousemove="this.style.backgroundColor="#C0C0FF";" onmouseout="this.style.backgroundColor="";" onclick="display()">
   <asp:Label ID="description" runat="server" Text="Label"></asp:Label>
  
   </div>
   <input type="text" id ="descfield" />
   <input type="button" id="update" value="修改描述" onclick="display()"/>
   <input type="button" id="save" value="保存修改" onclick="UpdateDesc()"/>
   <br />
   </form>
  </body>
  </html>
  
  出处：Coder at the Doorsill——风中聆听 BLOG

源代码网供稿.
网友评论 (0)
我也要写评论
会员中心
设计在线
本站推荐
设计在线之精华