Updating Razor Page with Vote Data: JavaScript or C# Approach?

Other Questions JavaScript
1

Hey everyone. I’m working on a voting app and I’m stuck. The app should record votes live when someone clicks a radio button. There are two vote types: simple majority and 2/3 majority, selected via a dropdown.

I’ve got a page that displays supervisor information and vote columns. Right now, clicking a radio button doesn’t update the vote columns. Additionally, if I click buttons for different supervisors, the first selection gets unchecked.

I tried using JavaScript to update the vote data but I’m not sure if that’s the correct approach. Here’s a snippet of what I have so far:

$('.vote-button').click(function() {
  var voteType = $('#VoteType').val();
  var voteValue = $(this).val();
  var row = $(this).closest('tr');
  
  if (voteType === 'Simple Majority') {
    var votes = row.find('.simple-majority').val();
  } else {
    var votes = row.find('.two-thirds-majority').val();
  }
  
  row.find('.' + voteValue.toLowerCase() + '-vote').val(votes);
});

Can I use JavaScript for this? If not, how should I implement it in C#? Any help would be greatly appreciated. Thanks!

2

I’ve encountered similar challenges before, and I’ve found that combining client-side responsiveness with server-side reliability is often the best approach. In situations like this, you can use JavaScript to provide quick visual feedback to the user, while an AJAX call sends the vote details to a C# endpoint for proper handling and persistence. This ensures that the UI updates immediately, yet the votes are accurately recorded on the server. Also, addressing the radio button issue by grouping each supervisor’s buttons separately prevents unwanted uncheck behavior.

3

hey bob, js works great for fast ui updates, but sending an ajax call to a c# endpoint makes sure votes r saved. try groupin radio buttons by supervisor to fix uncheck issue. mixin both gives u fast feedback and solid data storge. best luck!

4

While JavaScript can provide immediate feedback, I’d recommend a hybrid approach for your voting app. Use JavaScript to update the UI instantly when a user clicks, but also send an AJAX request to a C# endpoint to process and store the vote server-side. This ensures data integrity and allows for more complex logic if needed.

For the radio button issue, make sure each supervisor’s set of buttons has a unique name attribute. This groups them correctly:

<input type="radio" name="supervisor1" value="Yes">
<input type="radio" name="supervisor1" value="No">

To update vote counts, modify your JavaScript to increment the appropriate counter and send the data to the server:

$('.vote-button').click(function() {
  var voteType = $('#VoteType').val();
  var voteValue = $(this).val();
  var row = $(this).closest('tr');
  var voteCount = row.find('.' + voteType.toLowerCase().replace(' ', '-')).text();
  
  // Increment vote count
  voteCount++;
  row.find('.' + voteType.toLowerCase().replace(' ', '-')).text(voteCount);

  // Send vote to server
  $.post('/Vote/Record', { type: voteType, value: voteValue, supervisorId: row.data('id') });
});

This approach gives you the best of both worlds: responsive UI and reliable data storage.