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

}

Create an MVC project, put a dropdownlistFor and TextBoxFor and a submit button and in the controller change property which binds to the dropdownlist, u will see that it kept the old value not the updated one — Alaa Osta, Oct 10 '11 at 15:14
isn't it better that you add code to your question? We help you for free which means that most of us are not willing to try to reproduce your error when you can improve your question instead. — jgauffin, Oct 10 '11 at 15:19
Maybe I'm missing something but I don't see a textbox in your form. Where is it? — Becuzz, Oct 10 '11 at 16:25
Instead of the textbox I just update the color in the post method to Red — Alaa Osta, Oct 10 '11 at 17:20

score 1 · Answer 1 · answered Oct 10 '11 at 15:33

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

answered Oct 10 '11 at 15:33

Gregoire

24,219
6
46
73

It is the same thing,I could have decorated it and done the same but this is not my problem, the problem that the HTML helper is not updating the dropdownList, please test it on ur machine – Alaa Osta Oct 10 '11 at 15:35
@Alaa Osta: have you tested my changes? It is not the samething than your code – Gregoire Oct 10 '11 at 15:43
I just have tested it with exact same code you have posted, the color is not changing from Blue to Red. Please check it urself and get back with me this is too important for us – Alaa Osta Oct 10 '11 at 16:01
@Alaa Osta : Now, try to change model.Color="Red"; by model.Color="red"; – Gregoire Oct 10 '11 at 16:24
Nada Sir, I have already tried it, the model will have the updated values but dropdownListFor wont get updated upon submitting the form – Alaa Osta Oct 10 '11 at 16:31

score 1 · Accepted Answer · answered Oct 12 '11 at 14:29

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

score 0 · Answer 3 · answered Oct 10 '11 at 15:34

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

No, it is not working either, please test it urself, I wanna know if I am doing something wrong or I am missing something, thanks. — Alaa Osta, Oct 10 '11 at 16:02

score 0 · Answer 4 · edited May 23 '17 at 12:19

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.

Sorry to say that it didn't work either, please test it yourself to confirm that. Thanks for the effort — Alaa Osta, Oct 12 '11 at 13:53
@AlaaOsta - I was surprised that it didn't work. However I did find an answer (see my edit). — Becuzz, Oct 12 '11 at 14:44
The answer that u need to clear the ModalState because it is still having the old view check my answer — Alaa Osta, Oct 12 '11 at 15:01

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

4 Answers4

Linked