在UpdatePanel中使用DropdownList时,水印标记发布到服务器

时间:2012-03-03 10:13:28

标签: jquery asp.net updatepanel webforms

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

文本字段中的水印作为文本字段的值不正确地发布到服务器。如果您不使用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;
}

1 个答案:

答案 0 :(得分:0)

很老的帖子但最近有这个问题。这是我想出来的东西。

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

注意:未经过100%测试,但该行的某些内容应该有效。