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

前端技术 2023/09/05 .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);
      }
    }

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

本文地址：https://www.stayed.cn/item/12498

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案