如何扩展 Telerik asp ajax 控件

Question

我不得不为一个库扩展我的 Telerik ajax 控件。后端也是前端。 下面是我的教程，我是如何做到的。如果还有其他方法，请也发布它们。

Answer 1

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

Telerik UI for ASP.NET AJAX 版本：2014Q1
css 文件夹：~/css
css sprite 文件夹：~/css/sprites
脚本文件夹：~/scripts

提示： 嵌入资源：https://stackoverflow.com/a/39368856/11259733

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

1) 创建一个扩展类并使其字段可用

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 必须作为 webresource 包含：

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