Here In this article, I am explaining how to add items in ListBox and how to get selected items 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 a list of countries.
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 object 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);
}
}
}
<%@ 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 a 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.
When you select a country and click on the submit button, it will show the selected country in the GetValue view.
By using the above process you can simply learn how to add items in the ListBox and get selected value from the ListBox in MVC.
Leave Comment