locked
OptionLabel not appearing when @Html.DropDownListFor is rendered RRS feed

  • Question

  • User-523892225 posted

    I have created a dropdown using @Html.DropDownListFor that when rendered I expected it to show "-- Choose a course --". Instead, it shows an item in the middle of the course list and I cannot figure out what I am doing wrong.

    This is my model:

    public IEnumerable<ILT_SCHEDULED_COURSES> ScheduledCourseList { get; set; }

    This is the related dropdown view:

    <div class="chooseCourseDropdownStyle input-group col-">
        @Html.DropDownListFor(m => m.Seq, Model.ScheduledCourseList, "-- Choose a course --",
            new { @class = "form-control fluid-type", @onchange = "document.getElementById('enrollmentDivDisplay').classList.remove('d-none');"})
    </div>

    This is my controller:

    public ActionResult ChooseCourse(string seq)
    {
        ViewBag.Message = "Instructor Led Training Enrollment";           
    
        CourseEnrollmentViewModel viewModel = new CourseEnrollmentViewModel
        {
            ScheduledCourseList = GetScheduledCourseList(seq),
            Seq = seq
        };          
    
        return View("CourseType", viewModel);    
    }
    
    public IEnumerable<SelectListItem> GetScheduledCourseList(string seq)
    {
        var coursesByType = _context.ILT_SCHEDULED_COURSES
                                .GroupBy(t => t.COURSE_TYPE)
                                .Select(t => t.FirstOrDefault())
                                .Where(t => t.COURSE_STATUS != "CANCELLED")
                                .ToList();
    
        string type = string.Empty;            
    
        foreach (var item in coursesByType)
        {
            if (item.SEQ == seq)
            {
                type = item.COURSE_TYPE;                    
            }
        }
    
        var coursetype = _context.ILT_SCHEDULED_COURSES
                             .OrderBy(c => c.COURSE_NAME) 
                             .ThenBy(c => c.COURSE_START_DATE)
                             .Where(c => c.COURSE_TYPE == type.ToUpper())
                             .ToList();            
    
        var courseList = coursetype.AsEnumerable().Select(c => new SelectListItem
        {
            Value = c.SEQ,
            Text = c.COURSE_NAME + "\t|\t" + c.COURSE_START_DATE.Value.Date.ToString("d") + "\t|\t" + c.COURSE_LOCATION + "\t|\t" + c.COURSE_START_TIME.Value.ToString("hh:mm tt")
        });
    
         return courseList;
    }

    I would appreciate it if someone could tell me where I am going wrong.

    Thursday, October 10, 2019 2:21 PM

Answers

  • User-17257777 posted

    Hi jhackney01,

    Please check the document:

    https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.html.selectextensions.dropdownlistfor?view=aspnet-mvc-5.2#System_Web_Mvc_Html_SelectExtensions_DropDownListFor__2_System_Web_Mvc_HtmlHelper___0__System_Linq_Expressions_Expression_System_Func___0___1___System_Collections_Generic_IEnumerable_System_Web_Mvc_SelectListItem__System_String_System_Collections_Generic_IDictionary_System_String_System_Object__

    The first parameter:

    Expression Expression<Func<TModel,TProperty>>
    An expression that identifies the object that contains the properties to display.

    I saw your previous case and the “Seq” is just a string. Change it like this:

    @Html.DropDownListFor(m => m.ScheduledCourseList, Model.ScheduledCourseList, "-- Choose a course --",
            new { @class = "form-control fluid-type", @onchange = "document.getElementById('enrollmentDivDisplay').classList.remove('d-none');"})
    

    Test with the following codes:

    Model:

    public class CourseEnrollmentViewModel
        {
            public IEnumerable<SelectListItem> ScheduledCourseList { get; set; }
            public string Seq { get; set; }
        }
    
        public class ILT_SCHEDULED_COURSES
        {
            public string SEQ { get; set; }
            public string COURSE_NAME { get; set; }
        }
    

    Controller:

    public ActionResult ChooseCourse()
            {
                ViewBag.Message = "Instructor Led Training Enrollment";
    
                CourseEnrollmentViewModel viewModel = new CourseEnrollmentViewModel
                {
                    ScheduledCourseList = GetScheduledCourseList(),
                    Seq = "B"
                };
    
                return View("CourseType", viewModel);
            }
    
            public IEnumerable<SelectListItem> GetScheduledCourseList()
            {
                
                var coursetype = new List<ILT_SCHEDULED_COURSES>
                {
                    new ILT_SCHEDULED_COURSES{SEQ = "A", COURSE_NAME = "COURSE1"},
                    new ILT_SCHEDULED_COURSES{SEQ = "B", COURSE_NAME = "COURSE2"},
                    new ILT_SCHEDULED_COURSES{SEQ = "C", COURSE_NAME = "COURSE3"}
                };
                var courseList = coursetype.AsEnumerable().Select(c => new SelectListItem
                {
                    Value = c.SEQ,
                    Text = c.COURSE_NAME
                });
    
                return courseList;
            }
    

    View:

    <div class="chooseCourseDropdownStyle input-group col-">
        @Html.DropDownListFor(m => m.ScheduledCourseList, Model.ScheduledCourseList, "-- Choose a course --",
            new { @class = "form-control fluid-type", @onchange = "document.getElementById('enrollmentDivDisplay').classList.remove('d-none');"})
    </div>
    

    Test Result:

    Best Regards,

    Jiadong Meng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 11, 2019 7:59 AM

