如何扩展 telerik asp ajax 控件

Question

我不得不扩展我的 telerik ajax 库控件。后台如此，前台也如此。以下是我的教程，我是如何做到的。如果还有其他方法请post他们。

Answer 1

这是一个扩展 telerik 控件的教程。

Telerik UI 用于 ASP.NET AJAX 版本：2014Q1
css 文件夹：~/css
css 精灵文件夹：~/css/sprites
脚本文件夹：~/scripts

提示： 嵌入资源：

目标：允许视觉失效的 RadDropDownList 扩展 → 扩展控件的库 (dll)

1) 创建扩展 class 并使其字段可用

MyDropDownList.cs（图书馆）：

namespace myLibrary {
 public class MyDropDownList: Telerik.Web.UI.RadDropDownList {
  private bool _isValid = true;
  private string _errorMessage = "";
  private string _toolTip = "";

  public bool IsValid {
   get {
    return _isValid;
   }
   set {
    _isValid = value;
   }
  }

  public string ErrorMessage {
   get {
    return _errorMessage;
   }
   set {
    _errorMessage = value;
   }
  }

  public override string ToolTip {
   get {
    return base.ToolTip;
   }
   set {
    _toolTip = value;
    base.ToolTip = value;
   }
  }
 }
}

重新编译您的库并在您的项目中设置引用 (https://docs.microsoft.com/en-us/visualstudio/ide/how-to-add-or-remove-references-by-using-the-reference-manager?view=vs-2019)。然后将其包含到您的项目中。

Web.config（项目）： 添加

<configuration>
   <system.web>
      <pages>
         <controls>
            <add tagPrefix="mp" namespace="myProject" assembly="myProject" />
         </controls>
      </pages>
   </system.web>
</configuration>

Site.aspx（项目）：

<mp:OwnDropDownList runat="server" ErrorMessage="Error" ToolTip="tooltip">
   //.... some RadDropDownList properties (like Items)
</mp:OwnDropDownList>

2) 后端函数

我们想要更改下拉菜单的外观（如无效文本框）并将工具提示更改为其他文本。

style.css（图书馆）：

.riErrorDropDown > .rddlInner {
    background-color: white !important;
    border-color: orangered !important;
    background-image: none !important;
}

    .riErrorDropDown > .rddlInner > .rddlFakeInput {
        border-color: #d51923;
        background: transparent 100% -299px no-repeat url('<%=WebResource("myLibrary.css.sprites.ddAndWarnSprite.png")%>') !important;
        color: #d51923;
    }

myLibrary.css.sprites.ddAndWarnSprite.png 是 Telerik.Web.UI.Skins.Default.Input.sprite.gif

现在我们必须设置样式
更改 MyDropDownList.cs（库）：

public bool IsValid {
 set {
  // set Css and tooltip 
  if (value) {
   base.ToolTip = _toolTip;
   this.CssClass = this.CssClass.Replace(" riErrorDropDown", "");
  } else {
   base.ToolTip = _errorMessage;
   if (!this.CssClass.Contains("riErrorDropDown"))
    this.CssClass += " riErrorDropDown";
  }

  //set the value
  _isValid = value;
 }
}

现在我们必须定义我们的 WebResources
在AssemblyInfo.cs（库）中加入：

//Css 
[assembly: WebResource("myLibrary.css.style.css", "text/css", PerformSubstitution = true)]

//Css related pictures
[assembly: WebResource("myLibrary.css.sprites.ddAndWarnSprite.png", "img/png")]

最终我们必须将 css 包含到我们的项目中。
在正文中添加Site.Master

<telerik:RadStyleSheetManager runat="server" ID="RadStyleSheetManager1">
   <StyleSheets>
      <telerik:StyleSheetReference Assembly="myLibrary" Name="myLibrary.css.style.css" />
   </StyleSheets>
</telerik:RadStyleSheetManager>

3) 前端函数

我们必须创建一个客户端等同于我们的 MyDropDownList.cs

MyDropDownList.js

Type.registerNamespace("myLibrary");

String.prototype.replaceAll = function (find, replace) {
    var str = this;
    return str.replace(new RegExp(find.replace(/[-\/\^$*+?.()|[\]{}]/g, '\$&'), 'g'), replace);
};

//Class Constructor
myLibrary.MyDropDownList = function (element) {
    //call base constructor 
    myLibrary.MyDropDownList.initializeBase(this, [element]);

    //control fields

    //control fields from server side 
    this._invalid = null;
    this._invalidText = null;
    this._validText = null;


}

//Class Prototype
myLibrary.MyDropDownList.prototype =
    {
        // Release resources before control is disposed.
        dispose: function () {
            myLibrary.MyDropDownList.callBaseMethod(this, 'dispose');
        },

        // initialize resources
        initialize: function () {
            myLibrary.MyDropDownList.callBaseMethod(this, 'initialize');
        },

        /*************************
         ***** child functions  **
         *************************/

        set_invalid: function (bool) {
            this._invalid = bool;
            var css = "riErrorDropDown";
            var element = this._element;
            if (bool) {
                element.className += " " + css;
                element.title = this._invalidText;
            } else {
                element.className = element.className.replaceAll(" " + css, "");
                element.title = this._validText;
            }
        }
    }

// register a class with its base 
myLibrary.MyDropDownList.registerClass("myLibrary.MyDropDownList", Telerik.Web.UI.RadDropDownList);

//Notify Scriptmanager that script is loaded 
if (typeof (Sys) !== 'undefined') {
    Sys.Application.notifyScriptLoaded();
}

此 javascript 必须作为网络资源包括在内：

加入AssemblyInfo.cs（图书馆）：

//JS 
[assembly: WebResource("myLibrary.scripts.MyDropDownList.js", "text/javascript")]

现在我们必须将后端与前端连接起来。
MyDropDownList.cs（图书馆）的变化：

namespace myLibrary {
  [ClientScriptResource("myLibrary.MyDropDownList", "myLibrary.scripts.MyDropDownList.js")]
  public class MyDropDownList: Telerik.Web.UI.RadDropDownList { 
    //code

    // Set frontend properties
    protected override void DescribeComponent(IScriptDescriptor descriptor) {

      // Set client side fields
      descriptor.AddProperty("_invalid", !_isValid);
      descriptor.AddProperty("_invalidText", _errorMessage);
      descriptor.AddProperty("_validText", _toolTip);

      base.DescribeComponent(descriptor);
    }
  }
}

如何扩展 telerik asp ajax 控件

How to extend a telerik asp ajax control

asp.net

telerik

asp.net-ajax

1) 创建扩展 class 并使其字段可用

2) 后端函数

3) 前端函数