SelectBox does not show me the data transferred from ViewData dictionary

Question

I'm trying to show my data received from ViewData["ProductGroupId"] and ViewData["ProductSubGroupId"] in two seperate drop down lists. When debbuging, everything is ok and I can see that my data are correctly fetched from the database, but when I run the application, I see that my drop down lists are empty! like bellow:

My code inside the controller:

[Microsoft.AspNetCore.Mvc.HttpGet]
public IActionResult Create()
{
    var groups = _productServices.GetGroupsListItem();
    var subGroups = _productServices.GetSubGroups_ByGroupId_ListItem(int.Parse(groups.First().Value));
    ViewData["ProductGroupId"] = new SelectList(groups.ToList(), "Value", "Text");
    ViewData["ProductSubGroupId"] = new SelectList(subGroups.ToList(), "Value", "Text");

    return View();
}

My View Razore is:

@model Keyhanatr.Data.Domain.Products.Product
@{
    ViewData["Title"] = "ایجاد محصول";
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}
<form asp-action="Create" method="post" enctype="multipart/form-data">
    <section class="col-lg-12 pt-lg-4 pb-4 mb-3">
        <div class="pt-2 px-4 ps-lg-0 pe-xl-5">

            -->
            Title
            <div asp-validation-summary="All" class="text-danger"></div>
            <div class="d-sm-flex flex-wrap justify-content-between align-items-center pb-2">
                <h2 class="h3 py-2 me-2 text-center text-sm-start">درج محصول جدید</h2>

            </div>

            <div class="form-group">
                <label asp-for="@Model.ProductGroupId"></label>
                <select asp-for="@Model.ProductGroupId" class="form-select me-2" asp-items="@(ViewBag.ProductGroupId as SelectList)"></select>
            </div>
            <div class="form-group">
                <label asp-for="@Model.ProductSubGroupId"></label>
                <select asp-for="@Model.ProductSubGroupId" class="form-select me-2" asp-items="@(ViewData["ProductSubGroupId"] as SelectList)"> </select>
            </div>

            <div class="mb-3 pb-2">
                <label class="form-label" for="unp-product-name">نام محصول</label>
                <input class="form-control" asp-for="@Model.ProductTitle" id="unp-product-name">
                <div class="form-text">حداکثر 100 حرف هیچ L یا شکلک مجاز نیست.</div>
            </div>
            <div class="file-drop-area mb-3">
                <div class="file-drop-icon ci-cloud-upload"></div><span class="file-drop-message">برای بارگذاری تصویر صفحه از محصول ، آن را بکشید و رها کنید</span>
                <input class="file-drop-input" type="file" name="imgUp">
                <button class="file-drop-btn btn btn-primary btn-sm mb-2" type="button">یا پرونده را انتخاب کنید</button>
                <div class="form-text">1000 x 800px اندازه ایده آل برای نمایشگرهای با وضوح بالا</div>
            </div>
            @if (ViewBag.IsNullImg != null)
            {
                <div class="form-text text-danger"><span>لطفا یک تصویر را برای محصول انتخاب کنید</span></div>
            }
            <div class="mb-3 py-2">
                <label class="form-label" for="unp-product-description">توضیحات محصول</label>
                <textarea asp-for="@Model.Description" class="form-control" rows="6" id="unp-product-description"></textarea>
                <div class="bg-secondary p-3 fs-ms rounded-bottom"><span class="d-inline-block fw-medium me-2 my-1">پشتیبانی می کند:</span><em class="d-inline-block border-end pe-2 me-2 my-1">*کج*</em><strong class="d-inline-block border-end pe-2 me-2 my-1">**برجسته**</strong><span class="d-inline-block border-end pe-2 me-2 my-1">- لیست</span><span class="d-inline-block border-end pe-2 me-2 my-1">##سربرگ##</span><span class="d-inline-block">--- افقی</span></div>
            </div>
            <div class="row">
                <div class="col-sm-12 mb-6">
                    <label class="form-label" for="unp-standard-price">قیمت استاندارد</label>
                    <div class="input-group">
                        <input class="form-control" type="text" id="unp-standard-price">
                        <span asp-validation-for="Price" class="text-danger"></span>
                    </div>
                    <div class="form-text">قیمت محصول بر حسب تومان اعمال خواهد شد.</div>
                </div>

            </div>
            <div class="mb-3 py-2">
                <label class="form-label" for="unp-product-tags">برچسب های محصول</label>
                <textarea placeholder="عطرمردانه-جدید-اسپرت" class="form-control" rows="4" id="unp-product-tags"></textarea>
                <div class="form-text">حداکثر 10 کلمه کلیدی که مورد شما را توصیف می کنند. همه برچسب ها باید با حروف کوچک و با خط فاصله یا همان (-) از هم جدا شوند.</div>
            </div>
            <button class="btn btn-primary d-block w-100" type="submit"><i class="ci-cloud-upload fs-lg me-2"></i>آپلود محصول</button>
        </div>
    </section>
</form>

Can anyone help?

Answer 1

For public SelectList(IEnumerable items, string dataValueField, string dataTextField);, the first parameter is the source, the second parameter is each option value in select, the third parameter is that each option displays text in html. The second and third parameter should be the property in your source.

So you need to be sure the Text and Value are the property in your groups and subGroups.

Here is a simple demo:

Model:

public class Product
{
    public int ProductGroupId { get; set; }
    public int ProductSubGroupId { get; set; }
    public string Price { get; set; }
    public string ProductTitle { get; set; }
    public string Description { get; set; }
}
public class Group
{
    public string Id { get; set; }
    public string Name { get; set; }
}
public class SubGroup
{
    public string Id { get; set; }
    public string SubName { get; set; }
}

View:

@model Product
@{
    ViewData["Title"] = "ایجاد محصول";
}
<form asp-action="Create" method="post" enctype="multipart/form-data">
    <section class="col-lg-12 pt-lg-4 pb-4 mb-3">
        <div class="pt-2 px-4 ps-lg-0 pe-xl-5">    
            -->
            Title
            <div asp-validation-summary="All" class="text-danger"></div>
            <div class="d-sm-flex flex-wrap justify-content-between align-items-center pb-2">
                <h2 class="h3 py-2 me-2 text-center text-sm-start">درج محصول جدید</h2>

            </div>

            <div class="form-group">
                <label asp-for="@Model.ProductGroupId"></label>
                <select asp-for="@Model.ProductGroupId" class="form-select me-2" asp-items="@(ViewBag.ProductGroupId as SelectList)"></select>
            </div>
            <div class="form-group">
                <label asp-for="@Model.ProductSubGroupId"></label>
                <select asp-for="@Model.ProductSubGroupId" class="form-select me-2" asp-items="@(ViewData["ProductSubGroupId"] as SelectList)"> </select>
            </div>

            <div class="mb-3 pb-2">
                <label class="form-label" for="unp-product-name">نام محصول</label>
                <input class="form-control" asp-for="@Model.ProductTitle" id="unp-product-name">
                <div class="form-text">حداکثر 100 حرف هیچ L یا شکلک مجاز نیست.</div>
            </div>
            <div class="file-drop-area mb-3">
                <div class="file-drop-icon ci-cloud-upload"></div><span class="file-drop-message">برای بارگذاری تصویر صفحه از محصول ، آن را بکشید و رها کنید</span>
                <input class="file-drop-input" type="file" name="imgUp">
                <button class="file-drop-btn btn btn-primary btn-sm mb-2" type="button">یا پرونده را انتخاب کنید</button>
                <div class="form-text">1000 x 800px اندازه ایده آل برای نمایشگرهای با وضوح بالا</div>
            </div>
           
            <div class="mb-3 py-2">
                <label class="form-label" for="unp-product-description">توضیحات محصول</label>
                <textarea asp-for="@Model.Description" class="form-control" rows="6" id="unp-product-description"></textarea>
                <div class="bg-secondary p-3 fs-ms rounded-bottom"><span class="d-inline-block fw-medium me-2 my-1">پشتیبانی می کند:</span><em class="d-inline-block border-end pe-2 me-2 my-1">*کج*</em><strong class="d-inline-block border-end pe-2 me-2 my-1">**برجسته**</strong><span class="d-inline-block border-end pe-2 me-2 my-1">- لیست</span><span class="d-inline-block border-end pe-2 me-2 my-1">##سربرگ##</span><span class="d-inline-block">--- افقی</span></div>
            </div>
            <div class="row">
                <div class="col-sm-12 mb-6">
                    <label class="form-label" for="unp-standard-price">قیمت استاندارد</label>
                    <div class="input-group">
                        <input class="form-control" type="text" id="unp-standard-price">
                        <span asp-validation-for="Price" class="text-danger"></span>
                    </div>
                    <div class="form-text">قیمت محصول بر حسب تومان اعمال خواهد شد.</div>
                </div>

            </div>
            <div class="mb-3 py-2">
                <label class="form-label" for="unp-product-tags">برچسب های محصول</label>
                <textarea placeholder="عطرمردانه-جدید-اسپرت" class="form-control" rows="4" id="unp-product-tags"></textarea>
                <div class="form-text">حداکثر 10 کلمه کلیدی که مورد شما را توصیف می کنند. همه برچسب ها باید با حروف کوچک و با خط فاصله یا همان (-) از هم جدا شوند.</div>
            </div>
            <button class="btn btn-primary d-block w-100" type="submit"><i class="ci-cloud-upload fs-lg me-2"></i>آپلود محصول</button>
        </div>
    </section>
</form>

Controller:

public IActionResult Create()
{
    //var groups = _productServices.GetGroupsListItem();
    //var subGroups = _productServices.GetSubGroups_ByGroupId_ListItem(int.Parse(groups.First().Value));
    //for easy testing, I just hard-coded here......
    var groups = new List<Group>()
    {
        new Group(){Id="1",Name="aa"},
        new Group(){Id="2",Name="bb"},
        new Group(){Id="3",Name="cc"}
    };
    var subGroups = new List<SubGroup>()
    {
        new SubGroup(){Id="1",SubName="SubA"},
        new SubGroup(){Id="2",SubName="SubB"},
        new SubGroup(){Id="3",SubName="SubC"}
    };
    ViewData["ProductGroupId"] = new SelectList(groups.ToList(), "Id", "Name");
    ViewData["ProductSubGroupId"] = new SelectList(subGroups.ToList(), "Id", "SubName");
    return View();

}

Result: