2 Stimmen

OnClick auf TextBox mit JQuery auslösen

Ich habe ein Textfeld, in dem jedes Mal, wenn der Benutzer darauf klickt, eine Funktion im Code dahinter ausgelöst werden muss. Hier ist die JQuery:

    <script type="text/javascript">

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

    </script>

Und hier ist die Textbox UI:

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

Und hier ist der Code hinter der TextChanged()-Funktion, in der ich einige Abfrage ausgeführt wird:

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

Jetzt wird diese Funktion in Page_Load() ausgelöst, nicht in txtName.Click. Warum? Ich möchte diese TextChanged()-Funktion von JQ auslösen, wenn der Benutzer auf txtName klickt!

2voto

Steve Costello Punkte 380

Sie haben vor nicht allzu langer Zeit eine sehr ähnliche Frage gestellt. Das Problem ist, dass ohne einige ziemlich gnarly jury-rigging, das ist nicht gut zu funktionieren. Das Ausführen von serverseitigem Code jedes Mal, wenn der Text in der Textbox geändert wird, wird für eine schlechte Benutzererfahrung sorgen, da die Seite jedes Mal, wenn der Text geändert wird, zurückspringt. Jedes Mal, wenn ein Benutzer eine Taste drückt, verschwindet die Seite, taucht wieder auf und der Benutzer muss das Textfeld erneut suchen, wenn Sie den Fokus nicht gesetzt haben.

Sie müssen wirklich alles, was Sie auf der Client-Seite tun, mit JavaScript/jQuery behandeln. Was ist Ihr Endziel? Was soll geschehen, wenn der Text geändert wird?

0voto

amit_g Punkte 29895

Serverseitiger Code <%TextChanged();%> wird ausgeführt, wenn die Seite das erste Mal aufgerufen wird. Die onclick-Funktion wird auf der Client-Seite ausgelöst und kann nichts auf der Server-Seite tun. Sie müssen irgendwie Postback verwenden. Verwenden Sie AJAX über jQuery oder AJAX von ASP.NET mit Seitenmethoden, Webdiensten usw.

Hier ist eine kurze Demonstration, um zu erklären, was vor sich geht. Erstellen Sie eine aspx-Seite und geben Sie Folgendes ein

<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>

Ziehen Sie sie dann in den Browser und klicken Sie einige Male auf das Textfeld. Sie sollten jedes Mal die gleiche Meldung sehen. Prüfen Sie das gerenderte HTML (Quelle anzeigen)

<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>

Wie Sie sehen können, ist der serverseitige Code DateTime.Now.ToString() bereits ausgeführt wurde und die Uhrzeit zum Zeitpunkt der Ausführung an den Client-Browser gesendet wurde. Unabhängig davon, wie oft die clientseitige Funktion ausgeführt wird, wird immer dieselbe Zeit gemeldet, da keine Kommunikation zwischen Client und Server stattfindet.

0voto

Serghei Punkte 3886

Wenn Sie das Klick-Ereignis auf der Client-Seite behandeln wollen, sollten Sie den Code in der JQuery-Funktion und nicht auf der Serverseite

0voto

Bryan A Punkte 3568

Zunächst einmal funktioniert es nicht ganz so - Sie können ein Server-Ereignis nicht vom Front-End aus auslösen, ohne entweder ein Post-Back zu machen oder AJAX zu verwenden. Zweitens weist .NET eigene, vom Server generierte IDs für WebForms-Elemente zu, sodass Sie das Element txtName überhaupt nicht auswählen. Versuchen Sie mit der CssClass Eigenschaft und mit etwas wie $(".myElement").click(function() { });

Wenn Sie in der Lage sein möchten, ein Server-Ereignis über ein vom Front-End instanziiertes Ereignis asynchron auszulösen, verwenden Sie am besten einen AJAX-Aufruf. Andernfalls machen Sie einfach ein Post-Back.

0voto

Dave Punkte 532

Ich bin kein Experte für asp, aber diese Art von Diensten funktioniert ähnlich. Wenn Sie eine Anfrage für Ihre Seite erhalten, verarbeitet der Server diese und erstellt ein HTML-Ergebnis aus Ihrer Asp-Datei. Diese HTML-Datei wird vom Browser verarbeitet. Wenn Sie also <%TextChanged();%> in Ihre Asp-Datei einfügen, wird der Server ausgeführt und sendet das entsprechende Ergebnis. Ihr Jquery-Skript sieht im Browser wie folgt aus

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

Damit dies funktioniert, müssen Sie eine neue Anfrage an den Server senden, um Ihre TextChanged-Methode auf dem Server auszuführen und eine gültige Antwort (xml zum Beispiel), so dass der Browser oder in diesem Fall Ihre Jquery-Skript kann es zu behandeln und zeigen die Informationen, die Sie wollen.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X