扩展IE WebControls之一：让Toolbar支持客户端事件

关于IE WebControls，也许您早就知道了吧，它不仅小巧而且开源，您可以从中学到.net控件开发的一些技巧。最近在用它的Toolbar控件来实现一些工具条，嗯，用起来很简单，效果也不错(尤其是在IE里，不加任何修饰就可以实现象WinForm上的工具，不愧是微软开发的)。但是有个缺点就是不支持客户端事件，比如我有个“删除”按钮，想在用户点击后确认是否删除，如果确认则提交到服务器执行删除操作，否则不提交。结果翻遍了Toolbar的所有属性、方法也没有找到如何设置让某个按钮调用特定的客户端脚本。既然它是开源的，那就自己实现个方法吧！
我的想法是为Toolbar的Button提供一个属性，通过设置该属性为一个客户端脚本的方法的名称来实现脚本的调用，该方法返回一个布尔值，如果为true则提交到服务器，false则不提交。

实现步骤：
1、通过分析源代码，ToolbarButton类是在ToolbarButton.cs文件中实现的，因此ToolbarButton.cs添加ClientClickMethod属性




/**//// <summary>


/// Client Method


/// </summary>


[DefaultValue("")]


[Category("Behavior")]


[ResDescription("Client Method")]


public string ClientClickMethod






{


get






{


object obj = ViewState["ClientClickMethod"];


return (obj == null) ? String.Empty : (string)obj;


}






set

{ ViewState["ClientClickMethod"] = value; }


}

2、修改WriteItemAttributes方法将属性指定的方法对应到客户端控件的onclick方法上



protected override void WriteItemAttributes(HtmlTextWriter writer)






{


base.WriteItemAttributes(writer);




string style = HoverStyle.CssText;


if (style != String.Empty)






{


writer.WriteAttribute("hoverstyle", style);


}


style = SelectedStyle.CssText;


if (style != String.Empty)






{


writer.WriteAttribute("selectedstyle", style);


}





writer.WriteAttribute("onkeydown", "if (event.keyCode==13){event.returnValue=false}");





//add by donna,2006-08-02


if (ClientClickMethod != String.Empty)






{


writer.WriteAttribute("onclick","try{event.srcElement._IsCanceled=!" + ClientClickMethod +"}catch(e){event.srcElement._IsCanceled=true;}");


}


//add end





}





您也许会问，为什么不用类似onclick="return confirm('Message');"的方法来实现呢？原因为是IE在显示有Toolbar的页面时是调用toolbar.htc中的脚本来生成Toolbar的(这也就是为什么安装IE WebControls时要把Runtime目录下的内容复制到Web站点根目录下的webctrl_client/1_0目录下的原因)，而它的__doPostBack方法是在整个Toolbar上调用，而不是某个ToolButton上调用的，虽然在ToolButton上return false了但不能阻止其PostBack，因此这里采用了一种变通的方法，先在ToolButton的onclick中设置一个标志即event.srcElement._IsCanceled，然后在PostBack之前检查这个标志，如果为true则不提交。
3、修改toolbar.htc脚本


function f_OnClick()






{


if (_IsSubmitting || !_Ready)


return;




//add by donna 2006-08-02;用来在IE中判断是否可以提交


if (event.srcElement.getAttribute("_IsCanceled"))


return;


//add end




var oCell = f_FindSurroundingCell(event.srcElement);


if ((oCell != null) && (!oCell.isDisabled))


f_SelectItem(oCell);


_KeyboardClick = false;


}





4、可有可无，修改runtime文件的路径
如果您不希望把Runtime目录下的内容复制到Web站点根目录下的webctrl_client/1_0目录中，您只要改一下BaseRichControl.cs文件的AddPathToFilename函数就行，这里把它改到了虚拟目录的webctrl_client/1_0目录中


internal static string AddPathToFilename(HttpContext context, string filename)






{


//modified by donna,2006-8-2


return context.Request.ApplicationPath + "/webctrl_client/1_0/" + filename;


//modify end





//return FindCommonPath(context) + filename;


}


现在可以试试效果了，结果发现在IE中一切正常，在Firefox中完全没有效果，对比IE和Firefox生成的HTML代码发现asp.net对他们的实现机制不一样(具体也不太清楚，知道的朋友可以说说)。
5、支持Firefox
修改ToolbarButton.cs文件AddAnchorAttributes方法


//modified by donna,2006-8-8;用来支持FireFox


if (ClientClickMethod != String.Empty)






{


writer.AddAttribute(HtmlTextWriterAttribute.Href, "javascript:if (" + ClientClickMethod.Replace(";","") + "){" + AnchorHref + ";}");





}


else






{


writer.AddAttribute(HtmlTextWriterAttribute.Href, "javascript:" + AnchorHref);


}


//modify end


使用方法：
1、运行build.bat编译控件；
2、将src/runtime/目录下所有内容复制到你的WEB应用程序目录的webctrl_client/1_0/目录下；
3、请参考演示程序使用。

环境：WIN2003、IIS6、VS2003、Framework1.1、IE6、FireFox1.5

效果图



代码下载

donna.zdn@gmail.com

http://www.cnblogs.com/donna/archive/2006/08/11/474188.html