2011-04-20 48 views
2

我有一个文本框,其中任何时候用户点击它后面的代码中的功能需要被解雇。这里是JQuery的:使用jQuery触发OnClick TextBox

<script type="text/javascript"> 

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

    </script> 

这里是文本框UI:

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

这里是框TextChanged()函数中,我运行某些查询的后台代码:

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

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

+0

我在这里没有看到任何Ajax;你想要客户端文本框点击执行服务器端代码? – Tejs 2011-04-20 18:51:07

+0

是的...这就是我想要的! – 2011-04-20 18:54:12

+0

您需要使用一些ajax,然后从服务器提供响应。我建议ajax并阅读下面的一些答案。 – Tejs 2011-04-20 18:55:56

回答

2

你在不久前问过一个类似的问题。问题在于,如果没有一些相当粗糙的陪审团操纵,这是行不通的。每次在文本框中更改文本时运行服务器端代码都会导致糟糕的用户体验,因为每次文本发生更改时页面都会回发。所以每次用户点击一个关键点时,页面消失,重新出现,然后如果不设置焦点,他们必须再次找到文本框。

您确实需要处理您通过JavaScript/jQuery在客户端执行的任何操作。你最终的目标是什么?当文字被改变时你想要发生什么?

+0

我实际上正在运行Linq2Sql,并从该查询我填充2另一个文本框。所以我猜测这会很难在客户端脚本或使用jQuery! – 2011-04-20 18:55:55

+0

不是。您需要按照其他人的建议来做:使用AJAX。基本上,您需要设置一个可以通过jQuery调用的Web服务。这将使您能够在不回发的情况下处理文本框更改,因为调用Web服务的jQuery将处理所有交互需求而不需要回发。 它会是这样的: – 2011-04-20 19:00:27

+0

1.文本框改变 2. jQuery的捕获更改事件 3. jQuery的触发关闭一个AJAX请求发送到Web服务,文本框的值 4的web服务,做它的处理并创建返回值 5. jQuery从服务接收值并根据需要填充其他文本框。 – 2011-04-20 19:00:50

0

服务器端代码<%TextChanged();%>在第一次拉页时被执行。 onclick函数在客户端触发,在服务器端无法做任何事情。您需要以某种方式使用回发。使用AJAX通过jQuery或ASP.NET的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()已经执行,它已发送的时间,在执行客户端浏览器的时刻。现在无论执行多少次客户端功能,都会提醒同一时间,因为客户端和服务器之间没有进行通信。

+0

是的,我想用WebServices来做到这一点。我怎样才能做到这一点?任何链接...请! – 2011-04-20 18:56:59

+0

从页面方法开始,然后转到Web服务。 – 2011-04-20 19:11:31

0

如果要处理在客户端的单击事件,应实现不是在服务器端

0

首先在 jQuery函数的代码,它完全不是那么回事这样的 - 你可以不从前端发布服务器事件,也不做回发或使用AJAX。其次,.NET将它自己的,由服务器生成的ID分配给WebForms元素,所以根本没有选择txtName元素。尝试使用CssClass属性并使用类似$(".myElement").click(function() { });

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

0

我不是asp专家,但这种服务的工作原理类似。当得到你的页面请求时,服务器处理它并从你的asp文件构造一个html结果。该html由浏览器处理。所以当你把你的服务器执行的asp文件放到<%TextChanged();%>并发送相应的结果。其实你的jQuery脚本看起来像这样在浏览器上

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

对于这个工作,你需要发送一个新的请求到服务器上执行的框TextChanged方法的服务器,并返回一个有效的响应(XML为例),因此浏览器或在这种情况下,您的jQuery脚本可以处理它,并显示您想要的信息。

0

为什么不使用AutoPostBack功能?

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

我真的不知道为什么所有这些答案都认为这是一项艰巨的任务,在.NET中这显然是一件非常容易的事情。此外,如果你想从JavaScript手动引用它,你可以使用'__doPostBack(“txtName”,“”);'。 **编辑 - 您需要确保“txtName”是'__doPostBack'的uniqueId才能工作。** – 2011-04-20 19:16:45