TheBeerHouse七:扩展篇(上)向CommunityServer一样飞翔

最新推荐文章于 2024-06-15 14:35:55 发布

18790970257

最新推荐文章于 2024-06-15 14:35:55 发布

阅读量61

点赞数

文章标签： ui xhtml c#

原文链接：http://www.cnblogs.com/ajaxren/archive/2007/07/16/820292.html

版权

--我先介绍下这个咚咚有点像CommunityServer首页上修改新闻的功能哈哈
- -我看了CommunityServer口水流啊流终于有此修改^^绝对是自己搞得

单击

弹出

修改完毕

简单的逻辑过程-结合下面的aspx说说页面上的简单逻辑哈哈:

当你单击名称为-Title的div时-ModalPopupExtender就弹出让你修改标题,当你点关闭的时候(首先当然ModalPopupExtender只是隐藏了)
会调用名称为"OnCallBack('SetTitle')"的脚本,- -被你识破了吧这个是客户端回调,然后经过正常的
TheBeerHouse流程保存到数据源中,- -ok我们一点一点地来

< %@ Page Language ="C#" AutoEventWireup ="true" CodeFile ="TitleTest.aspx.cs" Inherits ="Test_TitleTest" % >

< %@ Register

Assembly ="AjaxControlToolkit"

Namespace ="AjaxControlToolkit"

TagPrefix ="ajaxToolkit" % >

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< %@ Register

Assembly ="AjaxControlToolkit"

Namespace ="AjaxControlToolkit"

TagPrefix ="ajaxToolkit" % >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head runat ="server" >

< title > 无标题页 </ title >

< style >

/**//*Modal Popup*/

