ASP.NET Core Razor Pages Radio Button Selection Change

Step1. Set configuration for ASP.NET Core Razor Page in Program file

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();

var app = builder.Build();

app.UseDeveloperExceptionPage();

app.UseRouting();

app.MapRazorPages();

app.Run();

Step2. HTML form with Input controls and Button with Script

@page
@model RazorPageWithRadioButtonsChange.Pages.IndexModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<div align="center">
    <h1>ASP.NET Core Razor Pages Radio Button Selection Change</h1>
    <h4>Select a singer of your choice to get his or her Song Title</h4>
</div>
<div style="border-color:red;padding:10px;border-style:dashed;width:40%;margin-left:30%">
    <form id="singerForm" method="post">

        @Html.AntiForgeryToken()

        <label>Select your most favorite singer </label><br />
        <input type="radio" id="kishore" name="singer" value="kishore" />
        <label for="kishore">Kishore</label><br />

        <input type="radio" id="rafi" name="singer" value="rafi" />
        <label for="rafi">Rafi</label><br />

        <input type="radio" id="lata" name="singer" value="lata" />
        <label for="lata">Lata</label><br />

        <input type="radio" id="asha" name="singer" value="asha" />
        <label for="asha">Asha</label><br />

    </form>

    <h3 id="songTitleDisplay"></h3>
</div>


<script>
    const radios = document.querySelectorAll('input[type="radio"][name="singer"]');
    const songTitleDisplay = document.getElementById('songTitleDisplay'); // Get the display element

    // Get the anti-forgery token from the hidden input field
    const antiForgeryToken = document.querySelector('input[name="__RequestVerificationToken"]')?.value;

    // Add event listener to all radio buttons
    radios.forEach(radio => {
        radio.addEventListener('change', function(){
            console.log('Selected radio ID:', radio.id); // Log the ID being sent

            if (!antiForgeryToken) {
                songTitleDisplay.innerText = "Error: Anti-forgery token missing.";
                return; // Stop execution if token is missing
            }

            // fetch api to post selected singer name to server
            // server will process accordingly and will return a song of the singer
            fetch('?handler=Post', { // Use ?handler=Post to target the OnPost handler explicitly
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'RequestVerificationToken': antiForgeryToken // Include the token
                },
                body: JSON.stringify({ singer: radio.id })
            })
            .then(res => {
                if (!res.ok) {
                    // Handle HTTP errors (e.g., 400 Bad Request, 500 Internal Server Error)
                    console.error(`HTTP error! Status: ${res.status}`);
                    return res.text().then(text => { // Read response as text for better error messages
                        console.error('Server response:', text);
                        songTitleDisplay.innerText = `Error: ${res.status} - ${text.substring(0, 100)}`; // Display part of the error
                        throw new Error(`Server responded with status ${res.status}`);
                    });
                }
                return res.json(); // Parse the JSON response
            })
            .then(song => {
                // Received song of selected singer
                console.log('Received song:', song);
                songTitleDisplay.innerText = `Song Title: ${song}`; // Display the song title on the page
            })
            .catch(err => {
                console.error('Error occurred during data sending or processing:', err);
                songTitleDisplay.innerText = 'An error occurred while fetching the song.';
            });
        });
    });
</script>

Step3. Backend code with OnPost event handler

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Threading.Tasks;

namespace RazorPageWithRadioButtonsChange.Pages
{
    public class IndexModel : PageModel
    {
        public string? title { get; set; }

        // The OnPost handler that receives the AJAX request
        public async Task<ActionResult> OnPost([FromBody] InputModel model)
        {
            await Task.Delay(1);

            // Check if the model state is valid (e.g., if 'singer' property exists)
            if (ModelState.IsValid)
            {
                // Ensure the 'singer' value from the client (radio.id) matches these cases (e.g., "kishore" vs "Kishore")
                switch (model?.singer)
                {
                    case "kishore":
                        title = "Ek Rasta Hai Zindagi";
                        break;
                    case "rafi":
                        title = "Tujhko Pukare Mera Pyar";
                        break;
                    case "lata":
                        title = "Ram Teri Ganga Maili Ho Gayi";
                        break;
                    case "asha":
                        title = "Raat Baaki Baat Baaki";
                        break;
                    default:
                        title = "Singer not found or invalid selection.";
                        break;
                }

                // Return the 'title' string as a JSON response.
                // The client-side JavaScript will receive this string.
                return new JsonResult(title);
            }
            else
            {
                // If model state is invalid (e.g., 'singer' property was null or not sent correctly)
                // Return a BadRequest with model errors for better debugging on the client side.
                return BadRequest(ModelState);
            }
        }
    }

    // This class defines the structure of the data expected from the client-side JSON.
    public class InputModel
    {
        public string? singer { get; set; } // Must match the key in JSON.stringify({ singer: ... })
    }
}

---

Next: