How to Create a Searchable DropDownList in ASP.NET MVC: A Step-by-Step Guide

Hello Guys,

Welcome! In this tutorial, I will walk you through a detailed example of creating a searchable dropdown list in ASP.NET MVC—a commonly asked question. To ensure you get the best results, please stay focused and follow each step carefully. By the end of this guide, you'll have a fully functional and efficient searchable dropdown list at your disposal.

Introduction:

In ASP.NET MVC, DropdownLists are a common element in web forms, providing users with a selection of options to choose from. However, as the list grows larger, finding a specific item can become challenging. That's where a searchable DropDownList comes in handy, allowing users to search and filter through the options effortlessly. In this tutorial, we will walk you through the process of creating a searchable DropDownList in ASP.NET MVC, ensuring a seamless user experience.

Before you continue with this tutorial, there are some prerequisites you need to fulfill.

1. Knowledge of ASP.NET MVC (if you understand code then you can use it anywhere).

2. Knowledge of HTML.

3. Knowledge of JavaScript.

4. Knowledge of Bootstrap.

5. Knowledge of Jquery.

6. Knowledge of C# Programming.

For your reference there are various ways to do this like searchable dropdown using jquery, searchable dropdown using javascript,searchable dropdown using angular but we are going to use bootstrap (bootstrap-select feature) to build this searchable dropdown and obviously we will require data from database to bind to our dropdown list

ð Lets Get Started:

Step 1: Set up the ASP.NET MVC Project

Before we begin, make sure you have a working ASP.NET MVC project. If you don't have one yet, create a new project or use an existing one to proceed.

if you are Creating a MVC project then give a name to it, I am giving name as SearchableDropDown

Step 2:

Now download bootstrap files required, from below link and include it in project (Copy css & js files) https://developer.snapappointments.com/bootstrap-select/

Step 3:

Now Open the Views->Shared->_Layout.cshtml file and give the reference of the files downloaded from above like given below

Till now we set our default layout page, if you want you can do anything in layout page as you need but above two files are mandatory.

Step 4:

Create a table in database from where you want to select the records and bind it to dropdown, you can also use already created table of db

Step 5:

Now in Your Controller eg: Home write logic to get data from database and return it to the view

TempData["AllProjectList"] = _objHomeRepository.LoadAllProject();
Above line will fetch data from the logic written in method LoadAllProject() and assign it to Tempdata, LoadAllProject() method given below

public DataTable LoadAllProject()
        {
            string CondStr = ConfigurationSettings.AppSettings["DashboardComponent"].ToString();
            SqlConnection con = new SqlConnection(CondStr);
            try
            {
                con.Open();
                SqlCommand Cmd = new SqlCommand();
                SqlDataAdapter da = new SqlDataAdapter();
                DataSet ds = new DataSet();
                Cmd.CommandText = " SELECT (Project_Name + ' (' + Project_Code + ')') AS [Project_Name] FROM M_Project WHERE Entity = 'ECR' ORDER BY Project_Name ";
                Cmd.CommandType = CommandType.Text;
                da.SelectCommand = Cmd;
                da.SelectCommand.Connection = con;
                da.Fill(ds);
                return ds.Tables[0];
            }
            catch (Exception ex)
            {
                return new DataTable();
            }
            finally
            {
                con.Close();
                con.Dispose();
            }
        }
Here we are fetching data from database and giving it to controller where its getting assigned to Tempdata (if you want line wise explanation of any code please mention in comment box)

Note: Here I used inline query for simplicity, but you are free to use Linq, SP etc.

Till here we are done with fetching data.

Step 6:

Now go to your view say Index and get this tempdata values in a datatable as shown below

DataTable dtAllProject = new DataTable();
dtAllProject = (DataTable)TempData["AllProjectList"];

Note:

Here I used datable to run loop and bind data to dropdown just for making it simple but you can use list or strongly typed dropdownlist feature of MVC as well, all are more or less same.

Step 7:

Now you took all the data of tempdata into datatable so start binding the table to dropdown as below

<select id="drpSearchable" class="form-control selectProj show-tick"                                                                        @{
                                        if (dtAllProject != null)
                                        {
                                            for (int iRow = 0; iRow <= dtAllProject.Rows.Count - 1; iRow++)
                                            {
                                                <option value="@dtAllProject.Rows[iRow]["Project_Name"].ToString()">@dtAllProject.Rows[iRow]["Project_Name"].ToString()</option>
                                            }
                                        }
                                    }

As you can see above code we used to bind dropdown, but make sure to include class section as it is as given above rest you can set as you want

selectProj: will be used to trigger the autosearch feature later in code.

show-tick: class will show tick mark for selected value.

Step 8:

Let's enhance our dropdown with the Bootstrap Select plugin. Begin by creating a new JavaScript file named 'script-bootstrap-select.js' within the 'Scripts' folder, then replace it with the provided code.

$(document).ready(function () {
        // Enable Live Search.
        $('# drpSearchable).attr('data-live-search', true);
        $('.selectProj').selectpicker(
        {
            width: '100%',
            title: '- [Select Project] -',
            size: 10
        });
        });

In the provided code snippet, I utilized the 'selectpicker()' method from the Bootstrap Select plugin with default settings. Prior to invoking this method, I configured the live search property, enabling users to easily search for specific values within the dropdown list.

Step 9:

Now, execute the project and you will see bootstrap style dropdown plugin in an action.

Conclusion:

Congratulations! You have successfully created a searchable dropdown list in ASP.NET MVC. By following each step in this tutorial, you now have a user-friendly dropdown list that allows users to search for and select options with ease.

Searchable dropdown lists significantly improve the user experience, particularly when dealing with long lists of options. Incorporating this feature into your web application will make it more intuitive and efficient, leading to a better overall user experience.

Feel free to customize the appearance and functionality of the dropdown list to match your application's design and requirements. Continue exploring ASP.NET MVC to expand your development skills and create even more user-friendly features. Happy coding!

Note:

In this article, you learned about Bootstrap Select dropdown plugin. You also learned about the integration of the bootstrap style plugin with ASP.NET MVC platform. In addition to it, you have learned about the fetching data from db storing it in Tempdata and returning it to View to bind dropdown

1) Angular Best Practices: Building Scalable and Maintainable Applications

2) How to create custom pipes in Angular With Example

3) Angular 8 Pipes - All Types Of Pipes with Example

4) Learn Angular 8 step by step in 10 Days - Day 1

5) How To Install Angular 8 | Angular 8 Environment setup

6) Understanding What is Flutter and Its Innovative Capabilities

7) Flutter Interview Questions and Answers

8) Flutter vs React Native : A Comprehensive Comparison for Cross-Platform Mobile and Web Development

9) Mastering Angular Directives: Complete Guide for Seamless Web Development

10) Angular Lifecycle Hooks: A Comprehensive Guide with Examples

11) Lazy Loading in Angular: Enhancing App Performance

12) Angular for Beginners: A Comprehensive Introduction and Guide