.modalBackground {}{

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

.modalPopup {}{

background-color:#ffffdd;

border-width:3px;

border-style:solid;

border-color:Gray;

padding:3px;

width:250px;

}

.sampleStyleA {}{

background-color:#FFF;

}

.sampleStyleB {}{

background-color:#FFF;

font-family:monospace;

font-size:10pt;

font-weight:bold;

}

.sampleStyleC {}{

background-color:#ddffdd;

font-family:sans-serif;

font-size:10pt;

font-style:italic;

}

.sampleStyleD {}{

background-color:Blue;

color:White;

font-family:Arial;

font-size:10pt;

}

/**//*Popup Control*/

.popupControl{}{

background-color:White;

position:absolute;

visibility:hidden;

}

.validatorCalloutHighlight

{}{

background-color: lemonchiffon;

}

/**//*当点击修改标题区域的时候更换的背景*/

.selectTitle{}{

background-color:Gray;

}

/**//*不点或成功修改标题后的样式*/

.notSelectTitle{}{

background-color:Transparent;

}

</ style >

</ head >

< body >

< form id ="form1" runat ="server" >

< asp:ScriptManager ID ="ScriptManager1" runat ="server" >

</ asp:ScriptManager >

< div id ="Title" runat =server > d

dd &nbsp

</ div >

< div class ="demoarea" >

< div class ="demoheading" ></ div >

< p id ="Paragraph1" ></ p >< br />

< asp:LinkButton ID ="LinkButton1" runat ="server" Text ="Click here to change the paragraph style" />

< asp:Panel ID ="Panel1" runat ="server" Style ="display: none" >

< asp:Panel ID ="Panel3" runat ="server" CssClass ="modalPopup" Height ="72px" Width ="192px" >

< div > 修改标题： < br />

< input id ="TitleInPut" type =text style ="width: 188px; height: 21px" />< br />

< asp:Button ID ="OkButton" runat ="server" Text ="OK" />

< asp:Button ID ="CancelButton" runat ="server" Text ="Cancel" />

</ div >

</ asp:Panel >

< ajaxToolkit:ModalPopupExtender ID ="ModalPopupExtender" runat ="server"

TargetControlID ="Title"

PopupControlID ="Panel1"

OkControlID ="OkButton"

OnOkScript ="OnCallBack('SetTitle')"

CancelControlID ="CancelButton"

OnCancelScript ="CanceClick('SetTitle')"

DropShadow ="true"

Drag =false

PopupDragHandleControlID ="Panel3" />

</ div >

< script type ="text/javascript" >

// The following snippet works around a problem where FloatingBehavior

// doesn't allow drops outside the "content area" of the page - where "content

// area" is a little unusual for our sample web pages due to their use of CSS

// for layout.

function setBodyHeightToContentHeight() {

document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";

}

setBodyHeightToContentHeight();

$addHandler(window, "resize", setBodyHeightToContentHeight);

</ script >

</ form >

</ body >

</ html >

//--不好意思有点长了各位是否看清楚了~~这里里用来保存数据的时 OnCallBack('SetTitle')"这个是客户端回调
赫赫我们来看看他是怎么工作的

后台页
2

using System;
3

using System.Data;
4

using System.Configuration;
5

using System.Collections;
6

using System.Web;
7

using System.Web.Security;
8

using System.Web.UI;
9

using System.Web.UI.WebControls;
10

using System.Web.UI.WebControls.WebParts;
11

using System.Web.UI.HtmlControls;
12

using System.Xml;
13

public partial class Test_TitleTest : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler
14

{
15

protected void Page_Load(object sender, EventArgs e)
16

{
17

string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetTemFromServer", "context");
20

string cbString = "function UseCallback(arg,context)" + "{" + cbReference + ";}";
21

//--得到原来的页面设定
24

if(!Page.IsPostBack)
25

Title.InnerText=MB.TheBeerHouse.BLL.PageState.PageState.Current.Title;
26

//--如果是管理员或者具有修改权限的生成回调脚本并且另ModalPopupExtender处于可以使用状态
32

if (this.ModalPopupExtender.Enabled = (this.Page.User.Identity.IsAuthenticated))
33

&& (this.Page.User.IsInRole("Administrators") || this.Page.User.IsInRole("Editors"))))
34

{
35

ModalPopupExtender.Enabled = true;//---------------------------------------------------------调用注册函数事件;
37

Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"UseCallback", cbString, true);
38

MB.TheBeerHouse.UI.Script.ManageScript.RegisterStartupScript(Page, "RageEventRegisiter");
40

}
41

string CallBackString;
43

public void RaiseCallbackEvent(string eventArg)
44

{
45

//写标题
46

if (eventArg.StartsWith("SetTitle+="))
47

{
48

//去掉命令标示"SetTitle+=",去掉可能有的回传命令分割符;--这里考虑可能有其他的扩展,,并且调用逻辑层保存数据
50

MB.TheBeerHouse.BLL.PageState.PageState.Current.Save(eventArg.Replace("SetTitle+=", "").Replace(";", ""));
51

CallBackString = "SetTitle;" + eventArg.Replace("SetTitle+=", "");
52

}
53

}
55

public string GetCallbackResult()
56

{
57

return CallBackString;
58

}
59

}
60

//--全部都有注释这个是个人习惯建议凡是赖同胞们统统地用因为最后交接的时候生成xml了事哈哈哈
//--这里比较重要的是
//--得到原来的数据
MB.TheBeerHouse.BLL.PageState.PageState.Current.Title;
//--去取脚本
MB.TheBeerHouse.UI.Script.ManageScript.RegisterStartupScript(Page, "RageEventRegisiter");
//--保存数据
MB.TheBeerHouse.BLL.PageState.PageState.Current.Save(eventArg.Replace("SetTitle+=", "").Replace(";", ""));

我们从最简单的开始哈哈我也懒....在吃饭以前我把我的脚本类说完

using System;

using System.Data;

using System.Configuration;

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;

/**/ /// <summary>

/// BaseScript 的摘要说明

/// </summary>

namespace MB.TheBeerHouse.UI.Script

{

public class ManageScript

{

//---这个咚咚是考虑将来可能扩展脚本都存在这里方便调用拉

private static System.Collections.Generic.Dictionary<string, string> ScriptContent = new

System.Collections.Generic.Dictionary<string, string>();

public ManageScript()

{

}

static ManageScript()

{

//在静态方法中初始化参数

InitScriptContent();

}

/**//// <summary>

/// 输出脚本到from的结束标记上方

/// </summary>

/// <param name="tempPage">用来输出脚本的page对象</param>

/// <param name="key">数据脚本的key</param>

public static void RegisterStartupScript(Page tempPage, string key)

{

if(!tempPage.ClientScript.IsStartupScriptRegistered(tempPage.GetType(),key))

tempPage.ClientScript.RegisterStartupScript(tempPage.GetType(), key, ScriptContent[key], true);

}

/**//// <summary>

/// 初始化方法

/// </summary>

private static void InitScriptContent()

{

//---和点击网页图片标题的时候,更换标题的Ajax的回调函数

ScriptContent.Add("RageEventRegisiter", @"

//---注册事件用的函数

function PageEventRegister()

{

//--给标题注册一个函数，在点中的时候修改颜色-如果不是管理员，或者具有修改权限的家伙不要输出这段脚本咯

document.getElementById('Title').οnclick=function(){document.getElementById('Title').className='selectTitle'};

}

//--------运行上面的函数

PageEventRegister();

//------------执行Ajax后有服务器调用的函数

function GetTemFromServer(TextBox2,context)

{

//分解对象为:［0]命令,[1]参数

var TempString=TextBox2.split(';');

//如果命令是修改标题　

if(TempString[0]=='SetTitle')

{

//则使用回传对象将标题插入到其中，回传对象是在调用的时候设置的

context.innerHTML=TempString[1];

context.className='notSelectTitle' ;

}

//--发出调用Ajax命令的函数

function OnCallBack(CommandString){

//-------设置标题

if(CommandString=='SetTitle')

{ //-------验证~~必须有输入才进行回调

if(document.getElementById('TitleInPut').value.length>0)//---TitleInPut特例用在母板页中不用加ctl00_，估计是控件中

隐藏的

{

//----------------------调用Ajax客户端回掉函数

//--------------------------------------参数－－－－－－－－－－－－－－用于插入标题的对象--

UseCallback('SetTitle+='+document.getElementById('TitleInPut').value,document.getElementById('Title'));

//--清除输入的数据

document.getElementById('TitleInPut').value='';

}else

{

window.alert('由于您输入的是空系统不接受您的输入!');

}

//---在探出窗体点取消的时候调用的

function CanceClick(CommandString)

{

//如果是取消标题设定

if(CommandString=='SetTitle')

{

document.getElementById('Title').className='notSelectTitle';

}

");

}

// --这就是用来回调的函数咯里面重要的是

// --------------------------------------参数－－－－－－－－－－－－－－用于插入标题的对象--,告诉后台我选择的是插入标题咯

UseCallback( ' SetTitle+= ' + document.getElementById( ' TitleInPut ' ).value,document.getElementById( ' Title ' ));

//--又是大段的代码赫赫不好意思~~这个专题下次是最后一部分了...

转载于:https://www.cnblogs.com/ajaxren/archive/2007/07/16/820292.html

18790970257

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TheBeerHouse七:扩展篇(上)向CommunityServer一样飞翔

--我先介绍下这个咚咚有点像CommunityServer首页上修改新闻的功能哈哈- -我看了CommunityServer口水流啊流终于有此修改^^绝对是自己搞得单击弹出修改完毕简单的逻辑过程-结合下面的aspx说说页面上的简单逻辑哈哈:当你单击名称为-Title的div时-ModalPopupExtender就弹出让你修改标题,当你点关闭的时候(首先当然ModalPopupExtend...
复制链接

扫一扫