javascript 不适用于 asp.net 内容页面答案

【问题标题】：javascript is not working with asp.net content pagejavascript 不适用于 asp.net 内容页面
【发布时间】：2010-03-04 20:45:16
【问题描述】：

我有java脚本代码来设置ajax控件的一些属性。

代码工作正常如果我把它放在 asp.net 页面中，但是当我使用内容页面并在部分代码中发布代码时将无法工作，这会改变 ajax 控件属性的值。

我的页面有文本框、复选框、MaskedEditExtender 和 MaskedEditValidator。当用户选中该框时，掩码属性和其他一些属性应更改。

代码运行正常，但内容页面不行。

这是我在 asp.net 页面上的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>


    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>  
    <!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 id="Head1" runat="server">  
        <title></title>  
   </head>  
    <body>  
       <form id="form1" runat="server">  
       <div>  
           <asp:ScriptManager ID="ScriptManager1" runat="server" />  
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
               <ContentTemplate>  
  <asp:TextBox runat="server" ID="TextBox4" Width="200" />  
                   <cc1:MaskedEditExtender ID="MaskedEditExtender6" runat="server" Mask="999"  
                       DisplayMoney="None" MaskType="number" TargetControlID="TextBox4" ClearMaskOnLostFocus="true"  
                       InputDirection="RightToLeft" AutoComplete="False">  
                   </cc1:MaskedEditExtender>  
                   <cc1:MaskedEditValidator ID="MaskedEditValidator6" runat="server" ControlExtender="MaskedEditExtender6"  
                       ControlToValidate="TextBox4" InvalidValueMessage="Invalid data" IsValidEmpty="True"  
                       TooltipMessage="Numbers Only">  
                   </cc1:MaskedEditValidator>  
                   <asp:CheckBox ID="CheckBox1" runat="server" onclick="CheckChange(this)" AutoPostBack="false" />  
  </ContentTemplate>  
           </asp:UpdatePanel>  

  <script type="text/javascript">  
  function CheckChange(sender) {  
  if (sender.checked == true) {  
  $find("MaskedEditExtender6").set_Mask("??????");  
  $find("MaskedEditExtender6")._convertMask();  
  $find("MaskedEditExtender6").set_MaskType(AjaxControlToolkit.MaskedEditType.None);  
  MaskedEditValidator6.TooltipMessage = "Any character!"  
  } else {  
  $find("MaskedEditExtender6").set_Mask("999");  
  $find("MaskedEditExtender6")._convertMask();  
  $find("MaskedEditExtender6").set_MaskType(AjaxControlToolkit.MaskedEditType.Number);  
  MaskedEditValidator6.TooltipMessage = "Numbers Only";  
  }  
  }  

  </script>  
  </div>  
  </form>  
  </body>  
  .</html>

.................................................. ........... 这是我来自内容页面的代码 ..................................................... ....

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <script type="text/javascript">
function CheckChange(sender) {
    if (sender.checked == true) {
        alert("yes");
        $find("MaskedEditExtender6").set_Mask("??????");
        $find("MaskedEditExtender6")._convertMask();
        $find("MaskedEditExtender6").set_MaskType(AjaxControlToolkit.MaskedEditType.None);
        MaskedEditValidator6.TooltipMessage = "Any character!"
    } else {
    alert("no");
        $find("MaskedEditExtender6").set_Mask("999");
        $find("MaskedEditExtender6")._convertMask();
        $find("MaskedEditExtender6").set_MaskType(AjaxControlToolkit.MaskedEditType.Number);
        MaskedEditValidator6.TooltipMessage = "Numbers Only";
    }
}  
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
               <ContentTemplate>  
  <asp:TextBox runat="server" ID="TextBox4" Width="200" /> 

                   <cc1:MaskedEditExtender ID="MaskedEditExtender6" runat="server" Mask="999"  
                       DisplayMoney="None" MaskType="number" TargetControlID="TextBox4" ClearMaskOnLostFocus="true"  
                       InputDirection="RightToLeft" AutoComplete="False">  
                   </cc1:MaskedEditExtender>  
                   <cc1:MaskedEditValidator ID="MaskedEditValidator6" runat="server" ControlExtender="MaskedEditExtender6"  
                       ControlToValidate="TextBox4" InvalidValueMessage="Invalid data" IsValidEmpty="True"  
                       TooltipMessage="Numbers Only">  
                   </cc1:MaskedEditValidator>  
                   <asp:CheckBox ID="CheckBox1" runat="server" onclick="CheckChange(this)" AutoPostBack="false" />  
  </ContentTemplate>  
           </asp:UpdatePanel>  

</asp:Content>

.................................. 这是我的母版页代码 ....................................

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Master.master.cs" Inherits="Master" %>

<!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 id="Head1" runat="server">
    <link href="Style.css" rel="stylesheet" type="text/css" />
    <title>I.M.A.M</title>
    <asp:ContentPlaceHolder ID="head" runat="server">

        <script src="js/jquery-1.4.1.js" type="text/javascript"></script>

        <script src="js/jquery.maskedinput-1.2.2.js" type="text/javascript"></script>
    </asp:ContentPlaceHolder>

    <style type="text/css">
        .style17
        {
            height: 43px;
        }
        .style18
        {
            width: 577px;
            height: 43px;
        }
        .style19
        {
            height: 387px;
        }
        .style20
        {
            width: 577px;
            height: 387px;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:ScriptManager ID="ScriptManager1" runat="server" />
    </div>
    <div>

        <table class="style1" frame="vSides">
            <tr>
                <td class="style17" bgcolor="#FFFF99">
                </td>
                <td class="style18" style="">
                    <img alt="" src="Images/banner1.gif" 
                        style="width: 950px; height: 89px; margin-bottom: 0px;" /></td>
                <td class="style17" bgcolor="#FFFF99">
                </td>
            </tr>
            <tr>
                <td class="style15">
                </td>
                <td class="style16" bgcolor="#FFFF99">
                    <asp:Menu ID="Menu1" runat="server" Width="44px" Orientation="Horizontal" 
                        DataSourceID="SiteMapDataSource1" BackColor="#FFFBD6" 
                        DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" 
                        ForeColor="#990000" StaticDisplayLevels="2" StaticSubMenuIndent="10px">
                        <StaticMenuStyle BorderStyle="Dotted" />
                        <StaticSelectedStyle BackColor="#FFCC66" />
                        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                        <DynamicHoverStyle BackColor="#990000" ForeColor="White" />
                        <DynamicMenuStyle BackColor="#FFFBD6" />
                        <DynamicItemTemplate>
                            <%# Eval("Text") %>
                        </DynamicItemTemplate>
                        <DynamicSelectedStyle BackColor="#FFCC66" />
                        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                        <StaticHoverStyle BackColor="#990000" ForeColor="White" />
                        <StaticItemTemplate>
                        <%# Eval("Text") %>
                        </StaticItemTemplate>
                    </asp:Menu>

                </td>
                <td class="style15">
                </td>
            </tr>
            <tr>
                <td class="style19" bgcolor="#FFFF99">
                </td>
                <td class="style20">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                        <p style="height: 667px; width: 947px">
                            &nbsp;</p>

                    </asp:ContentPlaceHolder>
                </td>
                <td class="style19" bgcolor="#FFFF99">
                </td>
            </tr>
            <tr>
                <td class="style7">
                </td>
                <td class="style8" style="" bgcolor="#FFFF99">
                    Copyright&nbsp; Imam Mahdi Association of Marjeya</td>
                <td class="style7">
                </td>
            </tr>
        </table>

    </div>
     <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    </form>
</body>
</html>

【问题讨论】：

标签： javascript asp.net-ajax

【解决方案1】：

如果您在 Content Page 中使用任何 Extender，$find 方法的参数应该访问 Extender 的 BehaviorID。

将 BehaviorID 属性添加到 MaskedEditExtender：

       <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender6" BehaviorID="MaskedEditExtender6" runat="server" Mask="999" 
            DisplayMoney="None" MaskType="number" TargetControlID="TextBox4" ClearMaskOnLostFocus="true" 
            InputDirection="RightToLeft" AutoComplete="False"> 
        </ajaxToolkit:MaskedEditExtender>

【讨论】：

【解决方案2】：

要更改 MAskEditExtender 的掩码值，必须使用

$find('ID of element').set_Mask("new value of mask");
$find('ID of element')._convertMask();

或

$find('ID of element')._MaskConv = "new value for mask";

【讨论】：