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

最新推荐文章于 2024-07-29 11:53:27 发布

ahui4367

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量3.7k

点赞数

文章标签： javascript asp.net google 数据库 css webform

本文链接：https://blog.csdn.net/ahui4367/article/details/1075850

版权

该效果在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 >

< meta content = " Microsoft Visual Studio .NET 7.1 " name = " GENERATOR " >

< meta content = " C# " name = " CODE_LANGUAGE " >

< meta content = " JavaScript " name = " vs_defaultClientScript " >

< meta content = " http://schemas.microsoft.com/intellisense/ie5 " name = " vs_targetSchema " >

< script src = ' prototype-1.4.0.js ' ></ script >

< script src = " 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: #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 >

< body MS_POSITIONING = " GridLayout " >

< form id = " Form1 " method = " post " runat = " server " >

< table cellpadding = " 0 " cellspacing = " 0 " border = " 0 " width = " 100% " >

< tr >

< td valign = " top " width = " 100% " >

< div id = " modules " >

< table id = " t_1 " cellspacing = " 10 " border = " 0 " width = " 98% " align = " center " style = " TABLE-LAYOUT:fixed " >

< tr >

< td id = " c_1 " >

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

</ td >

< td id = " c_2 " >

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

</ td >

< td id = " c_3 " >

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

</ td >

</ tr >

</ table >

</ div >

</ td >

</ tr >

</ table >

< DIV ></ DIV >

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

</ form >

< script >

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 窗体设计器生成的代码

}

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

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

if (this._afterDrag()) {

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

}

好了就这样了.如果不懂的可以和我联系,代码也可以的.留个Email我发给你.

ahui4367

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
88
评论
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.Ev
复制链接

扫一扫