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

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

普通的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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航