DDL require selection

Question

I am trying to require a selection on a DDL but not sure how to do it. I would like to display ---Select--- and make the user pick the correct selection. Here is my view, controller and model code. Could someone tell me what I am doing wrong?

Thanks!

View:

$.ajax({
    type: 'POST',
    url: '@Url.Action("GetCategory")', // we are calling json method

    dataType: 'json',

    data: { id: $("#RequestType").val() },

    success: function (category) {
        $.each(category, function (i, category) {
            $("#Catagory").append('<option value="' + category.Value + '">' +
                category.Text + '</option>');

        });

Controller:

 public JsonResult GetCategory(string id)
{
List<SelectListItem> category = new List<SelectListItem>();
switch (id)
{
    case "1": 
        category.Add(new SelectListItem { Text = "N/A", Value = "N/A" });

        break;
    case "2":
        category.Add(new SelectListItem { Text = "N/A", Value = "N/A" });

        break;
    case "3":
        category.Add(new SelectListItem { Text = "N/A", Value = "N/A" });
        break;
    case "4": 
        category.Add(new SelectListItem { Text = "---Select---", Value = null });
        category.Add(new SelectListItem { Text = "Address", Value = "Address" });
        category.Add(new SelectListItem { Text = "Closing", Value = "Closing" });

}
return Json(new SelectList(category, "Value", "Text"));

Model:

[Required(ErrorMessage = "Category Required.")]
[DisplayName("Category")]
public string Category { get; set; }

Answer 1

Hi @EB ,

I tested the code you provided, and I found two places that need to be modified:

1. The last "case" lacks a break.

   -  
        case "4":  
           category.Add(new SelectListItem { Text = "---Select---", Value = null });  
           category.Add(new SelectListItem { Text = "Address", Value = "Address" });  
           category.Add(new SelectListItem { Text = "Closing", Value = "Closing" });  
           break;  
   

2. You should first empty the html of $("#Catagory") and then fill it.

    -    
   

   $("#Catagory").empty();
   $.each(category, function (i, category) {
   $("#Catagory").append('<option value="' + category.Value + '">' +
   category.Text + '</option>');
   });
   Code
3. Controller
4. View

Result

---

If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best Regards,
YihuiSun

Answer 2

Maybe, the this will help you. You don't need an item in the dropdownlist for 'Select'. Look at what is being done for Payroll and how the dropdownlist is being populated.

https://github.com/darnold924/PublishingCompany/blob/master/PublishingCompany/Views/PayRoll/Create.cshtml

https://github.com/darnold924/PublishingCompany/blob/master/PublishingCompany/Models/PayRollVM.cs

https://github.com/darnold924/PublishingCompany/blob/master/PublishingCompany/Controllers/PayRollController.cs

Understand your models...

https://deviq.com/terms/kinds-of-models

Understand the view model...

https://www.dotnettricks.com/learn/mvc/understanding-viewmodel-in-aspnet-mvc

read 'Understanding Models' subject in the link.

https://learn.microsoft.com/en-us/aspnet/mvc/overview/older-versions-1/overview/understanding-models-views-and-controllers-cs

DM = domain model and VM = view model in the example solution.

https://github.com/darnold924/PublishingCompany

https://learn.microsoft.com/en-us/archive/msdn-magazine/2016/may/asp-net-writing-clean-code-in-asp-net-core-with-dependency-injection

https://en.wikipedia.org/wiki/Separation_of_concerns

https://www.c-sharpcorner.com/UploadFile/56fb14/understanding-separation-of-concern-and-Asp-Net-mvc/

https://learn.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/architectural-principles

Answer 3

Seems like that should work as the required will look for null and you're setting your select option to null. However in your binding code you are using the expression <value which means your actual option would be an empty string. Since empty string does not match the RequiredAttribute requirements it will see it as valid. The easiest solution is to probably add the AllowEmptyString property on the attribute to false. This would cause it to see both null and empty string as not meeting the requirements.