Ajax实现网易相册样式的修改
普通的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;
}
}
}[www.iocblog.net 来源]
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';[www.iocblog.net 来源]
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
Tag: 样式
文章整理：iocblog
版权申明：本站文章均来自网络，如有侵权，请联系我们，我们收到后立即删除，谢谢！
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有。