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的值。之后，您可以使用该值更新数据库。

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

中

@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来完成您尝试执行的操作。希望这能让你走上正轨。

从视图

2 个答案: