ASP MVC Postback

Hallo zusammen,

ich habe eine Kunden-View in der der User unter anderem verschiedene Kontaktdaten hinterlegen kann.

Aufbau:
Tabelle mit allen angelegten Kontakten und darunter*DropDownList (Kontaktart) *TextBox (Inhalt)

mit einem "Add" Button.

Wenn der User den Add Button drückt wird das Bild komplett neu aufgebaut (flackern) und man befindet sich im oberen Fensterbereich. Nun muss der User wieder runterscrollen, neuen Konktakt anlegen usw.

Jetzt suche ich eine Lösung bzw Ansatz der so ähnlich wie das ASP WEBFORMS UpdatePanel arbeitet. -> Kein Flacker-Effekt

Danke

Es gibt in ASP.NET MVC keinen Postback - es gibt nur vollständige Aufrufe von Actions innerhalb von Controllern. Es gibt auch kein "so ähnlich", weil das Prinzip nun mal ein ganz anderes ist.

Du musst Dir hier mit Ajax (vorzugsweise jQuery Ajax) eine eigene Anfrage basteln, die asynchron Deine Vorgänge durchführt.
Wenn Du dahingehend Googlest: vergess die ganzen MvcAjax-Schnittstellen in den Beispielen - die sind tot.
Schau Dir an wie jQuery Ajax funktioniert und verwende das.

Was Du mit flackern meinst weiß ich nicht; eine Webanwendung kann von sich aus _eigentlich _nicht flackern.

Hallo Abt,

vielen Dank für die schnelle Antwort und den vorgegebenen Ansatz....

Mit flackern meinte ich eher, dass ich zB in dem Fall eine recht große Maske habe (vertikales Scrollen). Die Kontakte sind bspw ganz unten. Nun scrollt der User bis unten hin, macht seine Eingabe und beim Add wird die HTTPPOST Action ausgeführt...die neue Kontaktart wird in DB geschrieben und ich baue die View neu auf. Jetzt ist der "Cursor" wieder ganz oben und der User muss schon wieder runterscrollen.

Ich hab das hier schon öfter geschrieben; aber ASP.NET MVC ist eben im Gegensatz WebForms eine wirkliche Webanwendung. Hier hat man viel mehr Freiheiten; aber eben auch ein wenig mehr Arbeit.
Letzten Endes für RIAs aber die bessere Entscheidung.

Du hast bei MVC ViewModels, die Du in einer Action füllst und an die View übergibst - daraus entsteht Deine Seite.
Dann hast Du - ich nenne sie so immer - SubmitModels, die eine Form der View repräsentieren; zum Beispiel ein Anmeldeformular. Kannst ja meine Beiträge durchsuchen, da findest einiges dazu. Auswendig weiß ich nicht mehr, wo das war - vor allem natürlich hier in den Web-Technologien.
Ein Action empängt nun genau dieses SubmitModel zur Speicherng der Anmeldung.
Es reagiert darauf, in dem es zum Beispiel wieder ein ViewModel füllt (mit Fehlermeldung oder anderes) und generiert hier eine View, um dem User den Erfolg oder Misserfolg der Anmeldung zu suggerieren.

Machst Du das ganze mit Ajax gehst Du nicht anders vor; außer eben, dass Du den Button-Type der Form von submit auf button änderst und dann eine Javascript-Funktion ausführst, die die Form serialisiert und via POST an eine Action überträgst.
Sollte es sich um ein neues Projekt handeln, so würde es sich sehr sehr sehr anbieten bereits auf ASP.NET MVC 4 zu setzen und hier die WebAPI für alle Ajax-Requests zu verwenden.

Auch wenn, wie Abt schon geschrieben hat, es eine falsche herangehensweise ist, möchte ich trotzdem noch mal Lösungen für die beiden "Probleme" vorschlagen.

"Flackern":
Ich merke mir einfach per jQuery, welches Control den Focus hat, und selektiere es einfach wieder.
Dafür gibt es in der Form ein Hidden Input mit der ID "focusparameter".

$(document).ready(function () {
			$('#' + $('#focusedParameter').val()).focus();

			var rememberFocus = function () {
				$('#focusedParameter').val($(this).attr('id'));
			};

			$('input, select').focus(rememberFocus);
			$('input[type]').change(rememberFocus);
		});

"Autopostback":
Ein wirklichen Autopostback für das Control gibt es nicht. Ich submite einfach die Form. Man könnte sich aber merken, welches Control den Submit ausgelöst hat (ähnlich der Funktion oben) und entsprechend anders reagieren.

		$('select:[data-control-autopostback=true],input[type]:[data-control-autopostback=true],input[type]:[data-control-autopostback=true]').live('change', function () {
			$(this).closest('form').submit();
		});

Update vom 16.08.2012:
Ab jQuery 1.8 funktioniert der Code nicht mehr korrekt. folgender Code funktioniert ab da (ich weiß aber nicht ob er < 1.8 hinhaut, daher lasse ich mal beide hier stehen:

		$('select[data-control-autopostback=true],input[type][data-control-autopostback=true],input[type][data-control-autopostback=true]').live('change', function () {
			$(this).closest('form').submit();
		});

/Update

Die "Autopostback"-fähigen Controls sehen dann wie folgt aus:

<select data-control-autopostback="true" name="list">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
</select>

Ich nutze übrigens beide Scripte in Kombination, damit der Benutzer wieder beim "alten" Feld landet.

Die Idee von Björn ist nicht unbedingt schlecht - auch wenn ich sie nicht einsetz -, aber noch der Hinweis, dass "autopostback" kein gültiges HTML 5 Attribut ist. Um HTML(5)-Konform zu bleiben sollte es als Custom HTML Attribute umgesetzt werden

Danke für den Hinweis, ich habe es sowohl in meinem Beitrag als auch in meinem Projekt geändert 😃

Hallo zusammen und danke für die Hinweise.

Konnte mein Problem mit eurer Hilfe bzw von Abt lösen....über jQuery eine Action ausgelöst, die mir dann ein PartialView ausgegeben hat.

$.post('@Url.Action.....

Funzt alles wunderbar, bis auf die Tatsache das ich an die PartialView meine komplettes ViewModel Customer übergeben muss, anstatt nur das "Objekt" "Kontakte" welches in Customer deklariert ist. Sonst hatte ich Probleme beim SUBMIT der Form...die ganzen Inhalte der PartialView wurde nicht an meine HTTPPOST Action übergeben.

Du solltest schon Deine Views und ViewModels so gestalten, dass Du sie unabhängig abkoppeln kannst. Spart Ressourcen bei Ajax-Requests und erleichtert das Einbetten ungemein.

Daher immer ViewModels an eine View übergeben, und keine Entities.