ASP.NET 核心 MVC<select><option>返回空值

Question

Working on an ASP.NET Core MVC application. I have a <select><option> with @model List<CatalogItem> for my Razor view. I want to populate the form CartForm with values from the CatalogItem item. When user selects an item and sends it back to action method asp-action="CartForm" the selected item returns as null.

What am I missing?

<select id="itmSelect" name="itmSelect">
foreach (CatalogItem itm in Model)
{
    <option class="text-dark" value="@itm">@itm.Description</option>
}
</select>

Answer 1

Although this does not explain the null value:

The value of the <option> must be a string, or at least a simple type.

Your @itm is a complex type.

You should change it to something like:

 <option class="text-dark" value="@itm.ID">

By changing this, you at least post the correct selected value which might reflect your send model better.

Answer 2

As @Stefan says, the @itm is a complex type, we couldn't pass it to the controller directly in the select option value.

If you still want to pass the item based on the select option, I suggest you could try set some custom attribute for the select option with the CatalogItem property and add come hidden field on the view and the hidden input's name is the CatalogItem property name.

Then you could use jquery to set the input hidden's value according to the dropdownlist select option.

The asp.net core model binding will bind the model according to the formdata's name, so it will bind well.

More details, you could refer to below example.

CatalogItem model:

public class CatalogItem
{
    public int Id { get; set; }
    public string Description { get; set; }

    public string Name { get; set; }

}

View:

<form asp-action="DropdownGetValue" id="test1">
    <select id="itmSelect" name="Id">
        @foreach (var itm in Model)
        {
            <option class="text-dark" value="@itm.Id" Description="@itm.Description"  Name="@itm.Name">@itm.Description</option>
        }
    </select>
    <input type="hidden" name="Description" id="Description" />
    <input type="hidden" name="Name" id="Name" />
    <input type="submit" value="Click" />
</form>

Jquery script:

<script type="text/javascript">
    $(function () {
        $("#itmSelect").change(function () {
            $("#Description").val($('#itmSelect').find(":selected").attr("Description"));  
            $("#Name").val($('#itmSelect').find(":selected").attr("Name"));  
        });
    })

</script>

Controller:

    [HttpPost]
    public IActionResult DropdownGetValue(CatalogItem itmSelect)
    {
        //_db.Category.Add(ca);
        //_db.SaveChanges();
        int i = 0;
        return Ok();

    }

Result:

Answer 3

The problem I was having with the null value arose from the fact that I didn't name the parameter in the post-back method to match the name of the tag. Once I got that into alignment everything worked.
Thanks to everyone who offered his/her time and comments.