个性网页布局的用到了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;
}
}
}
}
该效果在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的框架了,
<%@Pagelanguage="c#"Codebehind="WebForm6.aspx.cs"AutoEventWireup="false"Inherits="demoClass.WebForm6"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<title>WebForm6</title>
<metacontent="MicrosoftVisualStudio.NET7.1"name="GENERATOR">
<metacontent="C#"name="CODE_LANGUAGE">
<metacontent="JavaScript"name="vs_defaultClientScript">
<metacontent="http://schemas.microsoft.com/intellisense/ie5"name="vs_targetSchema">
<scriptsrc='prototype-1.4.0.js'></script>
<scriptsrc="google_drag.js"></script>
<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:#3366cc1pxsolid;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}
.meditA:visited...{COLOR:#77c}
.meditA:link...{COLOR:#77c}
.meditA:active...{COLOR:#77c}
.mc...{FONT-SIZE:82%;PADDING-BOTTOM:4px;WIDTH:100%;PADDING-TOP:4px}
</style>
</HEAD>
<bodyMS_POSITIONING="GridLayout">
<formid="Form1"method="post"runat="server">
<tablecellpadding="0"cellspacing="0"border="0"width="100%">
<tr>
<tdvalign="top"width="100%">
<divid="modules">
<tableid="t_1"cellspacing="10"border="0"width="98%"align="center"style="TABLE-LAYOUT:fixed">
<tr>
<tdid="c_1">
<asp:Literalid="sideLeft"runat="server"></asp:Literal>
</td>
<tdid="c_2">
<asp:Literalid="sideCenter"runat="server"></asp:Literal>
</td>
<tdid="c_3">
<asp:Literalid="sideRight"runat="server"></asp:Literal>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<DIV></DIV>
</TD></TR></TABLE>
</form>
<script>
functionaddEvent(obj,evenTypeName,fn)...{
if(obj.addEventListener)...{
obj.addEventListener(evenTypeName,fn,true);
returntrue;
}elseif(obj.attachEvent)...{
returnobj.attachEvent("on"+evenTypeName,fn);
}else...{
returnfalse;
}
}
_table=document.getElementById("t_1");
addEvent(window,"load",_IG_initDrag(_table));
</script>
</body>
</HTML>
usingSystem;
usingSystem.Collections;
usingSystem.ComponentModel;
usingSystem.Data;
usingSystem.Drawing;
usingSystem.Web;
usingSystem.Web.SessionState;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.HtmlControls;
usingSystem.Text;
usingahui4367;
namespacedemoClass
...{
/**////<summary>
///WebForm6的摘要说明。
///</summary>
publicclassWebForm6:System.Web.UI.Page
...{
protectedSystem.Web.UI.WebControls.LiteralsideLeft;
protectedSystem.Web.UI.WebControls.LiteralsideCenter;
protectedSystem.Web.UI.WebControls.LiteralsideRight;
SideTempSide=newSide();
SideSqlTempSideSql=newSideSql();
WinInfoTempWinInfo=newWinInfo();
WinInfoSqlTempWinInfoSql=newWinInfoSql();
char[]dot=...{','};
privatevoidPage_Load(objectsender,System.EventArgse)
...{
TempSide=TempSideSql.InitSide(1);
if(TempSide.SideLeft!="")
...{
string[]StrLeft=TempSide.SideLeft.Trim().Split(dot);
for(inti=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(inti=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(inti=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();
}
stringRenderHtml(intid,stringstrTitle,stringstrContent)
...{
System.Text.StringBuildersb=newStringBuilder();
sb.Append("<divid=m_"+id+"class=modboxstyle="position:relative">");//start1
sb.Append("<h2class=modtitle>");
sb.Append("<tableclass=mhdrcellspacing=0cellpadding=0>");
sb.Append("<tr>");
sb.Append("<tdid=m_"+id+"_hclass=mttl>"+strTitle+"</td>");
sb.Append("<tdid=m_"+id+"_eclass=medit></td>");
sb.Append("</tr></table>");
sb.Append("</h2>");
sb.Append("<div>");//start2
sb.Append(strContent);
sb.Append("</div>");//end2
sb.Append("</div>");//end1
returnsb.ToString();
}
stringCommonLayer()
...{
return"<divstyle='width=1px;height=1px;position:relative;'></div>";
}
Web窗体设计器生成的代码#regionWeb窗体设计器生成的代码
overrideprotectedvoidOnInit(EventArgse)
...{
//
//CODEGEN:该调用是ASP.NETWeb窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/**////<summary>
///设计器支持所需的方法-不要使用代码编辑器修改
///此方法的内容。
///</summary>
privatevoidInitializeComponent()
...{
this.Load+=newSystem.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()) {
//这里就是放代码的地方
}
分享到：
相关推荐
标题 "Asp.net+JQuery拖拽布局并保存至数据库" 涉及的技术领域主要集中在Web开发，尤其是客户端交互和后端数据处理。这里我们将深入探讨如何利用JQuery实现拖拽布局，以及如何将这种布局信息存储到Asp.net应用程序的...
【标题】中的“网页层拖动实例(ASP.NET+AJAX)”是指一个使用ASP.NET技术和AJAX技术实现的网页交互功能，允许用户在网页上拖动特定层或元素。这通常涉及到网页动态效果和用户体验的提升，使得用户可以更加直观地操作...
【标题】：“网页层拖动实例(ASP.NET+AJAX)_ASPX开发教程.rar”这一资源主要涵盖了如何在ASP.NET环境中结合AJAX技术实现网页元素的动态拖动功能。ASP.NET是微软公司推出的用于构建Web应用程序的框架，而AJAX...
首先，"asp.net+javascript+css(模仿Google的拖拽的个性网页布局.txt"这个文件表明，教程将涉及JavaScript的使用，这是一种广泛用于浏览器端脚本语言，可以实现动态效果和用户交互。在模仿Google的拖拽布局中，...
网页层拖动技术是网页交互设计中的一个重要组成部分，它允许用户通过鼠标拖放操作来改变网页元素的位置，提升用户体验。在ASP.NET与AJAX的结合下，我们可以实现更流畅、响应更快的页面层拖动效果。这个实例将深入...
在这个“ASP.NET-[其他类别]网页层拖动实例(ASP.NET+AJAX).zip”压缩包中，我们可以推测其主要内容是关于如何在ASP.NET网页中实现层的拖动功能，并结合了AJAX（异步JavaScript和XML）技术来提升用户体验。...
在这个特定的源码实例中，结合了ASP.NET与AJAX（异步JavaScript和XML）技术，实现了网页层的拖动功能，这在现代Web开发中是常见的交互设计，如拖放式布局或可移动的对话框。 1. **ASP.NET基础** ASP.NET提供了丰富...
在本文中，我们将深入探讨如何使用ASP.NET与AJAX技术实现网页层拖动功能，同时结合无刷新"顶一下"及读取数据库数据的操作。这是一个非常实用的技术，它能够为用户带来更流畅、互动性更强的网页体验。 首先，我们要...
【标题】：“网页层拖动实例(ASP.NET+AJAX)”是一个示例项目，它结合了ASP.NET技术和AJAX（Asynchronous JavaScript and XML）来实现网页元素的动态拖放功能。这种技术通常用于提高用户体验，让用户能够通过鼠标交互...
本文将深入探讨如何使用ASP.NET、JavaScript和CSS来模仿Google的拖拽式个性网页布局，特别是涉及数据库操作的部分。 首先，我们要了解Google的拖拽布局的核心原理。这种布局方式允许用户通过鼠标拖放元素来自定义...
在这个基于ASP.NET+JavaScript+C#实现的图片切割、裁切并保存的程序源码中，我们可以深入学习到以下几个关键知识点： 1. **ASP.NET MVC架构**： ASP.NET框架提供了多种开发模式，如Web Forms、ASP.NET Core以及ASP...
本篇将详细介绍如何利用ASP.NET、SQL数据库以及jQuery库构建一个类似Google日历的日程视图控件。该控件具备日、周、月三种视图模式，同时支持快速新增、快速修改和通过拖拽调整日程时间等实用功能。 首先，ASP.NET...
在ASP.NET和jQuery技术栈中，开发一个仿开心网图像裁剪上传功能是一个常见的需求，尤其是在社交网络和个人资料设置中。这个项目的核心是提供用户友好的界面，让他们能够选择并裁剪图片，以适应特定的尺寸要求，如上...
ASP.NET可能是具体的Web开发技术，它提供了一套用于构建动态网站的工具和服务，包括页面生命周期管理、数据绑定、身份验证和授权等。 接着，jQuery是一个强大的JavaScript库，它的主要目的是简化HTML文档遍历、事件...
在本场景中，"asp.net 工作流程图(拖拽设计)" 提供了一个允许用户通过拖放操作来创建和编辑流程图的功能。这极大地提高了用户交互性和设计效率。下面我们将深入探讨这一主题，主要涉及以下知识点： 1. **ASP.NET...
ASP.NET版谷歌地图GoogleMap是一款基于ASP.NET技术的控件，它允许开发者在网页应用中集成谷歌地图服务，提供交互式的地图展示和地理定位功能。这个控件是用C#语言编写的，确保了与.NET Framework的良好兼容性，并且...
在ASP.NET开发中，弹出层和缩放菜单是网页交互设计的重要元素，它们能够提供良好的用户体验，增强网站的互动性和美观性。本资源“asp.net 弹出层_缩放菜单式(1)”可能是一个关于如何在ASP.NET中实现这种效果的教学...
标题中的“jQuery javascript css 在线截图 asp.net2005”揭示了这是一个关于使用jQuery、JavaScript、CSS技术实现在线截图功能的项目，且该功能是构建在ASP.NET 2005框架上的。让我们详细探讨一下这些技术及其在...