HTML helper在提交表单时没有更新DropdownListFor

本文关键字：更新 DropdownListFor 表单 helper 提交 HTML | 更新日期: 2023-09-27 18:10:48

我有一个简单的HTML表单，将dropwonlistfor绑定到颜色，它下面有一个textBox和提交按钮来提交表单并保存颜色。

当我从下拉列表中选择一种颜色时，如果用户单击提交表单，它将改变它下面的文本框的值。它回到控制器，我保存颜色从文本框和返回视图(模型)作为一个动作的结果，但问题是，下拉列表没有得到更新的文本框的值，无论下拉列表内的文本框的值与否。

顺便说一下，你可以自己测试它有谁能帮忙吗?

Model.cs 

public class TestModel {
    public String Color { get; set; }
}

Controller.cs 

public ActionResult Index() {
        var model = new TestModel();
        model.Color="Blue";
        ViewData["Colors"]=new List<SelectListItem>() { new SelectListItem() { Text =  "Blue", Value = "Blue" }, new SelectListItem() { Text = "Red", Value = "Red" } };
        return View(model);
    }
[HttpPost]
public ActionResult Index(TestModel model) {
        model.Color="Red";
        ViewData["Colors"]=new List<SelectListItem>() { new SelectListItem() { Text =  "Blue", Value = "Blue" }, new SelectListItem() { Text = "Red", Value = "Red" } };
        return View(model);
}

Index.cs 

@using (Html.BeginForm()) {
@Html.DropDownListFor(m => m.Color, ViewData["Colors"], new { @class = "w200" })
<input type="submit" />

}

HTML helper在提交表单时没有更新DropdownListFor

模型 

public class TestModel {
    public String Color { get; set; }
    public SelectList Colors {get;set;} }
控制器

public ActionResult Index() {
        var model = new TestModel();
        model.Color="Blue";
        var colors =new List<SelectListItem>() { new SelectListItem() { Text =  "Blue", Value = "Blue" }, new SelectListItem() { Text = "Red", Value = "red" } };
        model.Colors = new SelectList(colors,"Text","Value");
        return View(model);
    }
[HttpPost] public ActionResult Index(TestModel model) {
        model.Color="Red";
        var colors =new List<SelectListItem>() { new SelectListItem() { Text =  "Blue", Value = "Blue" }, new SelectListItem() { Text = "Red", Value = "red" } };
        model.Colors = new SelectList(colors,"Text","Value");
        return View(model); }
<<p> 视图/strong> 
@using (Html.BeginForm()) {
    <div>
        @Html.DropDownListFor(m => m.Color, Model.Colors, new { @class = "w200" })
       <input type="submit" />
     </div> 
}

好了，伙计们，问题不在于你实现这个场景的方式，这里的问题是ModelState。我POST到Action并返回相同的视图。第二次呈现视图时，它将查看ModelState并使用这些值来填充控件。因此，简单地说，我们需要在返回View之前清除ModelState。

Model.cs 

public class TestModel {
    public String Color { get; set; }
}

Controller.cs 

public ActionResult Index() {
        var model = new TestModel();
        model.Color="Blue";
        ViewData["Colors"]=new List<SelectListItem>() { new SelectListItem() { Text =  "Blue", Value = "Blue" }, new SelectListItem() { Text = "Red", Value = "Red" } };

        return View(model);
    }
[HttpPost]
public ActionResult Index(TestModel model) {
        model.Color="Red";
        ViewData["Colors"]=new List<SelectListItem>() { new SelectListItem() { Text =  "Blue", Value = "Blue" }, new SelectListItem() { Text = "Red", Value = "Red" } };
        ***ModelState.Clear();***
        return View(model);
}

Index.cs 

@using (Html.BeginForm()) {
@Html.DropDownListFor(m => m.Color, ViewData["Colors"], new { @class = "w200" })
<input type="submit" />

}

Cheeeeeers

你需要在你的Post动作中包含所有的颜色

也不要使用ViewData，而是将项目添加到视图模型:

public class TestModel {
    public String Color { get; set; }
    IEnumerable<SelectListItem> AvailableColors {get;set;}
}

但是由于视图模型是用来抽象你的模型的，你可以这样做:

public class TestModel {
    public TestModel(IEnumerable<string> colors)
    {
        AvailableColors = colors.Select(c => new SelectListItem{Text=c, Value = c});
    }
    public String Color { get; set; }
    IEnumerable<SelectListItem> AvailableColors {get;}
}

在你的控制器中:

public ActionResult Index() {
    var model = new TestModel(new string[]{"Red", "Green", "Blue"});
    model.Color="Blue";
    return View(model);
}

为了使下拉列表改变选择的内容，您必须将与文本框值相对应的选择列表项的selected属性设置为true。像这样:(注意:我没有编译和测试这个。可能需要进行一些调整才能使其编译。此外，我认为如果一个颜色不在列表中，它应该被添加。

[HttpPost]
public ActionResult Index(TestModel model) {
        model.Color="Red";
        var colors = new List<SelectListItem>() { new SelectListItem() { Text =  "Blue", Value = "Blue" }, new SelectListItem() { Text = "Red", Value = "Red" } };
        SelectListItem selectedColor = colors.Where(c => c.Text == model.Color).FirstOrDefault();
        if (selectedColor != null)
        {
            selectedColor.Selected = true;
        }
        else
        {
            colors.Add(new SelectListItem() { Text = model.Color; Value = model.Color; Selected = true; };
        }
        ViewData["Colors"] = colors;
        return View(model);
}

编辑

在做了一些测试和挖掘之后，看起来你需要使用javascript来做到这一点，就像这个问题中解释的那样。另一个选择是滚动您自己的帮助器。

相关文章：