-1

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

2
  • Do you want to hide the label or show it but with disabled appearance? Commented Dec 19, 2022 at 3:21
  • i want to show this label as disable. Commented Dec 24, 2022 at 7:27

1 Answer 1

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:

enter image description here

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");
            }
Sign up to request clarification or add additional context in comments.

2 Comments

hlo greeting sir, your idea is good but in my view have multiple dropdown and it's not possible to i can apply this way on every single dropdown is any way to disable dropdown's first value for all dropdown ? @Md Farid Uddin Kiron
You have shared your issue with one dropdown so the solution was made on that. If you have multiple dropdown, no worries, post new question with, exact scenario and code snippet new solution will be provided.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.