从视图更新模型

Question

从事我的第一个 MVC ASP.NET 项目。我想知道如何使用用户的输入更新模型。

假设我有一个模型 PersonModel.cs

public class PersonModel
{
    int personID;
    string firstName;
    string lastName;
    string favoriteColor;

    public PersonModel(int personID){
    this.PersonID=personID;
    //..Fetching data from DB to fill firstName and lastName using personID
    //At this point, personID,firstName and lastName are set, only the favoriteColor is missing
    }
}

现在是我的控制器：

public class PersonController : Controller
{
    public ActionResult Index() {
    PersonModel person = new PersonModel(this.UserId());

    return View(person);
}

在我看来：

@using Portail.Models
@model PersonModel

@ViewBag.Title = "Welcome page"

<h2> Hello @Model.firstName @Model.lastName </h2>        

现在它工作正常，根据数据库中的值显示用户的名字和姓氏。

我希望用户在列表中选择一种颜色，然后将此颜色设置为模型中的 favoriteColor 变量，然后用它更新数据库。例如，通过添加下拉列表：

<select>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
</select>

如何通过为 favoriteColor 设置所选颜色来更新我的模型？

请注意，这只是一个示例，对于我正在处理的项目，我需要更新几个变量，而不仅仅是像这里的情况那样。此外，它是机密数据，所以我不想在 URL 中传递任何内容。

Answer 1

假设PersonModel 有一个名为FavoriteColor 的公共属性，如下所示

public class PersonModel
{
    ....
    .... // other properties and methods
    ....

    public string FavoriteColor { get; set; }
}

您可以将name="FavoriteColor" 属性添加到<select> 标记，将<select> 标记放在Html.BeginForm 中，然后添加如下所示的提交按钮

@using (Html.BeginForm("Index", "Person"))
{
    <select name="FavoriteColor">
      <option value="red">Red</option>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
      <option value="yellow">Yellow</option>
    </select>
    <input type="submit" name="Save" value="Save" />
}

然后在控制器中添加一个新的Index 操作方法，其中[HttpPost] 属性和PersonModel 作为参数

[HttpPost]
public ActionResult Index(PersonModel model) 
{
    // here model.FavoriteColor will be what's selected in the dropdownlist

    // update your database here

    return View(model);
}

当您点击提交按钮时，上面的 HttpPost 操作方法将被执行，model.FavoriteColor 的值将是您在下拉列表中选择的值。之后，您可以使用该值来更新您的数据库。

上面的代码只演示了如何从你的视图中提交喜欢的颜色。如果您需要人员 id 来更新数据库，那么您需要在 Html.BeginForm 块中添加一个隐藏字段来保存人员 id 值

@using (Html.BeginForm("Index", "Person"))
{
    @Html.HiddenFor(m => m.PersonID)
    <select name="FavoriteColor">
      <option value="red">Red</option>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
      <option value="yellow">Yellow</option>
    </select>
    <input type="submit" name="Save" value="Save" />
}

您可以在 HttpPost 操作方法中获取 model.PersonID 中的人员 ID。

了解以上内容后，您应该学会使用Html.DropDownListFor 填充下拉列表。这是一个很好的起点：Populating a razor dropdownlist from a List<object> in MVC

Answer 2

在您的控制器中，您需要创建一个 Index 方法，但使用 HttpPost 属性进行修饰，如下所示：

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Index(PersonModel model)
    {
        //validate and store the model somehow
        if (ModelState.IsValid)
        {
            var person = _dbcontext.Persons.SingleOrDefault(p => p.personId == model.personID);
            if(person != null)
            {
                person.favoriteColor = model.favoriteColor;
                _dbcontext.SaveChanges();
            }
        }
        return View();
    }

您的视图需要有一个隐藏字段和一个类似这样的表单：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.personID)
    <div class="form-horizontal">
        <h4>PersonModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.favoriteColor, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.favoriteColor, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.favoriteColor, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

此示例使用文本框，但您可以使用 DropDownFor HtmlHelper 来完成您要执行的操作。希望这能让您走上正轨。