Dynamic Web Controls when using Pure Razor

Question

I want to make a dynamic control on a web page that does an action and generates new HTML code without needing to refresh the page (what would traditionally be handled by JavaScript, I presume). However, my project is currently comfortably and neatly nestled in as a pure ASP.NET Web Pages project strictly using Razor, no MVC at all.

I've hunted everywhere and haven't gotten a clear answer; what answers I have found always concern deep MVC or Web Forms components. As I understand, it should be fairly easy to make use of bits and pieces of those, but I'm still fairly inexperienced with ASP.NET.

What I want to make in short: A button that

1. Is an image
2. When clicked, increments a record value (already stored in the Razor code, simple to push to the database), and replaces itself with another image button
3. This button has a different image, will decrement the record value and replace itself with the original button (they are effectively the inverse of each other)

This is the most complex control I need at the moment for my project, and learning about this will hopefully provide a basis from which to engineer different controls.

Answer 1

The underlying technology of the server is irrelevant, whether it's PHP, ASP.NET, Ruby, et cetera - if you want a web page to "do something", you need to send a request to the server. If you want it to do something without the user directly submitting a form or clicking on a link and changing their location, you have to send the request to your server with javascript. Javascript is how you get the client to do things. The razor templating system operates on the server, not on the client.

Specifically, you should look in to Javascript AJAX requests; I'd particularly recommend learning about jQuery, because it simplifies a lot of aspects of Javascript.