在頁面加載時不可見的用戶控件的客戶端驗證

Question

我創建了一個具有一些自定義客戶端驗證的用戶控件。 我通過RegisterStartupScript嵌入Javascript，並通過RegisterExpandoAttribute將信息傳遞給驗證。 但是，用戶控件在PageLoad上不可見，並且當我使用document.getElementById時，會得到空值。

這是我當前的代碼：

    public void Page_Load(object sender, EventArgs e) 
    { 
            ClientScriptManager cs = Page.ClientScript; 
            Type cstype = this.GetType(); 
            if (!cs.IsStartupScriptRegistered(cstype, "ValidatorType")) 
            { 
                String DateValidator; 
                DateValidator = "<script type=\"text/javascript\">\n"; 
                DateValidator += "function ValidateDate(source, args) {\n"; 
                DateValidator += "   var ddDay = document.getElementById(source.day);\n"; 
                DateValidator += "   var day = ddDay.selectedIndex;\n"; 
                DateValidator += "   var ddMonth = document.getElementById(source.month);\n"; 
                DateValidator += "   var month = ddMonth.selectedIndex;\n"; 
                DateValidator += "   var ddYear = document.getElementById(source.year);\n"; 
                DateValidator += "   var year = ddYear.selectedIndex;\n"; 
                DateValidator += "   if (day == 0 || month == 0 || year == 0)\n"; 
                DateValidator += "      args.IsValid = false;\n"; 
                DateValidator += "   else\n"; 
                DateValidator += "      args.IsValid = true;\n"; 
                DateValidator += "   }\n"; 
                DateValidator += "</script>"; 
                cs.RegisterStartupScript(cstype, "ValidatorType", DateValidator); 
            } 

            cs.RegisterExpandoAttribute(reqDueDate.ClientID, "month", ddMonth.ClientID); 
            cs.RegisterExpandoAttribute(reqDueDate.ClientID, "day", ddDay.ClientID, false); 
            cs.RegisterExpandoAttribute(reqDueDate.ClientID, "year", ddYear.ClientID, false); 
    }

我收到的錯誤是：

Uncaught TypeError: Cannot set property 'month' of null 
Uncaught TypeError: Cannot read property 'selectedIndex' of null 

Answer 1

服務器端不可見的控件不會出現在服務器生成的客戶端的html中。 因此它應該為null。 使用javascript使其不可見，並在需要時使用javascript使其再次可見。

該腳本應在控件上呈現后執行。

隱藏客戶端上的服務器控件

document.getElementById('<%= pnlMail.ClientID %>').style.display = 'none'; 

在客戶端隱藏HTML控件

document.getElementById('htmlControlID').style.display = 'none'; 

Answer 2

更“服務器端”的方法是在服務器上設置值，那么您就不必依賴javascript了。 ASCX：

    <asp:TextBox runat="server" ID="uxToHide" />

后台代碼：

    protected void Page_Load(object sender, EventArgs e)
    {
        uxToHide.Style.Add("display", "none");
    }

使用PlaceHolders會增加一些復雜性，但還算不錯。 ASCX：

    <asp:PlaceHolder ID="uxToHide" runat="server" />

后台代碼：

    protected void Page_Load(object sender, EventArgs e)
    {
        TextBox tb = new TextBox();
        tb.Style["display"] = "none";
        uxToHide.Controls.Add(tb);

        ShowChildren(uxToHide);
    }

    public static void HideChildren(Control container)
    {
        if (container == null || container.Controls == null || container.Controls.Count == 0)
        {
            return;
        }
        foreach (Control c in container.Controls)
        {
            if (c is WebControl)
            {
                ((WebControl)c).Style["display"] = "none";
            }
            HideChildren(c);
        }
    }

    public static void ShowChildren(Control container)
    {
        if (container == null || container.Controls == null || container.Controls.Count == 0)
        {
            return;
        }
        foreach (Control c in container.Controls)
        {
            if (c is WebControl)
            {
                WebControl wc = (WebControl)c;
                if (wc.Style["display"] == "none")
                {
                    wc.Style.Remove("display");
                }
            }
            ShowChildren(c);
        }
    }