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);
      }
    }

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

时间: 2016-06-16

asp.net自定义控件中注册Javascript问题解决方案

复制代码 代码如下: protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); RenderJS(); } private void RenderJS() { if (!Page.ClientScript.IsClientScriptBlockRegistered(SCRIPT_ID))//如果还没有注册语句,则注册 { Page.ClientScript.RegisterClientScriptBlock(t

asp.net自定义控件回发数据实现方案与代码

在实现asp.net的自定义控件中,若要实现数据的回发或者post数据,那自义控件必须实现IPostBackDataHandler接口, 在该接口中有两个方法一个是LoadPostData,另一个是RaisePostDataChangedEvent.第一个方法用于在回发数据时,填充自定义控件的相关属性,第二个方法用于激发控件相关的事件.也就是说这两个方法,应该是在提交数据的时候进行调用的. 可是,我们在实现自己的控件时,虽然继承了 IPostBackDataHandler,但是在提交数据的时候确

Asp.net 动态加载用户自定义控件,并转换成HTML代码

如果页面单纯的使用js来创建,要写大量的代码,而且不直观. 在asp.net中,其实我们可以创建用户自定义控件,通过Ajax请求返回用户自定义控件HTML代码. 复制代码 代码如下: public static string RangerUsControl(string controlName) { StringBuilder build = new StringBuilder(); HtmlTextWriter htmlWriter = new HtmlTextWriter(new Strin

asp.net动态加载自定义控件的方法

本文实例讲述了asp.net动态加载自定义控件的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: //usercontrol.IndexOper为自定义控件 usercontrol.IndexOper uc=(usercontrol.IndexOper)Page.LoadControl("自定义控件路径"); uc.ID = "uc";  //定义唯一标示 //OperContent为PlaceHolder控件 OperContent.Contr

asp.net DropDownList自定义控件,让你的分类更清晰

看到Discuz是2个下拉列表进行合并的,网上找了一些资料,然后写了这个小源码,在这里和大家分享一下! 运行效果图,如下所示(深黑的地方选不中,因为那是上一级的分类): 项目结构图如下所示: Controls类库SmartDropDownList.cs代码如下所示: SmartDropDownList.cs 复制代码 代码如下: using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using Syste

asp.net自定义控件代码学习笔记

效果:在放这个控件的页面: XML/HTML 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test6.aspx.cs" Inherits="test6" %> <%@Register TagPrefix="custom" Namespace="myComponents" %>

浅谈ASP.NET中最简单的自定义控件

ASP.NET用户控件一般适用于产生相对静态的内容,所以没有builtin的事件支持.本文讨论用户控件返回事件的方法. 假定用户控件(UserControl.ascx)中包含按钮控件AButton,希望实现按AButton按钮时,包含该用户控件的页面可以接收到事件.为此,小鸡射手在用户控件和页面的代码中分别作了处理. UserControl.ascx.cs中的处理:         1. 定义public的事件委托,如ClickEventHandler;         2. 在UserCont

Asp.net清空控件值的方法(可自定义控件类型)

由于项目收尾,最近忙着做一些方法的优化,整理了一些分享给大家. 当页面内有许多控件,我们在需要清空其值的时候,一个个清空未免太麻烦.于是写了这么一个方法,可以自定义清空控件的类型,灵活应对业务需求. 复制代码 代码如下: /// <summary>重置方法控件类型枚举</summary> /// <remarks>求知域http://www.qqextra.com 2012-12-28</remarks> public enum ReSetType { //

asp.net 自定义控件实现无刷新上传图片,立即显示缩略图,保存图片缩略图

如图: 点击浏览,选择图片之后,右面显示图片 第一步: 创建CtFileUpLoad.ascx 复制代码 代码如下: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="CtFileUpLoad.ascx.cs" Inherits="WebParts_CtFileUpLoad" %> <table cellpadding="0&quo

asp.net中使用自定义控件的方式实现一个分页控件的代码

一.概述 在web开发中,常常需要显示一些数据,而为了方便排版及浏览,我们只需要显示所有记录中的一部分.一般情况下,我们采用分页来实现这个需求.实现分页的方法多种多样,在本文中,我们采用了一个分页空间来记录记录总数.当前页.总页数及页面大小等.为了有一个直观上的印象,先展示该控件运行后的效果,效果如下图所示: 二.实现方案 为了实现该效果图,在asp.net中,可以使用Custom Controls and User Controls两种方式,User Controls的实现方式及其简单,而且使

ASP.NET 中 Button、LinkButton和ImageButton 三种控件的使用详解

ASP.NET Framework包含三个用于向服务器端提交表单的控件:Button.LinkButton和ImageButton.这三个控件拥有同样的功能,但每种控件的外观界面不同. 本文就带着大家学习如何在页面中使用这三种控件.然后,学习如何关联客户端脚本和服务器端Button控件,以及如何使用Button控件把一个表单传到不是当前页的页面.最后,学习如何处理Button控件的Command事件. 一.使用Button控件 Button控件用来向服务器端提交表单的按钮.例如,代码清单1中的页

asp.net webform自定义分页控件

做web开发一直用到分页控件,自己也动手实现了个,使用用户自定义控件. 翻页后数据加载使用委托,将具体实现放在在使用分页控件的页面进行注册. 有图有真相,给个直观的认识: 自定义分页控件前台代码: <style type="text/css"> .pager-m-l { margin-left: 10px; } .pager { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; fo

asp.net分页控件AspNetPager的样式美化

在前段时间的开发网站的过程中,突然觉得这个简洁的样式看着和网站整体的风格实在不搭调,于是看看AspNetPager的最后生成html,写了一段CSS样式,将分页的样式和网站整体风格统一起来了. 效果如下: 做的不是很好看,希望大家不要丢砖头,俺的头没包棉絮,伤不起 ~-_-~ CSS样式表: /* AspNetPager Style Power By http://www.edweb.cn */.pager{ width:95%;  margin:10px; line-height:20px;

在ASP.NET 2.0中操作数据之四十九:为GridView控件添加RadioButton

导言: GridView控件提供了大量的内置功能.它包含了一系列的域(field)来显示诸如text.images.hyperlinks和buttons.另外它支持模板(template)用于用户自定义界面.我们可以构建这样一个GridView控件,用户仅需要点击控件里的一个按钮,每一条记录行都可以选择.编辑.删除.除了控件本身内置的功能外,在某些情况下,我们添加一些额外的.控件没有内置的功能.在本章及接下来的2篇教程里我们将探讨如何优化GridView,以支持额外的功能. 本篇及接下来的教程将

在ASP.NET 2.0中操作数据之四十六:使用SqlDataSource控件检索数据

导言 到目前为止,我们探讨的教程是由表现层,业务逻辑层和数据访问层构成的层次体系结构.数据访问层和业务逻辑层分别在教程第一和第二章提到.在Displaying Data With the ObjectDataSource 这篇教程里,我们探讨了怎样用ASP.NET 2.0的新控件--ObjectDataSource控件在表现层展示数据. 本教程到目前为止用这种层次结构来处理数据.然而绕过这种体系结构,通过直接把数据查询和业务逻辑放在Web页面上,也可以达到直接在ASP.NET页面上访问,插入,更

Asp.net中使用文本框的值动态生成控件的方法

看到一个网友,有论坛上问及,动态的生成checkbox控件,在文本框中输入一个"花"字,点一下"生成"按钮,就会在下面生成一个checkbox,它的text属性是"花".再输入一个"鸟",点一下按钮,就会生成第二个checkbox控件,text属性是"鸟"... Insus.NET的解决方法很简单,就是每次在文本框输入的值都存起来,然后把这些数据绑定至一个CheckBoxList控件上就行了. 详细,先创建

在ASP.NET 2.0中操作数据之五十三:在Data Web控件显示二进制数据

导言: 在前面的教程我们阐述了应用程序处理二进制数据的2种模式,以及使用FileUpload 控件从浏览器向服务器文件系统上传文件.当文件上传并存储在文件系统里时,应在相应的数据库记录里存储该文件的存储路径. 我们先来看如何为最终用户提供二进制数据.怎样展示二进制数据呢?这取决于其类型.比如图片,我们将其显示为image:如果是PDFs,Microsoft Word文档.ZIP文件或其它类型的数据,或许提供一个"Download"链接比较妥当. 在本节,我们看如何在GridView和D

Asp.Net中避免重复提交和弹出提示框的实例代码

前台代码: <asp:Button ID="Button1" runat="server" Text="打印" onclick="Button1_Click" OnClientClick="this.value='数据提交中--';this.disabled=true;" UseSubmitBehavior="False" /> 后台代码: public partial cl

在ASP.NET 2.0中操作数据之四十八:对SqlDataSource控件使用开放式并发

导言: 在前面的教程里,我们考察了如何为SqlDataSource控件添加插入.更新.删除功能.简而言之,就是为其nsertCommand, UpdateCommand和DeleteCommd属性赋以相应的INSERT,UPDATE和DELETESQL语句,并将相应的参数放置在<InsertParameters>, <UpdateParameters>和<DeleteParameters>标签里.我们可以手工书写这些代码,也可以通过在设置数据源向导里单击"高级