您的位置：首页 > 编程语言 > ASP

仿google拖拽, aspx实现

2008-05-21 09:02 260 查看

asp.net+javascript+css(模仿google的拖拽的个性网页布局)(操作数据库篇2)

该效果在firefox和IE中测试通过.拖动然后就布局自动保存到数据库里了.

SaveSide .aspx.cs

public class SaveSide : System.Web.UI.Page
{
ahui4367.SideSql tempSideSql=new SideSql();
private void Page_Load(object sender, System.EventArgs e)
{
if(Request.QueryString["action"]=="changeSide")
{
string strLeft=Request.QueryString["strleft"];
string strCenter=Request.QueryString["strCenter"];
string strRight=Request.QueryString["strRight"];
tempSideSql.SaveSide(strLeft,strCenter,strRight,1);
}
}

#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion
}

我把昨天的发表的代码又修改了.具体的看下面的/还使用了prototype1.4的框架了,

<%@ Page language="c#" Codebehind="WebForm6.aspx.cs" AutoEventWireup="false" Inherits="demoClass.WebForm6" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>WebForm6</title>

<style>

.modbox .el ...{ }

.modbox .csl ...{ DISPLAY: none }

.modbox .es ...{ DISPLAY: none }

.modbox_e .el ...{ DISPLAY: none }

.modbox_e .csl ...{ }

.modbox .es ...{ }

.fres ...{ OVERFLOW: hidden; ; WIDTH: expression(_gel("ffresults").offsetWidth+"px") }

.panelo ...{ }

.panelc ...{ }

.mod ...{ }

.unmod ...{ }

FORM ...{ DISPLAY: inline }

.c ...{ CLEAR: both }

BODY ...{ FONT-FAMILY: arial,sans-serif }

TD ...{ FONT-FAMILY: arial,sans-serif }

A ...{ FONT-FAMILY: arial,sans-serif }

P ...{ FONT-FAMILY: arial,sans-serif }

.h ...{ FONT-FAMILY: arial,sans-serif }

