how to set radio button checked in edit mode in MVC razor view

I am new in MVC razor. I am trying to edit the web page. In which I have two radio buttons. I am successful in save data for radio button values. But when I trying to edit that value I am not able to select that radio button for which data is saved. I have enum for Gender

public enum Gender
{
    Male,
    Female
}

My create code is :-

<div class="editor-label">
   @Html.LabelFor(model => model.gender)
</div>
<div class="editor-field">
   @Html.RadioButtonFor(x => x.gender, (int)Gender.Male) Male
   @Html.RadioButtonFor(x => x.gender, (int)Gender.Female) Female
</div>

Edit code is like

<div class="editor-label">
   @Html.LabelFor(model => model.gender)
</div>
<div>
   @if (Model.gender == (int)Gender.Male)
   {
   @Html.RadioButtonFor(model => model.gender, "Male", new { @checked = true })
   @Html.Label("Male")
   @Html.RadioButtonFor(model => model.gender, "Female")
   @Html.Label("Female")
   }
   else
   {
   @Html.RadioButtonFor(model => model.gender, "Male")
   @Html.Label("Male")
   @Html.RadioButtonFor(model => model.gender, "Female", new { @checked = true })
   @Html.Label("Female")
   }
</div>

Answers


You have written like

@Html.RadioButtonFor(model => model.gender, "Male", new { @checked = true }) and
@Html.RadioButtonFor(model => model.gender, "Female", new { @checked = true })

Here you have taken gender as a Enum type and you have written the value for the radio button as a string type- change "Male" to 0 and "Female" to 1.


Don't do this at the view level. Just set the default value to the property in your view model's constructor. Clean and simple. In your post-backs, your selected value will automatically populate the correct selection.

For example

public class MyViewModel
{
        public MyViewModel()
        {
            Gender = "Male";
        }
}

<table>
  <tr>
	<td><label>@Html.RadioButtonFor(i => i.Gender, "Male")Male</label></td>
	<td><label>@Html.RadioButtonFor(i => i.Gender, "Female")Female</label></td>
  </tr>
 </table>

Here is how I do it and works both for create and edit:

//How to do it with enums
<div class="editor-field">
   @Html.RadioButtonFor(x => x.gender, (int)Gender.Male) Male
   @Html.RadioButtonFor(x => x.gender, (int)Gender.Female) Female
</div>

//And with Booleans
<div class="editor-field">
   @Html.RadioButtonFor(x => x.IsMale, true) Male
   @Html.RadioButtonFor(x => x.IsMale, false) Female
</div>

the provided values (true and false) are the values that the engine will render as the values for the html element i.e.:

<input id="IsMale" type="radio" name="IsMale" value="True">
<input id="IsMale" type="radio" name="IsMale" value="False">

And the checked property is dependent on the Model.IsMale value.

Razor engine seems to internally match the set radio button value to your model value, if a proper from and to string convert exists for it. So there is no need to add it as an html attribute in the helper method.


Add checked to both of your radio button. And then show/hide your desired one on document ready.

 <div class="form-group">
                            <div class="mt-radio-inline" style="padding-left:15px;">
                                <label class="mt-radio mt-radio-outline">
                                    Full Edition
                                    <input type="radio" value="@((int)SelectEditionTypeEnum.FullEdition)" asp-for="SelectEditionType" checked>
                                    <span></span>
                                </label>
                                <label class="mt-radio mt-radio-outline">
                                    Select Modules
                                    <input type="radio" value="@((int)SelectEditionTypeEnum.CustomEdition)" asp-for="SelectEditionType" checked>
                                    <span></span>
                                </label>

                            </div>
                        </div>

Here is the code for get value of checked radio button and set radio button checked according to it's value in edit form:

Controller:

[HttpPost]
public ActionResult Create(FormCollection collection)
{
    try
    {
        CommonServiceReference.tbl_user user = new CommonServiceReference.tbl_user();
        user.user_gender = collection["rdbtnGender"];
        return RedirectToAction("Index");
    }
    catch(Exception e)
    {
        throw e;
    }
}

public ActionResult Edit(int id)
{
    CommonServiceReference.ViewUserGroup user = clientObj.getUserById(id);
    ViewBag.UserObj = user;
    return View();
}

VIEW:

Create:

<input type="radio" id="rdbtnGender1" name="rdbtnGender" value="Male" required>
<label for="rdbtnGender1">MALE</label>
<input type="radio" id="rdbtnGender2" name="rdbtnGender" value="Female" required>
<label  for="rdbtnGender2">FEMALE</label>

Edit:

<input type="radio" id="rdbtnGender1" name="rdbtnGender" value="Male" @(ViewBag.UserObj.user_gender == "Male" ? "checked='true'" : "") required>
<label for="rdbtnGender1">MALE</label>

<input type="radio" id="rdbtnGender2" name="rdbtnGender" value="Female" @(ViewBag.UserObj.user_gender == "Female" ? "checked='true'" : "") required>
<label for="rdbtnGender2">FEMALE</label>

To set radio button checked in edit mode in MVC razor view, please trying as follow:

<div class="col-lg-11 col-md-11">
     @Html.RadioButtonFor(m => m.Role, "1", Model.Role == 1 ? "checked" : string.Empty) 
     <span>Admin</span>
     @Html.RadioButtonFor(m => m.Role, "0", Model.Role == 0 ? "checked" : string.Empty)
     <span>User</span>
     @Html.HiddenFor(m => m.Role)
</div>

Hope it help!


Need Your Help

Where are Jenkins artifacts located?

jenkins artifacts

I added the Archive Artifacts post-build option to my project. I can see the artifacts from the web browser interface, but I cannot find them in the filesystem.