DropDownList always displays the first element

Question

I have the DropDownList which has two items. When I select the second one, it flashes it then goes back the first one immediately.

@Html.DropDownListFor(m => m.SelectedProduct, new SelectList(Model.Products, "ProductCode", "ProductName",Model.SelectedProduct),new { @class = "form-control" })

My controller code.

public ActionResult Index(int id, string productName)
    {
        var model = new ProductModel
        {
            Product = ProductService.GetProducts()
        };

        var view = "Something";
        model.SelectedProduct = productName;
        if(productName =="another")
            view = "another";
        return View(view, model);
    }

The type of Model.Products is IList<Product>.

public class Product
{
     public string ProductName {get;set;}
     public string ProductCode {get;set;}
}

I saw this link, but I don't have ViewData in my controller. So help me please.

My client side code:

 $(document).ready(function () {
        $("#SelectedProduct").change(function () {
            var selectedValue = $(this).find('option:selected').text();

            window.location.href = "@(Url.RouteUrl("MyRoute", new { id = Model.id }))/" + encodeURI(selectedValue);
    });

Are you sure this is a ASP.NET problem and not a JavaScript one? Is the page reloaded after changing the value or does everything happen on the client side? Is there any client<->server communication when this happens? — Christoph Fink, Aug 10 '17 at 14:10
I added my client side code. I am sure the `selectedValue` is correct. — Bigeyes, Aug 10 '17 at 14:16
Your redirection in js looks weird. Are you sure this request is routed to the action you posted above, with "productName" populated as expected? Can you show your route config? — Andrei, Aug 10 '17 at 14:21
Yes, in my controller. I see the productName is the second item. Also the url on the browser uses the second productName. — Bigeyes, Aug 10 '17 at 14:23
@Bigeyes - Hi.. what is the functionality you are trying to achieve? when you select an item from the drop down, what do you want to happen? Thanks — Wheels73, Aug 10 '17 at 14:28
I am going to reload the page by selecting different product. `ProductService.GetProducts()` just returns List of products. There are two items in the list. — Bigeyes, Aug 10 '17 at 14:38
Your code looks correct, as long as routing works the way you expect. "productName" should really be named "productCode" though, as that's what it really is, but that should be fine anyway, the problem must be elsewhere — Andrei, Aug 10 '17 at 14:42
@Bigeyes - Why are you reloading? I have a similar set up, but with 2 combo's. Changing the value in 1, changes the options available in the other.. is this where you are going? — Wheels73, Aug 10 '17 at 14:43
Actual my original code is not product, it is language. I want to reload the page by the selected language. Because of for the production code confidentiality. I just modify it as product. But the principle is same. — Bigeyes, Aug 10 '17 at 14:47

score 1 · Accepted Answer · answered Aug 10 '17 at 15:03

1

The problem is with the selected item (4th parameter) that is passed to

new SelectList(Model.Products, "ProductCode", "ProductName", Model.SelectedProduct).

This expects that Model.SelectedProduct holds the Value of an item in the SelectList.

But your JS code passes var selectedValue = $(this).find('option:selected').text(); which is the Name.

Change this to var selectedValue = $(this).find('option:selected').val(); to pass along the ProductCode.

answered Aug 10 '17 at 15:03

Georg Patscheider

9,357
1
26
36

The 4th parameter of the `SelectList` constructor is ignored when binding to a model property using ` using `DropDownListFor()` and should just be removed (its pointless). And note it can be just `var selectedValue = $(this).val();` – Aug 10 '17 at 22:43

DropDownList always displays the first element

1 Answers1