普通的ajax应用，结合javascript对html元素的动态操控，结合而成一个优美的效果。
还是用Ajax.net，设置与前篇文章一样，不再累述。代码如下：163photoTest.aspx.csusing 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
