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

 更新时间:2016年06月17日 13:10:04   作者:波谷   我要评论
这篇文章主要介绍了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);
      }
    }   

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

相关文章

  • asp.net FileUpload控件实现文件格式判断与文件大小限制

    asp.net FileUpload控件实现文件格式判断与文件大小限制

    这篇文章主要介绍了有关asp.net fileupload控件判断文件格式,以及进行文件大小限制的方法,可以在web.config中配置,也可以在.cs文件中实现,需要的朋友参考下
    2014-11-11
  • ASP.NET Core应用中与第三方IoC/DI框架的整合

    ASP.NET Core应用中与第三方IoC/DI框架的整合

    ASP.NET Core应用中,针对第三方DI框架的整合可以通过在定义Startup类型的ConfigureServices方法返回一个ServiceProvider来实现。但是并不是那么容易的,下面通过实例给大家分享一下
    2017-04-04
  • aspx如果引用cs中的变量的方法

    aspx如果引用cs中的变量的方法

    引用cs中变量的实现方法
    2008-07-07
  • 一个简单的ASP.NET Forms 身份认证的实例方法

    一个简单的ASP.NET Forms 身份认证的实例方法

    当访问默认首页default.aspx时,会自动跳转到login.aspx页面上请求登录,随便输入用户名和密码,点击“登录”按钮,会回到首页,并显示当前登录的用户名。
    2013-07-07
  • WebApi实现通讯加密

    WebApi实现通讯加密

    本文主要介绍了WebApi实现通讯加密的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • 浅析.Net Core中Json配置的自动更新

    浅析.Net Core中Json配置的自动更新

    这篇文章主要介绍了浅析.Net Core中Json配置的自动更新,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • asp.net类库中添加WebService引用出现问题解决方法

    asp.net类库中添加WebService引用出现问题解决方法

    在Web项目内添加WebService的引用是件很简单的事情,不过对于一些新手朋友来说,就没有那么简单了,因为在添加的过程中总会遇到一些困难,接下来详细介绍如何解决,感兴趣的你可不要错过了啊
    2013-02-02
  • ASP.NET无刷新分页简单实现

    ASP.NET无刷新分页简单实现

    无刷新分页功能,虽然比较简单,但是涉及到的知识面蛮多的,我记录一下制作的步骤与心得,仅供参考。如有哪里不足,希望大家指出,有更好的方法,也可以提出来,大家一起学习。
    2015-09-09
  • Visual Studio 2017正式版发布 Mac版新功能特性有哪些

    Visual Studio 2017正式版发布 Mac版新功能特性有哪些

    Visual Studio 2017正式版推出时间什么时候?Mac版新功能特性又有哪些?这篇文章就为大家详细介绍Visual Studio 2017正式版的最新消息,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • asp.net实现简单分页实例

    asp.net实现简单分页实例

    这篇文章主要介绍了asp.net实现简单分页的方法,实例分析了asp.net分页的基本原理与实现流程,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01

最新评论