将 html 选择发布到 MVC 控制器。寻找更好的方法

Question

我只是在寻找一种更好的方法来执行以下操作：

我有一个 html 选择：

<form method="post" action="/Account/ChangeUserRole">
  <select name="Val" onchange="this.form.submit();" class="span2">
   @foreach (var r in ViewBag.UserRoles)
   {
    @if (u.UserRole.ID == r.ID)
   {
    <option selected="selected" value="@u.ID/@r.ID">@r.Name</option>
   }
   else
   {
    <option value="@u.ID/@r.ID">@r.Name</option> // <-- better way?
   }
  }
  </select>
  </form>

我将其发布为“userid/roleid”并在控制器端执行字符串。在 / 上拆分以拆分 u.ID 和 r.ID

我想知道是否可以发布它，以便我的控制器以这种方式获取它们：

[HttpPost]
public IActionResult ChangeUserRole(int UserID, int RoleID)

而不是这个巫术：

[HttpPost]
public IActionResult ChangeUserRole(string Val)
{
    char[] splitChar = new char[] { '/' };
    string[] s = Val.Split(splitChar);
    int UserID = Convert.ToInt32(s[0]);
    int RoleID = Convert.ToInt32(s[1]);
}

抱歉，帖子太长了。希望我的问题有意义。 我不是 html 助手的忠实粉丝。

旁注： 我正在使用 MVC 6、ASP 5 - RC1

感谢帮助

干杯！

Answer 1

最好的解决方案是使用 TagHelpers 来构建您的下拉菜单。让我们首先创建一个特定于该视图的视图模型。

public class UserRoleEditVm
{
    public List<SelectListItem> Roles { set; get; }
    public int RoleId { set; get; }
    public int UserId { set; get; }
}

在您的 get 操作中，创建 this 的对象，加载属性值并将其发送到视图。

public IActionResult Create()
{
   // User Id and Role list is hard coded for demo. You may replace it with real data.

    var v = new UserRoleEditVm {UserId = 45};
    v.Roles = new List<SelectListItem>
    {
        new SelectListItem {Value = "1", Text = "Admin"},
        new SelectListItem {Value = "2", Text = "Editor"},
        new SelectListItem {Value = "3", Text = "Reader"}
    };
    return View(v);
}

在您的视图中，我们的视图模型是强类型的，我们希望标签助手用于创建 HTML 标记。

@model UserRoleEditVm    
<form asp-action="ChangeUserRole" asp-controller="Account">

    <select asp-for="RoleId" asp-items="@Model.Roles">
        <option>Please select one role</option>
    </select>
    <input  type="hidden"asp-for="UserId"/>
    <input type="submit"/>

</form>

在您的 HttpPost 操作方法中，您可以使用我们视图模型的对象作为参数，模型绑定器会将发布的表单值映射到该对象的属性值。

[HttpPost]
public ActionResult ChangeUserRole(UserRoleEditVm model)
{
    var userId = model.UserId;
    var roleId = model.RoleId;
    // to do : Do something with the above 2 values
    // to do :Save and redirect (PRG pattern)
    // return RedirectToAction("Success");
}