A:link ...{ COLOR: #0000cc }

A:visited ...{ COLOR: #551a8b }

A:active ...{ COLOR: #ff0000 }

.mttl ...{ PADDING-RIGHT: 5px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 122%; WIDTH: 90%; BACKGROUND-COLOR: #e5ecf9 }

H2.modtitle ...{ FONT-WEIGHT: normal; FONT-SIZE: 100%; PADDING-BOTTOM: 0px; MARGIN: 0em; WIDTH: 100%; PADDING-TOP: 0px }

.modbox ...{ MARGIN-BOTTOM: 20px; BACKGROUND-COLOR: white }

.modbox_e ...{ MARGIN-BOTTOM: 20px; BACKGROUND-COLOR: white }

#c_1 ...{ VERTICAL-ALIGN: top; WIDTH: 32% }

#c_2 ...{ VERTICAL-ALIGN: top; WIDTH: 32% }

#c_3 ...{ VERTICAL-ALIGN: top; WIDTH: 32% }

.mhdr ...{ PADDING-RIGHT: 0px; BORDER-TOP: #3366cc 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 82%; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px }

.medit ...{ PADDING-RIGHT: 2px; VERTICAL-ALIGN: top; WIDTH: 10%; WHITE-SPACE: nowrap; BACKGROUND-COLOR: #e5ecf9; TEXT-ALIGN: right }

.medit ...{ COLOR: #77c }

.medit A:visited ...{ COLOR: #77c }

.medit A:link ...{ COLOR: #77c }

.medit A:active ...{ COLOR: #77c }

.mc ...{ FONT-SIZE: 82%; PADDING-BOTTOM: 4px; WIDTH: 100%; PADDING-TOP: 4px }

</style>

</HEAD>

<tr>

<tr>

<asp:Literal id="sideLeft" runat="server"></asp:Literal>

</td>

<asp:Literal id="sideCenter" runat="server"></asp:Literal>

</td>

<asp:Literal id="sideRight" runat="server"></asp:Literal>

</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

</TD></TR></TABLE>

</form>

function addEvent(obj, evenTypeName, fn)...{

if (obj.addEventListener)...{

obj.addEventListener(evenTypeName, fn, true);

return true;

} else if (obj.attachEvent)...{

return obj.attachEvent("on"+evenTypeName, fn);

} else ...{

return false;

}

_table=document.getElementById("t_1");

addEvent(window,"load",_IG_initDrag(_table));

</script>

</body>

</HTML>

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Text;

using ahui4367;

namespace demoClass

...{

/**//// <summary>

/// WebForm6 的摘要说明。

/// </summary>

public class WebForm6 : System.Web.UI.Page

...{

protected System.Web.UI.WebControls.Literal sideLeft;

protected System.Web.UI.WebControls.Literal sideCenter;

protected System.Web.UI.WebControls.Literal sideRight;

Side TempSide=new Side();

SideSql TempSideSql=new SideSql();

WinInfo TempWinInfo=new WinInfo();

WinInfoSql TempWinInfoSql=new WinInfoSql();

char[] dot=...{','};

private void Page_Load(object sender, System.EventArgs e)

...{

TempSide=TempSideSql.InitSide(1);

if(TempSide.SideLeft!="")

...{

string[] StrLeft=TempSide.SideLeft.Trim().Split(dot);

for(int i=0;i<StrLeft.Length;i++)

...{

TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrLeft[i]));

sideLeft.Text=sideLeft.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");

}

if(TempSide.SideCenter!="")

...{

string[] StrCenter=TempSide.SideCenter.Trim().Split(dot);

for(int i=0;i<StrCenter.Length;i++)

...{

TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrCenter[i]));

sideCenter.Text=sideCenter.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");

}

if(TempSide.SideRight!="")

...{

string[] StrRight=TempSide.SideRight.Trim().Split(dot);

for(int i=0;i<StrRight.Length;i++)

...{

TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrRight[i]));

sideRight.Text=sideRight.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");

}

sideLeft.Text=sideLeft.Text+CommonLayer();

sideCenter.Text=sideCenter.Text+CommonLayer();

sideRight.Text=sideRight.Text+CommonLayer();

}

string RenderHtml (int id,string strTitle,string strContent)

...{

System.Text.StringBuilder sb=new StringBuilder();

sb.Append("<div id=m_"+id+" class=modbox style="position:relative">");//start1

sb.Append("<h2 class=modtitle>");

sb.Append("<table class=mhdr cellspacing=0 cellpadding=0 >");

sb.Append("<tr>");

sb.Append("<td id=m_"+id+"_h class=mttl>"+strTitle+"</td>");

sb.Append("<td id=m_"+id+"_e class=medit></td>");

sb.Append("</tr></table>");

sb.Append("</h2>");

sb.Append("<div>");//start2

sb.Append(strContent);

sb.Append("</div>");//end2

sb.Append(" </div>");//end1

return sb.ToString();

}

string CommonLayer()

...{

return "<div style='width=1px;height=1px;position:relative;'></div>";

}

Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码

override protected void OnInit(EventArgs e)

...{

// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。

InitializeComponent();

base.OnInit(e);

}

/**//// <summary>

/// 设计器支持所需的方法 - 不要使用代码编辑器修改

/// 此方法的内容。

/// </summary>

private void InitializeComponent()

...{

this.Load += new System.EventHandler(this.Page_Load);

}

#endregion

}

主要保存到数据库的代码在这里

var leftContainer=$("c_1");
var centerContainer=$("c_2")
var rightContainer=$("c_3");
var strLeft=strCenter=strRight="";
Element.cleanWhitespace(leftContainer);
Element.cleanWhitespace(centerContainer);
Element.cleanWhitespace(rightContainer);
for(var i=0;i<leftContainer.childNodes.length-1;i++)
{
strLeft=strLeft+leftContainer.childNodes[i].id.replace("m_","")+",";
}
for(var i=0;i<centerContainer.childNodes.length-1;i++)
{
strCenter=strCenter+centerContainer.childNodes[i].id.replace("m_","")+",";
}
for(var i=0;i<rightContainer.childNodes.length-1;i++)
{
strRight=strRight+rightContainer.childNodes[i].id.replace("m_","")+",";
}
var options={
parameters:"strLeft="+strLeft.substr(0,(strLeft.length-1))+"&strCenter="+strCenter.substr(0,(strCenter.length-1))+"&strRight="+strRight.substr(0,(strRight.length-1)),
method:"get"
}
new Ajax.Request("SaveSide.aspx?action=changeSide&s"+Math.random(),options);

只要把这段代码加入google_drag.js文件中,找到如下的地方.然后Paste

if (this._afterDrag()) {

//这里就是放代码的地方

}

------------------------------------------------------------------------------

个性网页布局的用到了2张表.具体的操作表的代码如下:(有4个文件)
Side.cs
public class Side
{
int _SideID;
string _SideLeft;
string _SideCenter;
string _SideRight;

public Side()
{
}

public int SideID
{
get{return this._SideID;}
set{this._SideID=value;}
}

public string SideLeft
{
get{return this._SideLeft;}
set{this._SideLeft=value;}
}

public string SideCenter
{
get{return this._SideCenter;}
set{this._SideCenter=value;}
}

public string SideRight
{
get{return this._SideRight;}
set{this._SideRight=value;}
}

}
}
WinInfo.cs

public class WinInfo
{
int _WinID;
string _WinName;
int _WinFlag;
public WinInfo()
{
}
public int WinID
{
get{return this._WinID;}
set{this._WinID=value;}
}

public string WinName
{
get{return this._WinName;}
set{this._WinName=value;}
}

public int WinFlag
{
get{return this._WinFlag;}
set{this._WinFlag=value;}
}

}

SideSql.cs
public class SideSql
{
public string conn=ConfigurationSettings.AppSettings["connstr"];

public SideSql()
{
}
/// <summary>
/// 保存窗口的布局到数据库
/// </summary>
/// <param name="sideLeft">左侧布局容器的窗口的ID字符串,中间用逗号隔开</param>
/// <param name="sideCenter">中间布局容器的窗口的ID字符串,中间用逗号隔开</param>
/// <param name="sideRigth">右侧布局容器的窗口的ID字符串,中间用逗号隔开</param>
/// <param name="sideID"></param>
public void SaveSide(string sideLeft,string sideCenter,string sideRigth,int sideID)
{
using(SqlConnection con = new SqlConnection(conn))
{
con.Open();
using(SqlTransaction trans=con.BeginTransaction())
{
try
{
SqlHelper.ExecuteNonQuery(trans,System.Data.CommandType.Text,"update Side set SideLeft='"+sideLeft+"',SideCenter='"+sideCenter+"',SideRight='"+sideRigth+"' where SideID="+sideID);
trans.Commit();
}
catch
{
trans.Rollback();
}
}
}

}

public Side InitSide(int sideID)//初始化窗口用的
{

using(SqlDataReader dr=SqlHelper.ExecuteReader(conn,System.Data.CommandType.Text,"select * from side where SideID=1"))
{
if(dr.Read())
{
Side TempSide=new Side();
TempSide.SideLeft=dr["SideLeft"].ToString();
TempSide.SideCenter=dr["SideCenter"].ToString();
TempSide.SideRight=dr["SideRight"].ToString();
return TempSide;
}
else
{
return null;
}
}

}

}

WinInfoSql.cs

public class WinInfoSql
{
public static string conn=ConfigurationSettings.AppSettings["connstr"];
WinInfo TempWinInfo=new WinInfo();
public WinInfoSql()
{
}

public WinInfo GetWinInfo(int winID)//获取窗口信息
{
using(SqlDataReader dr=SqlHelper.ExecuteReader(conn,System.Data.CommandType.Text,"select * from WinInfo where WinFlag=1 and WinID="+winID))
{
if(dr.Read())
{
TempWinInfo.WinName=dr["WinName"].ToString();
TempWinInfo.WinID=Convert.ToInt32(dr["WinID"]);
return TempWinInfo;
}
else
{
return null;
}
}
}
}

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1075011

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航