Ensure that the radio button is set to its default option when the user accesses the page

Question

Ensure that the radio button is set to its default option when the user accesses the page

I have a model with a 'PartActionType' enum which includes Transfer, Harvest, and Dispose options.

    public enum PartActionType
    {
        Transfer,
        Harvest,
        Dispose
    }

On my view page, I am displaying these options using radio buttons like this:

 @foreach (var actionType in partActionTypes)
    {
      <td>
         @Html.RadioButtonFor(x => x.Components[i].SelectedActionType, actionType)
      </td>
    }

I would like to set the default option to 'Transfer'. How can I achieve this?

After following David's suggestion, this is how it looks now:

https://i.stack.imgur.com/6MjA9.png

c#html css asp.net-mvc razor

Answer 1

Answer №1

It is recommended to set the default action type when initializing your view model instead of using multiple if-else statements in your view.

public ActionResult Index()
{
    var vm = new ItemViewModel
    {
        ItemId = 123,
        ItemName = "Fake Item",
        Components = new List<ItemComponentViewModel>
        {
            new ItemComponentViewModel
            {
                ComponentId = 1,
                ComponentName = "Part 1",
                SelectedActionType = PartActionType.Transfer
            },
            new ItemComponentViewModel
            {
                ComponentId = 2,
                ComponentName = "Part 2",
                SelectedActionType = PartActionType.Transfer
            },
            ...        
        };
    };

    return View(vm);
}

https://i.stack.imgur.com/wdmY6.png

Answer 2

It is recommended to set the default action type when initializing your view model instead of using multiple if-else statements in your view.

public ActionResult Index()
{
    var vm = new ItemViewModel
    {
        ItemId = 123,
        ItemName = "Fake Item",
        Components = new List<ItemComponentViewModel>
        {
            new ItemComponentViewModel
            {
                ComponentId = 1,
                ComponentName = "Part 1",
                SelectedActionType = PartActionType.Transfer
            },
            new ItemComponentViewModel
            {
                ComponentId = 2,
                ComponentName = "Part 2",
                SelectedActionType = PartActionType.Transfer
            },
            ...        
        };
    };

    return View(vm);
}

https://i.stack.imgur.com/wdmY6.png

Answer 3

Answer №2

Here is a simple solution

for each type of action in partActionTypes list
  {
    if the actionType is Transfer
      <td>
         @Html.RadioButtonFor(x => x.Components[i].SelectedActionType, actionType, new {@checked="checked"})
      </td>
    else
      <td>
         @Html.RadioButtonFor(x => x.Components[i].SelectedActionType, actionType)
      </td>
  }

Answer 4

Here is a simple solution

for each type of action in partActionTypes list
  {
    if the actionType is Transfer
      <td>
         @Html.RadioButtonFor(x => x.Components[i].SelectedActionType, actionType, new {@checked="checked"})
      </td>
    else
      <td>
         @Html.RadioButtonFor(x => x.Components[i].SelectedActionType, actionType)
      </td>
  }

Ensure that the radio button is set to its default option when the user accesses the page

Answer №1

Answer №2

Similar questions

Recording Node pathways that begin with the hash symbol #

Disable the shadow on the focused state of Safari and Chrome dropdown selects

Learn how to update a fixed value by adding the content entered into the Input textfield using Material-UI

Reduce AngularJS provider dependencies to their smallest form

Is it possible for me to modify a JSON property within an OData response?

Having issues transferring values from one page to another. Any suggestions to make it work correctly?

Update content and image when clicking or hovering using Javascript

minimize the size of the image within a popup window

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

Having Trouble Transmitting JSON Data from C# to PHP Server

developing a dynamic map with javascript

Arranging a flex item below another flex item within a flexbox container

Zooming in on the background with an animated effect

What is the best way to apply custom styles in reactJs to toggle the visibility of Google Maps?

Achieving consistent image column heights that decrease evenly

Strategies for handling user typos in a JavaScript prompt

Transmitting a key-value pair data object to the server-side code-behind aspect

Discover the secret to extracting a unique style from inspect mode and incorporating it into your CSS design

Moving elements upwards and downwards using CSS transitions

What is the best way to incorporate a <c:forEach> loop into JSP operations?