ASP.Net Core MVC <select> <option> returns null

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>

What is the HTML output? And: how do you "see" the selected item returns null? — Stefan
– Stefan, Commented Oct 12, 2020 at 19:08

Stefan · Accepted Answer · 2020-10-12 19:13:34Z

2

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.

edited Oct 12, 2020 at 19:13

answered Oct 12, 2020 at 19:06

Stefan

17.7k11 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brando Zhang · Accepted Answer · 2020-10-13 05:23:03Z

1

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:

answered Oct 13, 2020 at 5:23

Brando Zhang

29.1k6 gold badges42 silver badges71 bronze badges

4 Comments

Iomha Over a year ago

Thanks for the great responses. I originally tried the simlified case where I only returned the (string) ItemId property from the <select> element. I think I had and still have the naming conventions out of alignment. Also, I was able test the the null return value by setting a breakpoint in the action method to which the select was targetted. I would be content to send only the ItemId back because I could resolve the rest of the object in C# code and populate another View().

Brando Zhang Over a year ago

By default, we will just return the select value to the controller, since the form post will generate the form data according to each html element's name. Normally, we will just post the select the itemid and then we will do something according to this itemid. If you fell my reply has helped you. Please mark it as answer, so that other folks who faces the same issue will find the solution more easily.

Iomha Over a year ago

Thank you. I will implement suggested corrections and come back if I have further questions.

Iomha Over a year ago

I took the suggestion to only return the string value ItemId. My confusion is that I am not receiving the ItemId string back at the action method cited in the <form> opening tag. I do not understand how to send the selected value back to controller from the <select> element.

Iomha · Accepted Answer · 2020-10-14 20:50:23Z

0

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.

answered Oct 14, 2020 at 20:50

Iomha

213 bronze badges

Comments

Mostafa Bedor · Accepted Answer · 2024-10-04 20:51:44Z

0

I faced the same issue, it's solved by adding asp-for & id html attributes.

answered Oct 4, 2024 at 20:51

Mostafa Bedor

193 bronze badges

Collectives™ on Stack Overflow

ASP.Net Core MVC <select> <option> returns null

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related