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

本文旨在给大家开发自定义控件（结合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);
      }
    }   

总的来说自定义控件的开发不算复杂，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。