Laden...

Asp.Net - Grundverständnis AJAX

Erstellt von kunsti vor 8 Jahren Letzter Beitrag vor 8 Jahren 2.499 Views
K
kunsti Themenstarter:in
89 Beiträge seit 2013
vor 8 Jahren
Asp.Net - Grundverständnis AJAX

Hallo allerseits,
ich habe mit ASP.NET MVC eine Anwendung entwickelt.
Diese läuft an sich auch.
Allerdings ist es so, dass auf der Seite Kamerastreams eingebunden sind.
Wenn ich einen Button drücke, soll eine Methode im Controller aufgerufen werden.
Dies schaut aktuell so aus:


   <button type="button" id="@openButtonID" data-loading-text="Öffnen..." class="btn btn-primary" autocomplete="off" onclick="location.href='@Url.Action("Open", "Home", new {index =i} )'" disabled="@notConnected">
                    Öffnen
                </button>

Allerdings läd die Seite dann immer neu, was nicht gewünscht ist.
Nun habe ich es mit AJAX versucht finde allerdings nicht den richtigen einstiegspunkt wo genau ich ansetzen muss.


@using( Ajax.BeginForm( "Open", "Home", new AjaxOptions { HttpMethod = "GET" } ) )
{
    // @Html.TextBox( "ParameterValue" )

    <button type="button" id="btnTest" data-loading-text="Öffnen..." class="btn btn-primary" autocomplete="off" >
        Öffnen
    </button><br />
}

und


$.post('@Url.Action( "Open", "Home" )', { index : 2 } {
<button type="button" id="btnTest2" data-loading-text="Öffnen..." class="btn btn-primary" autocomplete="off" >
    Öffnen2
</button><br />
});

waren meine versuche.
Allerdings weiß ich schon nicht genau, wo ich diese Codeschnippsel überhaupt einfügen soll bzw ob ich diese richtig abgeändert hab.
Kann mir da jemand hilfe stellung geben?
Danke schon mal im Vorraus
Die Methode erwartet als übergabewert einen integer.

Viele Grüße

125 Beiträge seit 2008
vor 8 Jahren

Hallo,
wenn du das Prinizip von AJAX kennst, solltest du dir vielleicht das mal anschauen: jQuery.post()

16.806 Beiträge seit 2008
vor 8 Jahren

Bei MVC arbeitet man nicht (mehr) mit Ajax.BeginForm() sondern nur mit jQuery Methoden.
Die Ajax.XYZ-Erweiterung ist faktisch tot und Microsoft empfielt jQuery zu nutzen.

K
kunsti Themenstarter:in
89 Beiträge seit 2013
vor 8 Jahren

Danke schon mal für die Antworten.
Ich habe es noch mal versucht. Der Code sieht jetzt wie folgt aus:


   <script type="text/jscript">
                    $('@openButtonID').click(function () {
                        var url = "/Home/Open";
                        
        $.post(url,index: @i);    })
                </script>
                <button type="button" id="@openButtonID" data-loading-text="Öffnen..." class="btn btn-primary" autocomplete="off"  disabled="@notConnected">
                    Öffnen
                </button>


[HttpPost]
		public void Open( int index )
		{
			LogAction( index, UserAction.Open );
			GatesModel.Gates[index].Open();
			//return RedirectToAction( "Index" ); 			
		}

Allerdings tut sich gar nichts. Ich komme nicht in die Methode Open rein.
Hab ich im script noch einen Fehler?

125 Beiträge seit 2008
vor 8 Jahren

Falls du Firefox hast, kannst du mit Firebug schauen was er beim Klick alles macht.

K
kunsti Themenstarter:in
89 Beiträge seit 2013
vor 8 Jahren

[edit]
jetzt habe ich die Fehlermldungen schon mal gefunden.
Danke für den Tip. Werde mal googlen was ich falsch gemacht habe.

125 Beiträge seit 2008
vor 8 Jahren

Du musst die jQuery-Bibliothek einbinden:

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
K
kunsti Themenstarter:in
89 Beiträge seit 2013
vor 8 Jahren

Danke hatte es erst so eingebunden:

@Scripts.Render("~/bundles/mycustomjquery")

Da wäre es ja eigentlich auch eingebunden oder?

Wenn ich es mit der Methode von dir einbinde, also


<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    $('@openButtonID').click(function () {
        var url = "/Home/Open";
        $.post(url,{index: @i+1});    })
</script>

Dann sieht das script mit Firebug nicht mehr so aus, wie ich es erwartet hätte.
Der Name des Buttons erscheint zum Beispiel auch gar nicht mehr. Hatte es eben mit der Suche überprüft.
Wenn ich es mit der ersten Methode einbinde, liest sich das Skript so wie ich es geschrieben habe.

Bei beiden Varianten komme ich leider wieder nicht in die Methode.
Ein Fehler erscheint dieses mal auch nicht.

5.657 Beiträge seit 2006
vor 8 Jahren

Hi kunsti,

hast du dir mal die Beispiele aus der jQuery-Dokumentation angeschaut? Da ist genau erklärt, wie es funktioniert. Insgesamt würde ich dir dringend zu einer etwas systematischeren Arbeitsweise raten. Anstatt irgendwas auszuprobieren, und den Code dann mit einer vagen Fehlerbeschreibung im Forum zu posten, könntest du dich erstmal mit den Grundlagen auseinandersetzen. Andernfalls wirst du immer wieder völlig demotiviert vor irgendwelchen "unerklärlichen" Problemen stehen.

Christian

Weeks of programming can save you hours of planning

16.806 Beiträge seit 2008
vor 8 Jahren

$('@openButtonID').click(function () {
Razor mit JavaScript zu mischen ist so mit das schlimmste, was man machen kann.

Auch wenn MrSparkle es sehr deutlich gesagt hat: so läuft der Hase.
Die Script-Bundles sind eine tolle Idee von Microsoft aber unfassbar schlecht umgesetzt. Das fliegt (das gesamte "Optimization NuGet Package") fliegt bei mir bei ASP.NET Projekten als aller erstes raus.
a) ist es für Anfänger schlecht zu verstehen und schlecht zu debuggen und b) für Produktivanwendungen viel zu langsam und unflexibel.

K
kunsti Themenstarter:in
89 Beiträge seit 2013
vor 8 Jahren

Danke für die Antworten.
Dann werde ich mich mal einlesen und dann wahrscheinlich die komplette View umstellen.
Allerdings kann man Razor doch nicht komplett verhindern, da ich ja an die Daten meines Models kommen muss. Oder hab ich da gerade einen Knick im Denken?
Oder gibt es einen einfachereren Weg, der Methode im Controller mitzuteilen, dass die Seite nicht neu geladen werden soll oder dass zumindest die Bilder nicht neu geladen werden?

16.806 Beiträge seit 2008
vor 8 Jahren

Nein; natürlich verwendet man Razor.
Aber man verwendet Razor halt nicht im JS Code. Da nutzt man andere Techniken, dass man eben den Button nicht auf eine ID setzt sondern auf ein andere Unique-Element.

Wenn Du eine RIA Anwendung willst, dann schau Dir AngularJS an.
Aber Du kannst nicht einen Server dazu zwingen, dass er plötzlich Client-Code ausführen soll.