All replies

  • User-17257777 posted

    Hi jhackney01,

    Please check the document:

    https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.html.selectextensions.dropdownlistfor?view=aspnet-mvc-5.2#System_Web_Mvc_Html_SelectExtensions_DropDownListFor__2_System_Web_Mvc_HtmlHelper___0__System_Linq_Expressions_Expression_System_Func___0___1___System_Collections_Generic_IEnumerable_System_Web_Mvc_SelectListItem__System_String_System_Collections_Generic_IDictionary_System_String_System_Object__

    The first parameter:

    Expression Expression<Func<TModel,TProperty>>
    An expression that identifies the object that contains the properties to display.

    I saw your previous case and the “Seq” is just a string. Change it like this:

    @Html.DropDownListFor(m => m.ScheduledCourseList, Model.ScheduledCourseList, "-- Choose a course --",
            new { @class = "form-control fluid-type", @onchange = "document.getElementById('enrollmentDivDisplay').classList.remove('d-none');"})
    

    Test with the following codes:

    Model:

    public class CourseEnrollmentViewModel
        {
            public IEnumerable<SelectListItem> ScheduledCourseList { get; set; }
            public string Seq { get; set; }
        }
    
        public class ILT_SCHEDULED_COURSES
        {
            public string SEQ { get; set; }
            public string COURSE_NAME { get; set; }
        }
    

    Controller:

    public ActionResult ChooseCourse()
            {
                ViewBag.Message = "Instructor Led Training Enrollment";
    
                CourseEnrollmentViewModel viewModel = new CourseEnrollmentViewModel
                {
                    ScheduledCourseList = GetScheduledCourseList(),
                    Seq = "B"
                };
    
                return View("CourseType", viewModel);
            }
    
            public IEnumerable<SelectListItem> GetScheduledCourseList()
            {
                
                var coursetype = new List<ILT_SCHEDULED_COURSES>
                {
                    new ILT_SCHEDULED_COURSES{SEQ = "A", COURSE_NAME = "COURSE1"},
                    new ILT_SCHEDULED_COURSES{SEQ = "B", COURSE_NAME = "COURSE2"},
                    new ILT_SCHEDULED_COURSES{SEQ = "C", COURSE_NAME = "COURSE3"}
                };
                var courseList = coursetype.AsEnumerable().Select(c => new SelectListItem
                {
                    Value = c.SEQ,
                    Text = c.COURSE_NAME
                });
    
                return courseList;
            }
    

    View:

    <div class="chooseCourseDropdownStyle input-group col-">
        @Html.DropDownListFor(m => m.ScheduledCourseList, Model.ScheduledCourseList, "-- Choose a course --",
            new { @class = "form-control fluid-type", @onchange = "document.getElementById('enrollmentDivDisplay').classList.remove('d-none');"})
    </div>
    

    Test Result:

    Best Regards,

    Jiadong Meng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 11, 2019 7:59 AM
  • User-523892225 posted

    Thank you very much for your help!  Changing m => m.Seq to m => m.ScheduledCourseList did the trick.

    Friday, October 11, 2019 12:34 PM