MVC3 HTML helper doesn't update DropdownListFor on Submit the form

Question

I have a simple HTML form with dropdwonListFor bound to colors, a textBox below it and submit button to submit the form and save the color.

When I select a color from the dropdownlist, it will change the value of the textbox below it, if the user clicks the submit form. it goes back to the controller and I save the color from the texebox and return view(model) as an action result, but the problem that the dropdownlistfor doesn't get updated with the value of the textbox whether the value in the textbox within the dropdownlist or not.

By the way you can test it urself Can anybody help please ?

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" />

}

Answer 1

Model

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

Controller

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); }

View

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

Answer 2

You need to include all colors in your Post action.

Also do not use ViewData but add the items to you view model:

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

But since view models are intended to be used to abstract away your models you could do something like:

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;}
}

And in your controller:

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

Answer 3

Okay guys, the problem is not about the way you implement this scenario, the problem here is ModelState. I POST to the Action and return the same view. The second time the view is rendered it will look at the ModelState and use those values to fill the controls. So simply we need to clear the ModelState before returning the View.

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

Answer 4

In order to make the dropdown list change what is selected you have to set the Selected attribute of the select list item corresponding to the textbox value to true. Something like this: (Note: I did not compile and test this. Tweaks may be needed to get it to compile. Also, I assumed that if a color was not in the list it should be added.)

[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);
}

EDIT

After doing some testing and digging, it appears that you will need to use javascript to do this as explained in this SO question. Another option is to roll your own helper.