Question

我认为这是：

<div class="form-group">
    @Html.LabelFor(model => model.OWNERSHIP_STRUCTURE, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.OWNERSHIP_STRUCTURE)
        @Html.ValidationMessageFor(model => model.OWNERSHIP_STRUCTURE)
    </div>
</div>

在我的数据库中，它表示为整数

问题是

如何创建3个单选按钮作为一个组。 1 =＆gt; Local，2 =＆gt; foreign，3 =＆gt; others
当点击其中任何一个时，它会将整数，1或2或3保存到数据库中。
当我想要检索它时，它会显示字符串，即本地，外国或其他字符串，视情况而定。

Answer 1

由于您对此不熟悉，我将在几个小步骤中解释。

视图模型：

无论我获得什么数据，在将实体从数据库返回到View之前，我总是创建一个ViewModel。通过这种方式，我可以构建并控制我想要传递给View的所有内容，不多也不少。

public class HomeViewModel
{
    public List<Choice> Choices { get; set; }
    public int SelectedChoice { get; set; }
}

public class Choice
{
    public int Id { get; set; }
    public string Display { get; set; }
}

查看：

View是显示给用户的界面，它可以显示我传递的ViewModel中的任何内容。

<div>
@foreach (var c in Model.Choices)
{
    @Html.RadioButtonFor(m => m.SelectedChoice, c.Id) @c.Display
}
</div>

控制器：

这里的工作已完成。你可以拥有更多层，但是对于这个例子，代码很简单：

[HttpGet]
public ActionResult Index()
{
    var vm = new HomeViewModel {Choices = GetChoices()};
    return View(vm);
}

[HttpPost]
public ActionResult Index(HomeViewModel vm)
{
    var selected = vm.SelectedChoice;
    return Json(new {Success = true});
}

private static List<Choice> GetChoices()
{
    return new List<Choice>
    {
        new Choice {Id = 1, Display = "Local"},
        new Choice {Id = 2, Display = "Foreign"},
        new Choice {Id = 3, Display = "Others"}
    };
}

使用按钮获取所选值：

将视图的代码更改为以下内容：

<div>
    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" }))
    {
        foreach (var c in Model.Choices)
        {
            @Html.RadioButtonFor(m => m.SelectedChoice, c.Id) @c.Display
        }
        <button id="postButton">OK</button>
    }
</div>

将以下JavaScript代码添加到视图：

<script type="text/javascript">
  $(document).ready(function () {
      $("#postButton").click(function() {
        var request = $.ajax({
          url: '@Url.Action("Index", "Home")',
          data: $("#myForm").serialize(),
          cache: false,
          type: "POST"
        });

        request.error(function (error) {
            alert(error);
        });
      });
  });
</script>

要在选择更改时获取所选值，请使用以下JavaScript / jQuery代码：

$(":radio[name=SelectedChoice]").change(function () {
    var value = $(this).val();
    alert(value);
});

多个无线电按钮

1 个答案:

视图模型：

查看：

控制器：