Asp.Net+Javascript+CSS(模仿google的拖拽的个性网页布局) _操作数据库篇

个性网页布局的用到了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的框架了,

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

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

  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()) {

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

}

posted @ 2010-06-26 11:36  灵雨飘零  阅读(720)  评论(0)  编辑  收藏  举报