DropDownListFor returns selected value always 0-CodePudding

I have a code where I try to bind data from a Model to DropDownListFor and it successfully displays the drop down in the View when executed but it doesn't return the selected value except for 0 always. I have checked and tried numerous solutions posted here but it doesn't seem to work out.

AdminController.cs (Create() action for the Create.cshtml View and ProductSave() Form action)

public ActionResult Create()
        {

            var categoryList = _context.Categories.ToList();
            var viewModel = new CreateViewModel
            {
                Categories = categoryList,
            };
            return View(viewModel);
        }

[HttpPost]
public ActionResult ProductSave(CreateViewModel viewModel)
        {
           return Content(viewModel.SelectedId.ToString());
        }

CreateViewModel.cs

public class CreateViewModel
    {
        public IEnumerable<Category> Categories { get; set; }

        public int SelectedId { get; set; }
        public Product Product { get; set; }
    }

Create.cshtml (I only included the necessary fields for the View here)

@using (Html.BeginForm("ProductSave", "Admin",null,FormMethod.Post))
        {
            @Html.AntiForgeryToken()

            <div class="default-form-wrap style-2">

                @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                <div class="form-group">
                    @Html.LabelFor(model => model.Product.Category_Id, new { @class = "control-label"})

                    <div class="nice-select single-select">
                        @Html.DropDownListFor(model => model.SelectedId,new SelectList(Model.Categories,"Id","CategoryName"),"Select Category", new { @class = "form-control" } )
                        @Html.ValidationMessageFor(model => model.Product.Category_Id, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="row text-center">
                        <div class="col">
                            <input type="submit" value="Create" class="btn btn-base" />
                        </div>
                </div>
            </div>

When selected a Category the value is changed accordingly Screenshot

I tried return Content() in the form action method to see the output from the bound viewmodel after I hit submit button

return Content(viewModel.SelectedId.ToString());

But here's what I get Screenshot

I just want to get the output corresponding to the selected list item.

CodePudding user response：

Looking at your HTML the culprit is probably:

<div class="nice-select single-select">

The DropdownListFor should be generating a <select> element with an ID value that MVC would resolve back to populate the model on the return trip. Your HTML is generating a <ul>.

You could remove that outer <div> or the class definitions and it should work. Getting that "nice-select" to work might take some reading around what it is and interacting with MVC tied controls to get it compatible with the form postback. You might need to use some Javascript and an @Html.HiddenFor so when a value is selected from the <ul> the hidden input that is tied to the model is updated and available for the post-back.