Home > DeveloperSection > Beginner > DropDownList control in MVC

DropDownList control in MVC


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 17920  View(s)
Rate this:

DropDownList control in MVC

In this article, I am explaining how to add items in DropDownList and how to get selected item from DropDownList in ASP.NET MVC.

Create a property in a model class that returns a product list to a caller. In the above model class I had created a property named Product that return list of product.

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Web.WebPages.Html;

 

namespace DropDownMVC.Models

{

    public class Article

    {

        private List<SelectListItem> _products = new List<SelectListItem>();

 

        [Required(ErrorMessage = "Please select a product")]

        public string SelectedProduct { get; set; }

 

        public List<SelectListItem> Products

        {

            get

            {

                _products.Add(new SelectListItem() {Text = "KeyBoard", Value =
                                                                        "KeyBoard" });

                _products.Add(new SelectListItem() {Text="Monitor",Value = "Monitor" });

                return _products;

            }

        }

    }

}

 

In a Controller class, Index action returns a model class objects to view. Like in the above Controller I passed the model class object to both the Index and GetValue View;

using System.Collections.Generic;

using System.Web.Mvc;

using DropDownMVC.Models;

namespace DropDownMVC.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index() {

            return View(new Article());

        }

        public ActionResult GetValue(Article model){

            return View(model);

        }

    }
}

In below Index view I have created a DropDownList and use a Model property to fill the items in DropDownList. I also show that how to call java script method through onchange event of DropDownList (onchange="selectedIndexChanged()").
When you click on submit button it will call another view (GetValue) and show the selected value of DropDownList.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<DropDownMVC.Models.Article>" %>

 

<!DOCTYPE html>

 

<html>

<head runat="server">

    <title>Index</title>

        <script type="text/javascript">

            function selectedIndexChanged() {

            }

        </script>

</head>

<body>

    <% using (Html.BeginForm("GetValue","Home",FormMethod.Post))

    {%>

    <div>

        Select a product: <%:Html.DropDownListFor(x => x.SelectedProduct,
        new SelectList(Model.Products, "Value", "Text"), "Please Select a product",
        new { id = "dropDown1", onchange="selectedIndexChanged()" })%> 

        <%: Html.ValidationMessageFor(x => x.SelectedProduct) %>  <br /><br />

        <input type="submit" value="Submit" />

    </div>

    <% } %>

</body>

</html>


In the GetValue View, I had used Model property to show the selected DropDownList value.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<DropDownMVC.Models.Article>" %>

 

<!DOCTYPE html>

 

<html>

<head runat="server">

    <title>GetValue</title>

</head>

<body>

    <div>

        The selected product is: <b><%: ViewData.Model.SelectedProduct %></b>

    </div>

</body>

</html>

 

After completing the above process you can see an output of your project by pressing F5. In the browser it will show you the list of product in a DropDownList.

DropDownList control in MVC

When you select a product and click on submit button, it will show the selected product in the GetValue view.

DropDownList control in MVC

By using above process you can simply learn that how to add items in the DropDownList and get a selected value from the DropDownList in MVC.


Don't want to miss updates? Please click the below button!

Follow MindStick