#javascript #asp.net #custom-controls
#javascript #asp.net #пользовательские элементы управления
Вопрос:
Существует пользовательский asp.net элемент управления с именем PhoneTextBox2. Он использует ext.net библиотека, но это не имеет значения.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PhoneTextBox2.ascx.cs"
Inherits="Loginet.Web.Controls.PhoneTextBox2" %>
<script type="text/javascript">
var <%=ClientID%>_getNumber = function () {
return alert( 'some value');
}
</script>
<ext:CompositeField runat="server" ID="eCompositeField">
<Items>
<ext:Label ID="PhoneBoxTitle" runat="server" />
</Items>
</ext:CompositeField>
На странице aspx я вызываю метод javascript PhoneTextBox2 таким образом
<uc:PhoneTextBox2 runat="server" ID="txtb" />
<ext:Button Text="test" runat="server">
<Listeners>
<Click Handler="#{txtb}_getNumber();"></Click>
</Listeners>
</ext:Button>
#{txtb}_getNumber() это уникальное имя функции javascript, и #{txtb} — это уникальное имя функции PhoneTextBox2 .
Что я могу сделать, чтобы вызвать getNumber по точке?
<Click Handler="#{txtb}.getNumber();">
Обновить:
public partial class PhoneTextBox2 : System.Web.UI.UserControl {
/// <summary>
/// Допускаются ли, чтобы все поля были пустыми
/// True - Допускаются. Используется тогда, когда данные из этого контрола необязательные.
/// </summary>
public bool EnableEmptyValues { get; set; }
public string Title { get; set; }
protected void Page_Load(object sender, EventArgs e) {
txtCountryCode.AllowBlank = EnableEmptyValues;
txtCityCode.AllowBlank = EnableEmptyValues;
txtMainPhoneNumber.AllowBlank = EnableEmptyValues;
if (!IsPostBack amp;amp; !Ext.Net.ExtNet.IsAjaxRequest) {
PhoneBoxTitle.Text = Title;
if (!string.IsNullOrWhiteSpace(DataSource)) {
string[] phoneNumberArray = DataSource.Split('-');
if (phoneNumberArray.Length >= _standartDimension) {
txtCountryCode.Text = phoneNumberArray[0];
if (txtCountryCode.Text[0] == _plus) {
txtCountryCode.Text = txtCountryCode.Text.Remove(0, 1);
}
txtCityCode.Text = phoneNumberArray[1];
txtMainPhoneNumber.Text = phoneNumberArray[2];
if (phoneNumberArray.Length >= _extraDimension) {
txtExtraPhoneNumber.Text = phoneNumberArray[3];
}
}
}
}
}
public string DataSource { get; set; }
private const string _phoneNumberMask = " {0}-{1}-{2}-{3}";
private const char _plus = ' ';
private const int _standartDimension = 3;
private const int _extraDimension = 4;
public string Number {
get {
if (!string.IsNullOrWhiteSpace(txtCountryCode.Text) amp;amp;
!string.IsNullOrWhiteSpace(txtCityCode.Text) amp;amp;
!string.IsNullOrWhiteSpace(txtMainPhoneNumber.Text)) {
//Если добавочный номер пустой, то возвратить значения без него
if (!string.IsNullOrWhiteSpace(txtExtraPhoneNumber.Text))
return string.Format(_phoneNumberMask, txtCountryCode.Text, txtCityCode.Text, txtMainPhoneNumber.Text, txtExtraPhoneNumber.Text);
string phoneNumber = string.Format(_phoneNumberMask, txtCountryCode.Text, txtCityCode.Text, txtMainPhoneNumber.Text, string.Empty);
return phoneNumber.Remove(phoneNumber.Length - 1);
}
return string.Empty;
}
}
public bool IsEmpty {
get {
return (string.IsNullOrWhiteSpace(txtCountryCode.Text) amp;amp;
string.IsNullOrWhiteSpace(txtCityCode.Text) amp;amp;
string.IsNullOrWhiteSpace(txtMainPhoneNumber.Text) amp;amp;
string.IsNullOrWhiteSpace(txtMainPhoneNumber.Text));
}
}
/// <summary>
/// Validate
/// </summary>
public void Validate() {
if (EnableEmptyValues) {
if (!IsEmpty amp;amp; Number == string.Empty)
MarkInvalid();
else
MarkValid();
}
else {
if (IsEmpty)
MarkInvalid();
else {
if (Number == string.Empty)
MarkInvalid();
else
MarkValid();
}
}
}
public void MarkInvalid(string msg = null) {
txtCountryCode.MarkInvalid(msg);
txtCityCode.MarkInvalid(msg);
txtMainPhoneNumber.MarkInvalid(msg);
txtExtraPhoneNumber.MarkInvalid(msg);
}
public void MarkValid() {
txtCountryCode.MarkAsValid();
txtCityCode.MarkAsValid();
txtMainPhoneNumber.MarkAsValid();
txtExtraPhoneNumber.MarkAsValid();
}
public const string InvalidCheckBoxCssStyle = "border-color:#C30; background: url('/extjs/resources/images/default/grid/invalid_line-gif/ext.axd') repeat-x scroll center bottom white; width: 40px !important;";
public const string ValidCheckBoxCssStyle = "border-color:#000; background: none repeat scroll 0 0 transparent;";
}
Обратите внимание, что в моем случае я не могу использовать свойство на стороне сервера Number из-за особенности ext.net . Поэтому мне нужно использовать javascript для получения Number .
Ответ №1:
Handler указывает на пользовательский метод / делегат .NET, и в их именах не может быть знаков точки.
Вы можете расширить любой тип объекта, например:
String.prototype.getNumber = function() {
alert('here: ' this);
};
и затем
'txtElement'.getNumber();
таким образом, вы можете изменить свой код на
<Click Handler="'{txtb}'.getNumber();">
Комментарии:
1. Обработчик указывает на пользовательскую функцию javascript или стандартную ext.net функция javascript .
2. должен быть какой-то код, я не понимаю, почему
#там знак хэша… :-/3. #{txtb} используется в ext.net . Это то же самое, что и <%=txtb.ClientID%>
4. Могу ли я расширить PhoneTextBox2? Это что-то вроде этого
PhoneTextBox2.prototype.getNumber = function() { alert('here: ' this); };5. при расширении prototype вам просто нужно поместить код один раз, обычно в файл javascript
plugin.js, который вызывается на главной странице. Я вижу, что вы не знаете, что делает мой код … если вы не можете указать на исходный код элемента управления, я не смогу вам помочь.
Ответ №2:
Нет необходимости назначать динамическое имя вашей функции javascript. Просто зарегистрируйте метод при создании первого элемента управления и проверьте, зарегистрирован ли он уже при создании следующего экземпляра элемента управления.
Регистрация блока скрипта:
if (!Page.ClientScript.IsClientScriptBlockRegistered("getNumberScript"))
Page.ClientScript.RegisterClientScriptBlock(GetType(), "getNumberScript", "getNumber = function () { return alert( 'some value'); }", true);
Регистрация включаемого файла (внешний js):
if (!Page.ClientScript.IsClientScriptIncludeRegistered("getNumberScript"))
Page.ClientScript.RegisterClientScriptInclude("getNumberScript", "getNumberScript.js");