Handle Dropdown Selected Index Change Event in C# ASP.NET MVC

How to Handle Dropdown Selected Index Change Event in C# ASP.NET MVC

Introduction

Dropdown lists are commonly used in web applications to allow users to select one option from a list of choices. In ASP.NET 5 MVC, you can easily implement a dropdown list and perform actions when the selected index of the dropdown changes.

To get started, let's assume that you have a model class called "Person" with properties such as "FirstName" and "LastName". We will create a dropdown list that contains a list of persons and display their full names. When the selected index changes, we will show a message with the selected person's full name.

First, create a new ASP.NET 5 MVC project and add a new controller called "HomeController". Add an action method called "Index" that returns the view for our dropdown list.

public class HomeController : Controller
{
    public IActionResult Index()
    {
        // Sample list of persons
        List<Person> persons = new List<Person>
        {
            new Person { FirstName = "John", LastName = "Doe" },
            new Person { FirstName = "Jane", LastName = "Smith" },
            new Person { FirstName = "Mike", LastName = "Johnson" }
        };

        // Create a SelectList from the list of persons
        SelectList selectList = new SelectList(persons, "LastName", "FullName");

        // Pass the SelectList to the view
        ViewBag.Persons = selectList;

        return View();
    }

    [HttpPost]
    public IActionResult Index(string selectedPerson)
    {
        // Retrieve the selected person's full name
        string fullName = selectedPerson;

        // You can perform any other actions here

        // Pass the selected person's full name to the view
        ViewBag.SelectedPerson = fullName;

        // Redirect to the same view
        return RedirectToAction("Index");
    }
}

Next, create a view called "Index.cshtml" and add the following code to render the dropdown list.

@{
    ViewData["Title"] = "Select Index Change Dropdown";
}

<h2>Select Index Change Dropdown Example</h2>

@using (Html.BeginForm())
{
    <div class="form-group">
        @Html.Label("Persons")
        @Html.DropDownList("selectedPerson", ViewBag.Persons as SelectList, "Select a person", new { @class = "form-control", onchange = "this.form.submit();" })
    </div>
}

@if (!string.IsNullOrEmpty(ViewBag.SelectedPerson))
{
    <div class="alert alert-info">
        You have selected: @ViewBag.SelectedPerson
    </div>
}

In this view, we use Html.BeginForm() it to create a form that wraps our dropdown list. The Html.DropDownList helper is used to create the dropdown list itself. We specify the name of the dropdown ("selectedPerson"), the list of persons passed from the controller ("ViewBag.Persons"), a default message to display when nothing is selected ("Select a person"), and some CSS classes for styling.

Notice the onchange attribute on the dropdown. This attribute is used to submit the form whenever the selected index changes. We also use this.form.submit() it to trigger the form submission.

Finally, we check if ViewBag.SelectedPerson is not null or empty. If it has a value, we display a message indicating the selected person's full name.

Summary

That's it! You can now run the application and see the dropdown list in action. Whenever you select a person from the list, the form will be submitted, and the selected person's full name will be displayed.

I hope this Blog helps you understand how to handle the dropdown selected index change event in C# ASP.NET MVC.