ASP.NET MVC - Elementmanipulatie in de DOM

Naast het kunnen manipuleren van de gebeurtenissen wanneer we interactie hebben met de elementen, Javascript stelt ons in staat om de basiskenmerken hiervan te wijzigen, dit is erg handig omdat we bij een evenement een element van kleur kunnen laten veranderen of misschien een nieuw element kunnen toevoegen.
Het meest interessante is dat met de hulp van ASP.NET We kunnen routines creëren die interageren met de controllers om dit soort gedrag dynamisch en met database-inhoud te genereren.
Wijzig de DOMTot wijzig de DOM We gaan gebruiken jQuery Aangezien dit Javascript-framework ons ​​in staat stelt veel code op te slaan en al enkele functies heeft die het compatibel maken met de meeste browsers, is dit laatste omdat we moeten onthouden dat alles wat we doen in de DOM aan de clientzijde is, want daarom is het zijn omgeving die ons al dan niet beperkt …
Wijzig de CSS
De CSS is wat stijlen zal geven aan onze elementen in de ZON Om deze reden is het erg belangrijk, laten we ons voorstellen dat we enige validatie hebben en we willen dat wanneer deze validatie niet wordt doorstaan, we een rood vak tonen om de fout aan te geven, bij het manipuleren van de ZON We kunnen dit op de volgende manier bereiken, laten we de afbeelding met het voorbeeld bekijken:

Hier benadrukken we de .css () methode, Zoals we kunnen zien, geven we twee parameters door, de eerste parameter is de eigenschap CSS die we willen toevoegen of activeren en de tweede parameter is de waarde die deze eigenschap moet aannemen.
Een nieuw item toevoegen
Niet alleen kunnen we bestaande elementen wijzigen, we kunnen ook nieuwe elementen toevoegen, hiermee kunnen we tekst invoegen, nieuwe blokken toevoegen, etc.
Welke methode te gebruiken?Hiervoor kunnen we de .toevoegen () methode, waar we als parameter de HTML-inhoud zullen plaatsen die we in onze DOM willen invoegen, het enige dat we in gedachten moeten houden is dat we een element met een unieke id Om het als selector te gebruiken, laten we in de volgende afbeelding zien hoe we dit kunnen bereiken.

We kunnen ook elementen verwijderen, dit is erg belangrijk omdat bewegings- en actie-effecten in de applicatie kunnen worden bereikt, hiermee zal de gebruiker de effecten van hun acties in realtime zien, hiervoor zullen we de .verwijder () methode en binnen zullen we de selector doorgeven die we uit onze DOM willen verwijderen:

VERGROTEN

Hier zien we in het voorbeeld hoe we het element heel eenvoudig kunnen elimineren door alleen het label op de selector aan te geven.
Andere eigenschappen
We kunnen alle eigenschappen van het element manipuleren, het enige is dat we onszelf moeten documenteren, omdat het moeilijk is om ze allemaal uit het hoofd te kennen, maar op internet hebben we de jQuery-gids waarmee we de officiële documentatie kunnen gebruiken terwijl we bezig zijn met onze ontwikkeling.
Het belangrijkste in dit geval is om te weten wat we willen doen, dat is het belangrijkste punt, dan kunnen we het onderweg onderzoeken en leren, zolang we het basisaspect kennen, komt het goed.
Hiermee sluiten we deze tutorial af, zoals we kunnen zien is het vrij eenvoudig om op een hoger niveau te communiceren met de DOM-boom, een groot deel van deze faciliteit is te danken aan: jQuery die deze interactie faciliteert.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven