How to disable @html.dropdownlist option label in .NET?

Question

View Markup :

@Html.DropDownListFor(model => model.entityType, ViewBag.entityType as SelectList, "Select Type", new { @class = "custom-select"})

This is the dropdown list in .NET and "select Type" is the option label.

My expectation : I want to disable "Select Type" option label. how can I do this ?

Thanks in advance who's help me.

Regards: PHioNiX

Answer 1

My expectation : I want to disable "Select Type" option label. how can I do this ?

Well,it can be implemented using couple of ways. However, the most easiest and efficient way is, we would check SelectList by its class name in your scenario it would be @class = "custom-select" and set the property as we expect here, disable to be more specific. Just like below:

$('.custom-select option:contains("Select Type")').attr("disabled", "disabled");

Note: Here, .custom-select is your class name, we are checking for Select Type and finally setting the attribute disabled. We are done. Why its efficient, because looping always cost a lot. We are not using loop here which always has Big 0 impact.

Complete Solution:

Model:

public class EntityTypeModel
    {
        
        public string? entityType { get; set; }
    }

Controller:

public IActionResult Create()
        {
            List<SelectListItem> entityTypeList = new List<SelectListItem>();
            entityTypeList.Add(new SelectListItem { Text = "Entity-Type-C#", Value = "Entity-Type-C#" });
            entityTypeList.Add(new SelectListItem { Text = "Entity-Type-SQL", Value = "Entity-Type-SQL" });
            entityTypeList.Add(new SelectListItem { Text = "Entity-Type-Asp.net core", Value = "Entity-Type-Asp.net core" });
            ViewBag.entityType = entityTypeList;
            return View();
        }

View:

@model DotNet6MVCWebApp.Models.EntityTypeModel
@{
    ViewData["Title"] = "Create";
}

<h4>Entity Type Dropdown</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label asp-for="entityType" class="control-label"></label>
            @Html.DropDownListFor(model => model.entityType, @ViewBag.entityType as SelectList, "Select Type", new { @class = "custom-select"})
            <span asp-validation-for="entityType" class="text-danger"></span>
        </div>
    </div>
</div>
@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.custom-select option:contains("Select Type")').attr("disabled", "disabled");
        });
    </script>
}

Output:

Update:

Another thing you can do is: You can set your "Select Type" text from the backend like this way:

entityTypeList.Add(new SelectListItem { Text = "Select Type", Value = "Select Type" });

and then you can check if the the user has selected Select Type in that case you can update ModelState with the error message as below:

if (EntityTypeModel.entityType.Contains("Select Type"))
            {
                ModelState.AddModelError("", "Entity Type should not be Select Type");
            }