[.NET/MVC4]Controller voor async opslaan velden complex form

[Paul C]

Ik ben bezig met de ontwikkeling van een applicatie (in .Net met MVC4 en EF5) waarmee een gebruiker een redelijk complexe entiteit kan aanmaken en opslaan. Denk ongeveer hieraan:
Een gebouw met een heleboel properties heeft oppervlaktes die bestaan uitverschillende opbouwen van verschillende materialen. En aan oppervlaktes hangen ook ramen en deuren met weer hun eigenschappen, etc.

We willen dit weergeven als één grote uitklapbare boomstructuur. Juist omdat het in de huidige implementatie vervelend is dat informatie op verschillende plekken ingevoerd moet worden. Tevens willen we dat wijzigingen in het formulier direct opgeslagen worden op de server via Ajax. Het formulier is echter niet statisch, want een gebruiker kan constant onderdelen toevoegen aan een gebouw (via Ajax met een return van de default waarden) zonder de pagina te verversen.

Het opsturen wil ik dan doen met een script ongeveer zo:

JavaScript:

$(':input').change(function() { 
    var i = $(this);
    $.ajax({  
        type: "POST",  
        url: "ajax/update/",  
        data: 'naam = ' +i.attr('name') + '&waarde = ' + i.val()
    }) 
});

Wat ik me nu afvraag is hoe ik dit aan de kant van de controller het beste kan aanpakken?
Ik moet op de een of andere manier de naam van het attribuut mappen naar een property van een specifiek object ergens in de tree van het huidige gebouw.
Of pak ik het helemaal verkeerd aan en moet ik het gebouw niet helemaal openen, maar alleen het object met het aan te passen property? Maar hoe verifieer ik dan dat de User eigenaar is van dit specifieke gebouw? Het is namelijk wel wenselijk om niet heel het gebouw te hoeven openen voor de serverload. Zeker als iemand een keer lekker door het formulier gaat zitten tabben...

[L-VIS]

Ik weet niet hoe je dit UI technisch het beste kan oplossen. Dat zul je met de klant / designer moeten bespreken. Met je jquery script ben je al een goed eind op weg. Als je regel 6 als volgt maakt:

JavaScript:

        data: { naam: + i.attr('name') + waarde: + i.val() },
        succes: //jouw succes function,
        error: //jouw error function 

Dan kun je in jouw controller (ajaxController??) het als volgt oplossen:

C#:

public JsonResult update(string naame, string waarde)
{
//Jouw db logica
}

[Paul C]

Bedankt. Ik had die JS zo even uit de losse pols geschreven en nog niet getest, omdat het me hier om het concept gaat. Die controller zo, dat had ik dus ook nog wel begrepen, maar het probleem is dat ik op de een of andere manier in de name attribute moet administreren welke waarde de input bevat. En wel op een manier dat ik de name attribute kan genereren in de controller die de pagina tevoorschijn tovert, of in de controller die een ajax request voor een nieuw object beantwoord en de name attribute ook weer kan ontcijferen in mijn ajaxController.update().

Mijn formulier bevat dus velden voor properties van een heleboel verschillende objecten van verschillende typen en ik weet niet welke (behalve dat ze binnen model bestaan). Ik moet dus niet alleen de property-naam weten, maar ook het object-type en het ID van het specifieke object.

Ik moet deze informatie dus op een handige manier aan de bijbehorende input hangen in mijn DOM. Is het handig om daarvoor het name attribute te gebruiken? En zo ja, op welke manier stop ik hier dan de drie waardes in?

[alwinuzz]

Je kan data-attributes gebruiken:

HTML:

<input data-propertyname="naam" data-objectid="123" />

JavaScript:

data: { propertyname: + i.data('propertyname'),  objectid: + i.data('objectid'),  waarde: + i.val() }, 

[ Voor 7% gewijzigd door alwinuzz op 08-11-2012 15:00 ]

[Anoniem: 220206]

Voor het maken van grotere applicaties (complexere ui's / uit de hand lopende aantal entiteiten / data structuren, etc) is het aan te raden eens te kijken naar javascript frameworks die deze groeiende complexiteit van je applicatie kan ondersteunen.

Ook omdat je je site nogal ajax heavy wil maken, kan je het niet meer een site noemen, maar wordt het een echt applicatie.

Kijk een naar javacript framework die het client-side development process ondersteunen.
Ik doel hier voornamelijk op frameworks zoals Backbone / Knockout JS / Knockback.

Het dwingt je om dan ook voor je html/js kant goed na te denken over UI (viewmodel) compositie, data modellen en biedt je de voordelen van MVC / MVVM architectuur aan de client kant.

Als je de applicatie zoals je beschrijft met puur alleen jQuery.ajax / name en data- attributen gaat maken. Wordt je html / js binnen de kortste keren een enorme chaos.

Uit de losse pols een simpel voorbeeld binnen jouw context:

Een voorbeeld van een Knockout JS Viewmodel.

var PropertyEditForm = function(data) {
	
	this.ObjectId = ko.observable();
	this.PropertyId = ko.observable();
	this.PropertyValue = ko.observable();

	ko.mapping.fromJS(data, this);
	
	this.save = function(){
		$.ajax({
			type:'POST',
			data: JSON.stringify(this)
		}).etc.
	}	
}

html:

<form>
	<input type="text" data-bind="value: PropertyValue" />
</form>