Home > DeveloperSection > Beginner > ListBox control in MVC

ListBox control in MVC


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

ListBox control in MVC

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

Create a property in a model class that returns a country list to a caller. In the below model class I had created a property named Countries that return list of country.

using System.Collections.Generic;

using System.Web.WebPages.Html;

using System.ComponentModel.DataAnnotations;

 

namespace ListBoxMVC.Models

{

    public class Country

    {

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

 

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

        public string SelectedCountry { get; set; }

 

        public List<SelectListItem> Countries

        {

            get

            {

              _countries.Add(new SelectListItem() { Text = "India", Value = "India" });

              _countries.Add(new SelectListItem() { Text = "USA", Value = "USA" });

              _countries.Add(new SelectListItem() { Text = "Russia", Value = "Russia" });

              return _countries;

            }

        }

    }

}


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

using System.Web.Mvc;

using ListBoxMVC.Models;

namespace ListBoxMVC.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View(new Country());

        }

        public ActionResult GetValue(Country model)

        {

            return View(model);

        }

    }

}

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

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

 

<!DOCTYPE html>

 

<html>

<head id="Head1" 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 : <br /><br /><%: Html.ListBoxFor(x => x.SelectedCountry,
                                   new SelectList(Model.Countries, "Value""Text"),

                  new { id = "listBox1" , onchange = "selectedIndexChanged()" })%>

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

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

    </div>

    <% } %>

</body>

</html>

 

 

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

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

 

<!DOCTYPE html>

 

<html>

<head runat="server">

    <title>GetValue</title>

</head>

<body>

    <div>

        The selected country is: <b><%: ViewData.Model.SelectedCountry %></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 country in a ListBox.

ListBox control in MVC

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

ListBox control in MVC

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


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

Follow MindStick