Please enable Javascript for better experience...
Bind DropDownList with Enum in MVC
By Big | Apr 30, 2014 | In Articles | Update: Sep 22, 2014 | Total Views [ 1999 ]
Taged In
(1 Like)
Rate

If you want to bind a dropdown list in MVC with Enum then this article is surely for you. In this article I will show how can we bind a DropDownList with Enum with the help of SelectList in MVC.

Introduction

Mostly we bind dropdown list with a list coming from database but let suppose I have a list of four-five records and I want to show these items in dropdown list. In this case I don't want to first save these in database and then retrieve from database as list and binding to my dropdown list. What if I can create a simple Enum for my list and can bind my dropdown list with this. Here in this article I will try to explain, how can we bind a dropdown list from a enum in MVC. 

Let's start step by step. I will start with Enum first.

Enum (Enumerator)

I am creating a sample enum for category. Below is my sample enum with few records.

 enum CategoryEnum { Account=1, Admin=2, HR=3, Employee=4}

Controller

Now I am creating a controller and naming it as ExampleController and will put some code in it to create a list from enum and put in ViewData. Below is my controller code. My function GetEnumList() is simply creating a SelectList from enum and adding DataValue and DataText to it.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

public class ExampleController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Category = GetEnumList();
            return View();
        }
        SelectList GetEnumList()
        {
            var list = from CategoryEnum e in Enum.GetValues(typeof(CategoryEnum))
                       select new { ID = (int)e, Category = e.ToString() };
            return new SelectList(list, "ID", "Category", 2);
        }
    }

View

At last it is time to create a view for my sample so that I can see my dropdown here. So let's create a view. Below is the code for my view.

<h2>Bind DropDownList with Enum</h2>
<div class="section">
    
        <div class="line">
            <div class="line-heading">Name</div>
            <div class="line-input"><input type="text"/> </div>
        </div>
        <div class="line">
            <div class="line-heading">Category</div>
            <div class="line-input">@Html.DropDownList("CategoryId", (SelectList)ViewBag.Category, "---Select----")</div>
        </div>
    <div class="line">
        <div class="line-heading">&nbsp;</div>
        <div class="line-input"><input type="button" id="btn" name="btn" value="Click to test" /></div>
    </div>
 </div>

Client side script

I am adding few lines of script so that I can test my implementation.

<script>
    $("#btn").on("click", function () {
        alert($("#CategoryId").val());
    });
</script>

And I am done. See how simple it was. So use it and try yourself. Hope it helps you.

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment