如何在 MVC razor 视图中设置在编辑模式下选中的单选按钮答案

【问题标题】：how to set radio button checked in edit mode in MVC razor view如何在 MVC razor 视图中设置在编辑模式下选中的单选按钮
【发布时间】：2014-08-08 05:31:00
【问题描述】：

我是 MVC 剃须刀的新手。我正在尝试编辑网页。其中我有两个单选按钮。我成功地保存了单选按钮值的数据。但是，当我尝试编辑该值时，我无法选择保存数据的单选按钮。我有性别枚举

public enum Gender
{
    Male,
    Female
}

我的创建代码是：-

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

编辑代码就像

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

【问题讨论】：

我很高兴你为什么要让代码变得复杂。我不喜欢 enum 在第一次查找 Gender 时的想法。我建议您查看模型绑定方法，例如：@Html.RadioButtonFor(Model => Model.gender)。此模型绑定为您提供双向保存 n 编辑

标签： asp.net-mvc-4 razor

【解决方案1】：

你写的像

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

在这里，您将性别作为 Enum 类型，并将单选按钮的值写入 string 类型 - 将“男性”更改为 0，将“女性”更改为 1。

【讨论】：

两个单选按钮都有checked="true"
他不是在暗示代码，而是在强调 OP 所写的内容。该建议应应用于原始代码

【解决方案2】：

不要在视图级别执行此操作。只需将默认值设置为视图模型构造函数中的属性即可。干净简单。在您的回发中，您选择的值将自动填充正确的选择。

例如

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>

【讨论】：

它没有反映在 UI 中。
您使用的是哪个版本？我想我一定是用 MVC 3 运行它的。当我测试它时，我确定它确实有效。此外，我的结束标记中有一个错字。我刚刚修复了它，所以如果你复制粘贴了我的答案，请再试一次。

【解决方案3】：

这里是获取选中单选按钮的值并根据编辑表单中的值设置单选按钮检查的代码：

控制器：

[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();
}

查看：

创建：

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

编辑：

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

【讨论】：

【解决方案4】：

这是我的操作方法，适用于创建和编辑：

//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>

提供的值（true 和 false）是引擎将呈现为 html 元素的值的值，即：

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

并且选中的属性取决于 Model.IsMale 值。

如果存在适当的 from 和 to 字符串转换，Razor 引擎似乎在内部将设置的单选按钮值与您的模型值匹配。所以不需要在helper方法中添加为html属性。

【讨论】：

试图弄清楚它在“编辑”模式下是如何工作的？您正在对值进行硬编码，但使用相同的“isMale”布尔值来操纵它......
@RobWashington，提供的值（true 和 false）是引擎将呈现为 html 元素的值的值，即：并且选中的属性依赖于 Model.IsMale 的值。跨度>
@Nikolay ...感谢您的澄清。我理解那部分。我想我提前考虑了一下，发现这个解决方案只有在你有 2 个对或错的单选选项时才有效。但是，当您有多个无线电选项（这不是 OP 所要求的）时，这会很糟糕。但我现在得到了你的解决方案。
@RobWashington，创建具有两个以上值的 Enum 绝对没有问题。如上所示将其正确映射到相应数量的单选按钮也同样有效。布尔示例是为了使映射更清晰，干杯。 :)

【解决方案5】：

要在 MVC razor 视图的编辑模式下设置选中的单选按钮，请尝试如下：

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

希望对您有所帮助！

【讨论】：

【解决方案6】：

为您的两个单选按钮添加选中。然后在准备好的文档中显示/隐藏您想要的。

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

【讨论】：