使用JQuery在TextBox上点击OnClick

时间:2011-04-20 18:47:03

标签: c# javascript jquery asp.net jquery-ui

我有一个文本框,在任何时候用户点击它,后面的代码中的函数需要被触发。这是JQuery:

    <script type="text/javascript">

      $("#txtName").click(function(){<%TextChanged();%>});

    </script>

这是Textbox UI:

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

这是我运行一些查询的TextChanged()函数背后的代码:

protected void TextChanged()
    {
        //Writing my query here!!!
    }

现在,此函数在Page_Load()中启动,而不是在txtName.Click中启动。为什么?我想在用户点击txtName时从JQ触发这个TextChanged()函数!

6 个答案:

答案 0 :(得分:2)

不久前你问过一个非常类似的问题。问题是如果没有一些相当粗略的陪审团操纵,这不会很好。每次在该文本框中更改文本时运行服务器端代码将提供糟糕的用户体验,因为每次文本更改时页面都将回发。因此,每当用户点击一个键,繁荣,页面消失,重新出现,然后如果你没有设置焦点,他们必须再次找到文本框。

你真的需要通过JavaScript / jQuery处理你在客户端上做的任何事情。你的最终目标是什么?当文本发生变化时你想要发生什么?

答案 1 :(得分:0)

第一次拉页时会执行服务器端代码<%TextChanged();%>。 onclick函数在客户端触发,在服务器端无法执行任何操作。你需要以某种方式使用回发。使用页面方法,Web服务等通过jQuery或ASP.NET的AJAX使用AJAX。

这是一个简短的演示来解释发生了什么。创建一个aspx页面并将其包含在其中

<html>
    <body>

        <script language="javascript">
        function ShowTime()
        {
            alert('<%= DateTime.Now.ToString() %>');
        }
        </script>

        <form runat="server">

            <asp:TextBox runat="server" onclick="ShowTime();" Text="Click Me"></asp:TextBox>

        </form>

    </body>
</html>

然后在浏览器中将其拉出并单击文本框几次。您应该每次都看到相同的警报。检查呈现的HTML(查看源代码)

<html>
    <body>

        <script language="javascript">
        function ShowTime()
        {
            alert('4/20/2011 12:06:09 PM');
        }
        </script>

        <form method="post" action="Test1.aspx" id="ctl00">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJLTU2Mzk2MTc5ZGTwB2Ph3lGOb1/uUI+lbZ5QtQQT2kk+dPbtprtjMpSZBg==" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgK946tbAqLAiY0L0tc9fkAJ/FKqRuxYl8nrpx8irMZ96Kzc8GjJhrrhP9A=" />

</div>

            <input name="ctl01" type="text" value="Click Me" onclick="ShowTime();" />

        </form>

    </body>
</html>

正如您所看到的,服务器端代码DateTime.Now.ToString()已经执行,并且它已将执行时的时间发送到客户端浏览器。现在,无论客户端功能执行多少次,同一时间都会被警告,因为客户端和服务器之间没有通信。

答案 2 :(得分:0)

如果你想在客户端处理click事件,你应该在中实现代码 JQuery函数不在服务器端

答案 3 :(得分:0)

首先,它并不像那样 - 你不能在没有回复或使用AJAX的情况下从前端发起服务器事件。其次,.NET将自己的服务器生成的ID分配给WebForms元素,因此您根本不会选择txtName元素。尝试使用CssClass属性并使用$(".myElement").click(function() { });

之类的内容

如果您希望能够异步使用前端实例化事件来触发服务器事件,最好的办法是使用AJAX调用。否则,只需回复。

答案 4 :(得分:0)

我不是asp的专家,但这种服务的工作方式类似。当获得对页面的请求时,服务器处理它并从您的asp文件构造结果html。这个html由浏览器处理。所以当你把&lt;%TextChanged();%&gt;在你的asp文件上你的服务器执行并发送相应的结果。实际上你的jquery脚本在浏览器上看起来像这样

$("#txtName").click(function(){});

为此,您需要向服务器发送新请求以在服务器上执行TextChanged方法并返回有效响应(例如xml),以便浏览器或在本例中您的jquery脚本可以处理它并显示你想要的信息。

答案 5 :(得分:0)

为什么不使用AutoPostBack功能?

<asp:TextBox ID="txtName" 
             runat="server" 
             AutoPostBack="true" 
             OnTextChanged="TextChanged" />