• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

知识点:JQuery、Ajax、自定义控件

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

总的来说自定义控件的开发不算复杂,下一篇将介绍自定义控件数据绑定、状态存储


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.NETMVCeasyUI-datagrid分页发布时间:2022-07-10
下一篇:
ASP.NETCore获取客户端IP地址发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap