如何使用javascript获取Web用户控件文本框值

时间:2013-06-26 07:06:06

标签: c# javascript asp.net ajaxcontroltoolkit web-user-controls

我正在使用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)
{

}

我可以使用服务器端代码获取控件值。 现在我需要从javascript访问text-box(txtDate)值和MaskedEditValidator(MaskedEditV_dt)inerHtml。 我怎么能这样做。

编辑-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 个答案:

答案 0 :(得分:1)

ASP.NET加载显示UserControl,它只呈现UserControl的内容。 usercontrol中的控件将使用ID $content_UControlName_Control呈现。您可以在渲染页面后进行检查。您可以使用Javascript(例如document.getElementById(content_UControlName_Control)

)中的ID来访问控制器

答案 1 :(得分:0)

最后我得到了回答。感谢Nag

点击按钮

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

最后,我可以使用java-script

访问calander控件的文本框值