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)
{
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 () {
var HomeViewModel = {};
HomeViewModel.Mezzi = ko.observableArray();
HomeViewModel.MezzoSelezionato = ko.observable();
HomeViewModel.Carica = function () {
GetMezzi();
};
HomeViewModel.SalvaMezzo = function () {
SetMezzo();
};
function GetMezzi() {
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetMezzi",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
HomeViewModel.Mezzi(ko.mapping.fromJS(result.d));
},
error: function (a, reason) {
alert(reason);
},
});
}
function SetMezzo() {
var mezzo = HomeViewModel.MezzoSelezionato();
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",
success: function (result) {
},
error: function (a, reason) {
alert(reason);
},
});
}
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>
<input type="button" value="Carica" data-bind="click: Carica" />
<input type="button" value="Salva" data-bind="enable:MezzoSelezionato()!=null, click: SalvaMezzo" />
<div>
<input data-bind="value: $data.MezzoSelezionato() != null ? $data.MezzoSelezionato().Nome : '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.
