Razor radio buttons: Can I cause an event to be executed when I select a radio button?

Russell Sharp 1 Reputation point
2021-08-18T18:53:44.197+00:00

I am creating a web-based version of an existing paper form.

Can an event be added to a RadioButton on my RazorPage, so that the event is automatically executed when the radio button is selected?

...and if so, where would I enter the event code(Javascript or C#, I assume) to assign the desired value to the field? (Can a RadioButton have an onclick event?)

The purpose of the Razor Page is to add a new record to a SQL Server table, or save changes to an existing record via the Razor Page.
The RadioButton group is used to choose one of a list of predefined values for one of the fields(in the same way as dropdown list would do so).

Thanks!

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,599 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. AgaveJoe 28,536 Reputation points
    2021-08-18T19:44:06.833+00:00

    ...and if so, where would I enter the event code(Javascript or C#, I assume) to assign the desired value to the field? (Can a RadioButton have an onclick event?)

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    <hr />
    
    <div>
        <form asp-action="Index">
            My Radio <input type="radio" id="myRadio" value="Hello" />
        </form>
    
        <div id="results"></div>
    </div>
    
    
    
    @section scripts{ 
    <script>
        $('#myRadio').click(function () {
            $('#results').text($(this).val());
        });
    </script>
    
    }
    
    0 comments No comments

  2. Yiyi You - MSFT 521 Reputation points
    2021-08-19T02:08:41.367+00:00

    Hi,@Russell Sharp ,

    The RadioButton group is used to choose one of a list of predefined values for one of the fields(in the same way as dropdown list would do so).

    If you mean you only want to pass selected value of radio button to handler,you don't need to add the selected value to field when clicking the radio button.

    When you select a radio button,and post it with form,the selected value will be sent by default.Here is a working demo:
    Model:

     public class Person  
            {  
                public string Gender { get; set; }  
            }  
    

    cshtml(.net core bind data with name attribute):

    <form method="post">  
        <input type="radio" name="Gender" value="Male" />Male<br />  
        <input type="radio" name="Gender" value="Female" />Female<br />  
        <input type="radio" name="Gender" value="Unspecified" />Unspecified<br />  
        <input type="submit" value="submit" />  
    </form>  
    

    cshtml.cs:

    [BindProperty]  
            public Person person { get; set; }  
            public void OnGet()  
            {  
            }  
            public void OnPost()  
            {  
            }  
    

    result:
    124398-8-19-1.gif

    ----------

    If the answer is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best Regards,
    YiyiYou

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.