question

RussellSharp-0597 avatar image
0 Votes"
RussellSharp-0597 asked YiyiYou-MSFT edited

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

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!

dotnet-aspnet-core-razor
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AgaveJoe avatar image
0 Votes"
AgaveJoe answered

...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>
    
 }




5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

YiyiYou-MSFT avatar image
0 Votes"
YiyiYou-MSFT answered YiyiYou-MSFT edited

Hi,@RussellSharp-0597,

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




8-19-1.gif (334.0 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.