在 UpdatePanel 中使用 DropdownList 时向服务器发布水印答案

【问题标题】：Water mark posted to server when using DropdownList in UpdatePanel在 UpdatePanel 中使用 DropdownList 时向服务器发布水印
【发布时间】：2012-03-03 10:13:28
【问题描述】：

如果您将一个应用了 jQuery.watermark 插件的文本字段和一个将 AutoPostback 设置为 true 的 DropdownList 放置在 UpdatePanel 中，则当下拉列表更改时，水印不会从文本字段中清除。

来自文本字段的水印作为不正确的文本字段值发布到服务器。如果您不使用 UpdatePanel，则插件的表单提交代码会正确清除水印值。

据我所知，问题是为 DropdownList 生成的回发完全在 JavaScript 中完成，绕过了表单的提交事件处理程序，这是插件清除水印值的方式。各种ASP.NET AJAX JavaScript events 都是在帖子主体建成后被解雇的，所以我不能用它们来去除水印。有没有其他方法可以做到这一点？

这仅适用于不支持占位符属性的浏览器，尤其是 IE9 及更低版本。

我有raised this as a bug for the plugin here。

重现此的代码：


    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" />
    <div>
        Demonstration. 
        <br />
        <br />
        Note: This is only a problem for browsers that do not have have text field placeholder support. Most notabily Internet Explorer 9 and below.
        <ol>
            <li>The text field has a watermark 'wattery' applied to it</li>
            <li>The dropdown list is set to auto postback</li>
            <li>When you change the dropdown list the watermark is not removed and is posted to the server as the value of the text field</li>
            <li>When you click either the button or the link the watermark is removed as these actions trigger the 'beforeunload' event.</li>
        </ol>
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <asp:TextBox runat="server" ID="txt" />
                <asp:DropDownList runat="server" ID="ddl" AutoPostBack="true" 
                    onselectedindexchanged="ddl_SelectedIndexChanged">
                    <asp:ListItem Text="one" />
                    <asp:ListItem Text="two" />
                </asp:DropDownList>
                <asp:Button Text="Click me 1" runat="server" />
                <asp:LinkButton Text="Click me 2" runat="server" />
                <br />
                <br />

                Value from text field after postback = '<asp:Label Text="" runat="server" ID="lbl" />'
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" ></script>
    <script type="text/javascript" src="js/jquery.watermark.js" ></script>
    <script type="text/javascript">

        $().ready(function () {
            $('#<%=txt.ClientID %>').watermark("wattery");
        });

    </script>

protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
{
    lbl.Text = txt.Text;
}

【问题讨论】：

标签： jquery asp.net updatepanel webforms

【解决方案1】：

相当老的线程，但最近有这个问题。这是我想出来的。

$('#<%=Button1.ClientID%>').click(function () { 
                if (typeof("Page_ClientValidate") === "function") {
                    if (Page_ClientValidate()) {
                        $.watermark.hideAll();
                    }
                    else {
                        $.watermark.showAll();
                    }
                }
                else { $.watermark.hideAll(); }
});

注意：没有 100% 测试过，但应该可以使用。

【讨论】：