ASP.NET MVC - Manipolazione degli elementi nel DOM

Oltre ad essere in grado di manipolare gli eventi quando interagiamo con gli elementi, Javascript ci permette di modificare le caratteristiche di base di questi, questo è molto utile poiché con un evento possiamo far cambiare colore ad un elemento o magari aggiungere un nuovo elemento.
La cosa più interessante è che con l'aiuto di ASP.NET Possiamo creare routine che interagiscono con i controller per generare questo tipo di comportamento in modo dinamico e con il contenuto del database.
Modifica il DOMa modificare il DOM Utilizzeremo jQuery Poiché questo framework Javascript ci consente di salvare molto codice e ha già alcune funzionalità che lo rendono compatibile con la maggior parte dei browser, quest'ultimo è perché dobbiamo ricordare che tutto ciò che facciamo nel DOM è lato client, quindi è il suo ambiente che può o non può limitarci …
Cambia il CSS
Il CSS è ciò che darà stile ai nostri elementi nel SOLE Per questo motivo è molto importante, immaginiamo di avere qualche convalida e vogliamo che quando questa convalida non viene superata, mostriamo un riquadro rosso per indicare l'errore, quando si manipola il SOLE Possiamo ottenere ciò nel modo seguente, vediamo l'immagine con l'esempio:

Qui si evidenzia è il metodo .css(), Come possiamo vedere, passiamo due parametri, il primo parametro è la proprietà CSS che vogliamo aggiungere o attivare e il secondo parametro è il valore che questa proprietà dovrebbe assumere.
Aggiungi un nuovo elemento
Non solo possiamo modificare gli elementi esistenti, ma possiamo anche aggiungere nuovi elementi, con questo possiamo inserire testo, aggiungere nuovi blocchi, ecc.
Che metodo usare?Per questo possiamo usare il metodo .append(), dove come parametro posizioneremo il contenuto HTML che vogliamo inserire nel nostro DOM, l'unica cosa che dobbiamo tenere a mente è che abbiamo bisogno di un elemento con un ID univoco Per utilizzarlo come selettore, vediamo nell'immagine seguente come possiamo ottenere ciò.

Possiamo anche rimuovere elementi, questo è molto importante poiché gli effetti di movimento e azione possono essere ottenuti nell'applicazione, con questo l'utente vedrà gli effetti delle proprie azioni in tempo reale, per questo useremo il .remove() metodo e all'interno passeremo il selettore che vogliamo rimuovere dal nostro DOM:

INGRANDIRE

Qui vediamo nell'esempio come eliminiamo molto facilmente l'elemento solo indicando l'etichetta sul selettore.
Altre proprietà
Possiamo manipolare tutte le proprietà dell'elemento, l'unica cosa è che dobbiamo documentarci, poiché è difficile conoscerle tutte a memoria, tuttavia su Internet abbiamo il guida jQuery con cui possiamo utilizzare la documentazione ufficiale mentre stiamo facendo il nostro sviluppo.
L'importante in questo caso è sapere cosa vogliamo fare, questo è il punto chiave quindi possiamo indagare e imparare strada facendo, fintanto che conosciamo l'aspetto di base andrà tutto bene.
Con questo finiamo questo tutorial, come possiamo vedere è abbastanza facile interagire ad un livello più alto con il albero DOM, gran parte di questa struttura è dovuta a jQuery chi facilita questa interazione.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo