Asp.net自定义控件之加载层

来源：懂视网责编：小采时间：2020-11-27 22:37:22

Asp.net自定义控件之加载层

Asp.net自定义控件之加载层:本文旨在给大家开发自定义控件（结合js）一个思路，一个简单的示例，可能在实际项目中并不会这样做。先来看看效果： 1.在静态页面里开发好想要的效果 jQuery.extend({ openloading: function (options) { var defaults = {

推荐度：

点击下载本文 文档为doc格式

导读Asp.net自定义控件之加载层:本文旨在给大家开发自定义控件（结合js）一个思路，一个简单的示例，可能在实际项目中并不会这样做。先来看看效果： 1.在静态页面里开发好想要的效果 jQuery.extend({ openloading: function (options) { var defaults = {

本文旨在给大家开发自定义控件（结合js）一个思路，一个简单的示例，可能在实际项目中并不会这样做。
先来看看效果：

1.在静态页面里开发好想要的效果

jQuery.extend({

 openloading: function (options) {

 var defaults = { msg: '数据提交中...', img: 'loading.gif' };

 var opts = $.extend(defaults, options);

 $("body").append("<div class='l_overlay' style='position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;padding:0 20px 0 0;background-color:gray;display:none;'></div><div class='l_showbox' style='position:fixed;top:0;left:50%;z-index:1001;opacity:0;filter:alpha(opacity=0);margin-left:-80px;border:1px solid gray;font-size:12px;font-weight:bold;'><div class='loadingWord' style='width:122px;height:38px;line-height:38px;border:2px solid #D6E7F2;background:#fff;'><img style='margin:10px 8px 10px 8px;float:left;display:inline;' src='"+opts.img+"'>数据提交中...</div></div>");

 var h = $(document).height();

 $(".l_overlay").css({ "height": h, 'display': 'block', 'opacity': '0.4' });

 $(".l_showbox").stop(true).animate({ 'margin-top': (h / 2 - 58) + 'px', 'opacity': '1' }, 200);

 },

 closeloading: function () {

 $(".l_showbox").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400);

 $(".l_overlay").css({ 'display': 'none', 'opacity': '0' });

 $(".l_overlay").remove();

 $(".l_showbox").remove();

 }

});

2.vs新建类库，新建类继承于WebControl
添加属性：
[Description("获取和设置触发器ID"), DefaultValue(""), Browsable(true), Category("杂项")]
public string TargetID { get; set; }
重写OnPreRender方法。方法中注册js脚本，该脚本指示ID为TargetID的控件点击时显示加载层

protected override void OnPreRender(EventArgs e)
{
 if (Page != null && !string.IsNullOrEmpty(TargetID))
 {
 TargetID = GetClientID(TargetID); 
 Page.ClientScript.RegisterClientScriptResource(typeof(Loading), "BoControl.Scripts.Jquery.js"); 
 this.Page.ClientScript.RegisterStartupScript(typeof(string), "BoControl_" + this.ClientID, "$(\"#" + TargetID + "\").on(\"click\",function(){$.openloading({msg:\"" + Text + "\", img: \"" +Page.ClientScript.GetWebResourceUrl(this.GetType(), "BoControl.Images.loading.gif")+ "\"});});", true); 
} 
base.OnPreRender(e); }

OnPreRender方法中
Page.ClientScript.RegisterClientScriptResource(typeof(Loading), "BoControl.Scripts.Jquery.js");注册JQuery
Page.ClientScript.GetWebResourceUrl(this.GetType(), "BoControl.Images.loading.gif");是获取Web资源文件路径，如果你不想把图片文件嵌入dll请改为真实路径（如：Images/Loading.gif），相反你需要像下面一样指明图片文件和JQuery文件，并且图片属性-生成操作为：嵌入的资源
[assembly: WebResource("BoControl.Images.loading.gif", "image/gif")]//这里你还需注册JQuery
namespace BoControl
{
你还需要写Open方法和Close方法，方便后台代码中调用。
如：

 /// <summary>
 /// 打开加载动画
 /// UpdatePanel注册
 /// </summary>
 /// <param name="panel">UpdatePanel对象</param>
 public void Open(UpdatePanel panel)
 {
 if (Page != null)
 {
 ScriptManager.RegisterStartupScript(panel, panel.GetType(), "openloading", "$.openloading({msg:\"" + Text + "\", img: \"" + Page.ClientScript.GetWebResourceUrl(this.GetType(), "BoControl.Images.loading.gif"); + "\"});", true);
 }
 }

总的来说自定义控件的开发不算复杂，

Asp.net自定义控件之加载层

推荐度：

点击下载本文 文档为doc格式

标签：加载控件 ASP.NET

热门焦点

Asp.net自定义控件之加载层

Asp.net自定义控件之加载层

Asp.net自定义控件之加载层

最新推荐

猜你喜欢

热门推荐