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

The navigation bar options are not collapsing as intended

Methods for incorporating rtl functionality into Angular Chosen

Show the cell data when the checkbox next to it is selected

Desktop display issue: Fontawesome icon not appearing

Can the default DOM structure of a Jquery Data Table be customized to fit specific needs?

Using JQuery to implement custom validation on a text field is an effective way

Refresh your webpage automatically without the need to manually refresh after clicking a button using AJAX in HTML and PHP!

Guide to placing a button on the same line as text with the use of JavaScript

What could be causing this strange striping effect in the radial gradient?

Having trouble advancing to the next page while attempting to web scrape

Position the Bootstrip 4 tooltip to automatically display on the right side

The simple method for incorporating line feed in <s:textarea>

IntelliJ automation in Java does not allow clicking the button

Is there a way to make a Bootstrap grid with four columns span across two rows in the second column?

Having trouble with overriding an @media query for material-ui react components?

Looking for text within a list with similar paths - a guide

Challenges with basic contact form

Discover the art of customizing child elements using vanilla extract!

Conceal the div by clicking outside of it

VS code is showing the directory listing instead of serving the HTML file