Wie verwendet man WebControls in einem jQuery Dialog

Hallo

Ich versuche zurzeit mit ASP.NEt und jQuery Dialog zu arbeiten. In meinem Dialog möchte ich Webcontrols verwenden. Wie eine TextBox und einen Button. Wenn Ich auf den Button klicke soll etwas in die textBox geschrieben werden. (das soll nur zum Beispiel dienen...in meiner aufgabe habe ich noch eine ListView drinne und die soll dann mit Mitarbeiter gefüllt werden die man findet)

Das Dialogfenster öffnet auch und die Webcotrols werden auch richtig angezeigt. jedoch kann Ich den Code nicht ausführen wenn ich auf eins der Webcontrols klicke.

Hier mein Code (Ist da irgendwie was falsch Oo)

aspx: (jQuery Code)

<script type="text/javascript" language="javascript">

        $(document).ready(function () {
            $("#dialogbox").dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });

            $("#dialogbox").parent().appendTo($("form:first"));

            $("#imgVertreter").click(function () {
                $("#dialogbox").dialog("open");
                $("#dialogbox").parent().appendTo($("form:first"));
                return false;
            });

            
        }); 

    </script>

ASPX (mein Dialog div Bereich)

<form id="form" runat="server">

    <div id="dialogbox" title="Gesammte Vertreterliste" runat="server">
        <asp:TextBox ID="pVertreter" runat="server"></asp:TextBox>
        <asp:ImageButton ID="pImageSearch" runat="server" 
        ImageUrl="~/App_Theme/lupe.jpg" Height="23px" Width="24px" 
            onclick="pImageSearch_Click" /><br />
            <asp:Button ID="suchen" Text="suchen" runat="server" 
            onclick="suchen_Click" />
        <hr />
        <asp:ListView runat="server" ID="ListView">
        
            ...
        
        </asp:ListView>

    </div>

...

My C# Code

protected void suchen_Click(object sender, EventArgs e)
        {
            pVertreter.Text = "ok";

            
        }

Ich verstehe nicht was Ich falsch mache

Ich weiß nicht wie oft, aber ich kanns nicht mehr zählen.
IDs, die man in ASP.NET WebForms vergibt, landen oft nicht so beim Client, wie sie definiert wurde.

Sprich, definiert man ein div mit der ID "dialogbox", dann kann es gut sein, dass WebForms daraus "96z43bfds9_dialogbox_khbshdb" macht. Siehe Quellcode. Dann findet natürlich jQuery die Dialogbox nicht.
Da Deine Fehlerbeschriebung aus "irgendwas ist falsch" besteht, kann man Dir auch nicht wirklich selektiv helfen.

Wenn das also bei Dir auch der Fall ist:
Selbsthilfe: Firefox und Firebug installieren; Javascript Aufruf "console.log();" verwenden und schauen, was jQuery denn da so findet, und was nicht.

Wenn das Verschleiern nicht der Fall ist:
trotzdem Debuggen und schauen, was für ein Fehler wirklich existiert.

PS: das Verschleiern der IDs ist zusammen mit dem Event-Handling der Grund, wieso jQuery und WebForms nicht (ohne Anpassung) in Kombination empfohlen ist.

Ja und was gibt es für eine Möglichkeit das zu machen was Ich vorhabe...Ich bin ja bestimmt nicht der erste der soetwas tut und warum verschleiert es? Oo das hör ich zum ersten mal..

das hör ich zum ersten mal..

Dann wirds Zeit sich damit zu beschäftigen, wie WebForms funktioniert ⚠ASP.NET Web Server Control Identification

Google Suche nach "Webforms jQuery ID". Erster Treffer: Webforms and jQuery, how to match the ID's?

Ja werde ich tun, jedoch habe Ich einfach mal eine testanwendung geschrieben in der Ich über einen Button das Dialogfenster öffne und in diesem Dialogfenster einen Text übergeben kann. In der testanwendung funktioniert dies einwandfrei 😕

Da fragt man sich waru es in der einen Anednung funktioniert und in der anderen wieder nicht...obwohl die beiden vom Aufbau gleich sind.

Steht in dem MSDN Link: die ID wird nicht immer auf diese UniqueID übersetzt.
Schau Dir einfach mal an, wie der generierte HTML Inhalt aussieht, vergleich das mit Deiner Erwartung, Debugge das ganze und suche den Fehler.

Also Ich habe das ganze mal mit FireBug dursucht...und mir ist eine Sache aufgefallen

In der Test Anwendung war das dialog div wie folgt definiert:

<div id="dialog" title="Liste">
<input name="txtBox" type="text" value="rettet" id="txtBox" />
<input type="submit" name="btnEdit" value="übergeben" id="btnEdit" />
</div>

und in der richtigen anwendung so:

<div id="dialogbox" title="Vertreterliste">
<input name="pVertreter" type="text" id="pVertreter" />
<input type="image" name="pImageSearch" id="pImageSearch" src="App_Theme/lupe.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;pImageSearch&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" style="height:23px;width:24px;" /><br />
<input type="submit" name="suchen" value="suchen" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;suchen&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="suchen" />
</div> 

Was ich mich frage woher holt der sich dieses onclick mit dem langen string her Oo

Das ist die Natur des WebForms. Beschäftige Dich doch einfach mal damit, wie WebForms arbeitet ⚠
Egal welcher Button, welcher Link oder welche Aktion ausgeführt wird, es wird immer die JS Funktion DoPostBack... aufgerufen, die im Kopf des Quellcodes deklariert ist.
Und dass man nicht immer 100% versteht, was da WebForms macht: das ist einfach so.

Mit WebForms gibt man sehr viel Einfluss her; dafür wird einiges eben automatisch erstellt. 100%tige Kontrolle hast Du nur bei MVC. Damit muss man als WebForms-Entwickler einfach leben.

Hallo zusammen

Folgender Artikel könnte in diesem Zusammenhang Klarheit schaffen, der sollte hier auch schon dutzende Male verlinkt sein, so häufig kam die Frage 😃.

• Identifizierung von Controls: Control.ID / .ClientID / .UniqueID

Gruss Peter