En la part client, un cop carregat l'HTML el que cal fer és assignar-li events i crear els controls que han d'anar al formulari. Això només cal fer-ho un cop. Per això poso una funció CreateNNNNNEvents (on NNNNN és el nom de l'entitat que estem tractant, o el del formulari). Aquesta funció no té paràmetres, i es crida des del document.ready. Un exemple de document.ready, on també es crea el menú:

<script type="text/javascript">
$(document).ready(function() {
    ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    });
    CreateClassificacioEvents();
});
</script>

Ara cal veure un exemple de la creació de controls, primer la càrrega de combos:

function CreateClassificacioEvents() {
    LoadCombos("frmFiltre", "PK_Arxiu", "", false, undefined, undefined, true, '');
    LoadCombos("frmDetall", "afegirTAAD", "", true, undefined, undefined, true, '');
//... TO BE CONTINUED...

La funció LoadCombos està definida en el helper.js, i només ella soleta mereix un post apart. El que sí es pot comentar en aquesta crida és que només es carrega un combo per cada formulari, si un formulari en té més d'un aleshores es posen separats per guions. El màxim que he vist han estat 9 combos en un formulari. En el post de la funció LoadCombos s'especifiquen cadascun dels seus paràmetres. Un cop carregats els combos cal posar la resta de controls, per exemple els calendaris:

$("#frmDetall #DataAlta").datepicker({ regional: 'ca' });
$("#frmDetall #DataBaixa").datepicker({ regional: 'ca' });

Aquests calendaris estan localitzats (tenen un idioma en concret, el "ca"-català), però no tenen la part de l'hora. Si es volen amb hora cal veure el post dels calendaris amb hora.

$("#grdClassificacions").jqGrid({
    url: 'classificacions.ashx?action=loadgrid',
    datatype: "json",
    colNames: ['PK_Classificacio', 'Codi', 'Nom'],
    colModel: [
	{ name: 'PK_Classificacio', key: true, index: 'PK_Classificacio', width: 0, hidden: true, sortable: false },
	{ name: 'Codi_TC', key: false, index: 'Codi_TC', width: 70, hidden: false, sortable: true },
	{ name: 'Nom', key: false, index: 'Nom', width: 885, hidden: false, sortable: true }
    ],
    rowNum: 20,
    rowList: [20, 40, 80],
    pager: jQuery("#pager_grdClassificacions"),
    altRows: true,
    altclass: "zebra",
    height: "auto",
    sortname: 'Codi_TC',
    sortorder: 'asc',
    viewrecords: true,
    onSelectRow: function(rowid, status) {
	LoadClassificacioData(rowid);
    },
    caption: "Classificacions"
}).navGrid("#pager_grdClassificacions", { edit: false, add: false, del: false, search: false });

Aquesta és la instanciació d'un grid. Es defineixen les columnes, el ASHX d'on es treuen les dades amb l'acció "loadgrid" de la part servidora. L'event important és quan es fa clic en una fila, "onSelectRow", la funció LoadNNNNNNData recuperarà les dades amb Ajax per omplir el formulari detall (en el post de la part client es veu quin és aquest formulari).

$("#frmDetall #autoNom").autocomplete("classificacions.ashx?action=autocompleteNom",
	{ width: 400, minChars: 2, selectFirst: false, mustMatch: true });
$("#frmDetall #autoNom").result(function(event, data, formatted) {
	if (data) {
	    $("#frmDetall #IdPare").val(data[1]);
	}
	else {
	    $("#frmDetall #IdPare").val("");
	}
});

Definim un autocomplete, els autocomplete normalment tenen una action autocompleteNNNN en el ASHX corresponent. Un cop a la part servidora habitualment es fa servir un GET que tindrà un paràmetre que farà un LIKE a la BBDD, per evitar que es saturi el propi control té una cache, i per evitar que retorni massa resultats ajustem la propietat minChars.

$("#frmDetall #btnDelete").click(function () 
    { DeleteElem('#frmDetall', 'classificacions.ashx?action=delete', 'PK_Classificacio', true, ClassificacioPostDelete);
 });

Per costum (no per res) poso els events click dels botons al final. El botó d'eliminar registre fa el mateix a tots els formularis, la funció DeleteElem está al helper.js.

$("#frmDetall #btnNou").click(function() { ClassificacioInsert(); });
$("#frmFiltre #btnFiltrar").click(function() { Filtrar(); });

El botó nou posa el formulari en mode "insert". El botó filtrar filtra...

$("#frmFiltre :input").keypress(function(e) {
    if (e.which == 13) {
	Filtrar();
    }
});
ClassificacioInsert();

Una cosa que s'espera d'un formulari de cerca és que al apretar "enter, intro, return" el formulari es posi en marxa. El codi assigna a tots els inputs del formulari de filtrar l'event corresponent per fer això. Finalment es posa el formulari en mode inserció perque no té cap registre carregat, quan es faci clic en algun element del grid aleshores es passa a mode edició.

Aquests events i controls són els més típics, però cada formulari és un cas i el més habitual és hi hagi moltes més coses definides. Per exemple un multiple upload de fitxers (imatges).