Как получить значение текстового поля элемента управления пользователя с помощью JavaScript

Я разрабатываю пользовательский элемент управления календаря с использованием Ajax.

Код контроля пользователя

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" ClientIDMode="Predictable" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxControl" %>
<link rel="stylesheet" href="GridViewCSSThemes/YahooGridView.css" type="text/css" media="screen" />
<div style="position:relative;border:none;">
    <asp:TextBox ID="txtDate" MaxLength="10" ToolTip="DD/MM/YYYY" Width="100"
        CssClass="tb10" runat="server">
    </asp:TextBox>
    <asp:ImageButton ImageUrl="~/GridViewCSSThemes/Images/Calendar_scheduleHS.png" ID="imgCalender" runat="Server"
        BorderWidth="0" ImageAlign="absmiddle" />
    <ajaxControl:CalendarExtender ID="AjaxCalenderCtrl" runat="server" Format="dd/MM/yyyy" PopupPosition ="TopLeft" 
        TargetControlID="txtDate" CssClass="red" FirstDayOfWeek="Sunday" PopupButtonID="imgCalender">
    </ajaxControl:CalendarExtender>
    <ajaxControl:TextBoxWatermarkExtender WatermarkCssClass="tb10" ID="txtWaterMarkDate"
        runat="server" WatermarkText="DD/MM/YYYY" TargetControlID="txtDate">
    </ajaxControl:TextBoxWatermarkExtender>
    <ajaxToolkit:MaskedEditExtender ID="MaskedEdit_dt" runat="server"
        TargetControlID="txtDate"
        Mask="99/99/9999"
        MessageValidatorTip="true"
        OnFocusCssClass="MaskedEditFocus"
        OnInvalidCssClass="MaskedEditError"
        MaskType="Date"
        AcceptAMPM="true"
        AcceptNegative="Left"
        ErrorTooltipEnabled="True" />
    <ajaxToolkit:MaskedEditValidator ID="MaskedEditV_dt" runat="server"
        ControlExtender="MaskedEdit_dt"
        ControlToValidate="txtDate"
        EmptyValueMessage="Date is required"
        InvalidValueMessage="Date is invalid"
        Display="Dynamic"
        TooltipMessage="Input a date"
        EmptyValueBlurredText="Date is required"
        InvalidValueBlurredMessage="Date is invalid"
        IsValidEmpty="false"
        ValidationGroup="MKE" />
    <%--<asp:RegularExpressionValidator ID="regexpvalEndDateEdit" ErrorMessage="!" ValidationExpression="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d"
        ControlToValidate="txtDate" runat="server"></asp:RegularExpressionValidator>--%>
</div>

Код за пользовательским контролем

internal string _DValue;
public string DValue
{
    get
    {
        if (_DValue == "")
        {
            _DValue = txtDate.Text;
        }
        else
        {
            txtDate.Text = _DValue;
        }
        return _DValue;
    }
    set { _DValue = value; }
}
public string IdClientId
{
    get { return this.ClientID; }
}
protected void Page_Load(object sender, EventArgs e)
{

}

Я могу получить значение элемента управления, используя код на стороне сервера. Теперь мне нужно получить доступ к значению текстового поля (txtDate) и MaskedEditValidator(MaskedEditV_dt) inerHtml из JavaScript. Как я могу это сделать.

Edit-1

Пользовательский контроль на странице aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CustomControlTest2.aspx.cs" Inherits="CustomControlTest2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxControl" %>
<%@ Register TagPrefix="uc1" TagName="UCCalender" Src="~/WebUserControl.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>User Control Test</title>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="true" />
<div>
    <table>
        <tr>
            <td>
                <uc1:UCCalender ID="UCCalStartDate" runat="server" DValue="" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnExe" runat="server" Text="Submit" onclick="btnExe_Click" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblMsg" runat="server" Text="Label"></asp:Label>
            </td>
        </tr>
    </table>
</div>
</form>

Код позади

protected void btnExe_Click(object sender, EventArgs e)
{
    lblMsg.Text = UCCalStartDate.DValue;
}
Источник

2 ответа

Решение

ASP.NET загружается для отображения UserControl, он отображает ТОЛЬКО содержимое UserControl. Элементы управления в usercontrol будут отображаться с идентификатором как $content_UControlName_Control, Вы можете проверить это после рендеринга страницы. Вы можете получить доступ к контролю, используя этот идентификатор из Javascript, как document.getElementById(content_UControlName_Control),

Источник

Наконец я получил ответ. Благодаря Наг

По нажатию кнопки

<asp:Button ID="btnExe" runat="server" Text="Submit" OnClientClick="getValue('UCCalStartDate_txtDate','UCCalStartDate_MaskedEditV_dt');" onclick="btnExe_Click" />

Javascript

function getValue(id,msk) {
        alert(document.getElementById(id).value);
        alert(document.getElementById(msk).innerHTML);
    }

Наконец, я могу получить доступ к значению текстового поля элемента управления calander, используя java-скрипт

Источник
Другие вопросы по тегам