Ciao,
mi accodo all'ottima risposta di Moreno.
Anche io a livello web provengo dal vecchio asp, e mi sono trovato benissimo anche utilizzando lato server le WebApi, mentre lato client faccio tutto in javascript. Io in genere uso breeze e knockout mettendo i controlli in binding con dei template caricati quando servono, ed in genere faccio SPA, ma volendo puoi anche "caricare" dati in array js (o meglio in observableArray di knockout e diventerà simile a come si fa in asp) ed usare "pagina dopo pagina" (non SPA).
In pratica usando anche ASP.NET (o MVC), se hai i cosiddetti e ti piace avere sotto controllo tutto, allora ti consiglio di non guardare neppure i controlli proposti per quella tipologia, ma di fare direttamente tutto a mano.
Puoi arrivare fino ad usare semplici pagine html (con estensione html) per il lato client.
ti faccio un piccolo esempio :
1) crea un nuovo progetto web vuoto
2) aggiungi una pagina aspx
3) aggiungi tramite nuget Knockout mapping (oppure scaricati tutti i suoi riferimenti a mano)
4)aggiungi tramite nuget jquery (oppure scaricati tutti i suoi riferimenti a mano)
5) aggiungi jquery e knockout + knockout mapping nella pagina
6) apri la pagina aspx.cs e scrivi :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication4
{
public partial class WebForm1 : System.Web.UI.Page
{
[WebMethod]
public static IEnumerable<Mezzo> GetMezzi()
{
return new Mezzo[] { new Mezzo() {ID=0, Nome = "Mezzo 1", Targa = "aa000aa" }, new Mezzo() {ID=1, Nome = "Mezzo 2", Targa = "aa001aa" } }; ;
}
[WebMethod]
public static bool SetMezzo(Mezzo Mezzo)
{
//salva qui
return true;
}
}
public class Mezzo
{
public long ID { get; set; }
public string Nome { get; set; }
public string Targa { get; set; }
}
}
in pratica il codice sopra non fa altro che esporre dei dati arbitrari (GetMezzi) e impostare eventualmente le modifiche ad un elemento passato (SetMezzo)
7) apri la pagina aspx e scrivi :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/knockout.js"></script>
<script src="Scripts/knockout.mapping-latest.js"></script>
<title></title>
</head>
<body>
<script>
$(document).ready(function () {
//creo la variabile da mettere in binding
var HomeViewModel = {};
//aggiungo una proprietà che conterrà i Mezzi
HomeViewModel.Mezzi = ko.observableArray();
//aggiungo una variabile che conterrà l'elemento selezionato
HomeViewModel.MezzoSelezionato = ko.observable();
//aggiungo un comando da mettere in binding con un bottone (o semplicemente col click di un elemento qualsiasi)
HomeViewModel.Carica = function () {
//carico i mezzi dal server
GetMezzi();
};
HomeViewModel.SalvaMezzo = function () {
SetMezzo();
};
//semplice chiamata ajax
function GetMezzi() {
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetMezzi",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
//se la chiamata va a buon fine carico il risultato nella variabile (di tipo observableArray) Mezzi
success: function (result) {
//carico i risultati in un observableArray
HomeViewModel.Mezzi(ko.mapping.fromJS(result.d));
},
//in caso di errore apparirà un alert
error: function (a, reason) {
alert(reason);
},
});
}
function SetMezzo() {
var mezzo = HomeViewModel.MezzoSelezionato();
//imposto il parametro da passare al metodo SetMezzo assegnando il valore del mezzo selezionato (e relative modifiche)
var parameter = "{'Mezzo': {ID:"+mezzo.ID() +",Nome:'"+mezzo.Nome()+"',Targa:'"+mezzo.Targa()+"'}}";
$.ajax({
type: "POST",
url: "WebForm1.aspx/SetMezzo",
data: parameter,
contentType: "application/json; charset=utf-8",
dataType: "json",
//se la chiamata va a buon fine carico il risultato nella variabile (di tipo observableArray) Mezzi
success: function (result) {
//HomeViewModel.Mezzi(result.d);
},
//in caso di errore apparirà un alert
error: function (a, reason) {
alert(reason);
},
});
}
//applico il binding a tutta la pagina
ko.applyBindings(HomeViewModel);
});
</script>
<div>
<select data-bind="
//associo l'array dei mezzi come source
options: $data.Mezzi(),
//imposto il nome della proprietà da visualizzare
optionsText: 'Nome',
//stabilisco se è possibile selezionare il valore null (non selezionato)
valueAllowUnset: true,
//stabilisco dove scrivere la scelta della selezione
value: $data.MezzoSelezionato,
optionsCaption: 'Nessuno'">
</select>
<!--associo il bottone alla funzione che fa la chiamata ajax per caricare gli elementi dal server-->
<input type="button" value="Carica" data-bind="click: Carica" />
<!--associo il bottone alla funzione salva le modifiche al mezzo selezionato-->
<input type="button" value="Salva" data-bind="enable:MezzoSelezionato()!=null, click: SalvaMezzo" />
<div>
<!--nel caso sia selezionato un mezzo associo il valore con la proprietà Nome del mezzo selezionato, diversamente mostro 'Nessuno'-->
<input data-bind="value: $data.MezzoSelezionato() != null ? $data.MezzoSelezionato().Nome : 'Nessuno'"/>
<!--nel caso sia selezionato un mezzo associo il valore con la proprietà Targa del mezzo selezionato, diversamente mostro 'Nessuno'-->
<input data-bind="value: $data.MezzoSelezionato() != null ? $data.MezzoSelezionato().Targa : 'Nessuno'"/>
</div>
</div>
</body>
</html>
8) fai girare, otterrai un piccolo programmino completo che ti consentirà di caricare gli elementi tramite ajax, selezionarne uno (o nessuno), visualizzare e/o modificare Nome e Targa dell'elemento selezionato ed in fine salvare (o quantomeno inviare le modifiche al server, da li puoi salvare come ti pare).
Come vedi non ci sono controlli asp.net, la pagina espone solo dei metodi statici lato server, e questi vengono chiamati dal client.
In pratica con questo metodo puoi stare sullo stile asp manipolando direttamente tu gli elementi html, ma con la differenza che al posto di scrivere gli array lato client dalla pagina lato server, li metti in binding (li associ) con i controlli in html. Ovviamente dovrai imparare ad usare bene knockout, a quel punto potrai tranquillamente fare esattamente quello che vuoi, compreso manipolare css e jquery.
Comunque anche con MVC (quantomeno molto di più di asp.net) hai un ottimo controllo sul codice, ma ovviamente non è mai come fare tutto a mano.
