ASP.NET MVC Controls > Controls > Input > Controls > ListBox > Quick Start |
This topic demonstrates how to add a ListBox control to your application. For information on how to add ASP.NET MVC Edition controls, see Adding Controls.
This topic comprises of three steps:
The following image shows how the ListBox appears after completing the steps above. The example uses model Cities.cs added in the ComboBox QuickStart.
Create a new MVC application using the ComponentOne templates. For more information about creating an MVC application, see Configuring your MVC Application topic.
Add a new Controller:
Default1Controller
).Index()
with the following method.
C# |
Copy Code
|
---|---|
public ActionResult Index() { ViewBag.Cities = MVCFlexGrid.Models.Cities.GetCities(); return View(); } |
Add a View for the controller:
Default1Controller
) to open it.Index()
.Index.cshtml
to open it.Index.cshtml
file with the code given below to initialize a ListBox control.
Razor |
Copy Code
|
---|---|
@{
List<string> cities = ViewBag.Cities;
}
<div>
<label>Select your city:</label>
@(Html.C1().ListBox()
.Bind(cities)
.Width(250).Height(150)
)
</div>
|
HTML |
Copy Code
|
---|---|
@{ List<string> cities = ViewBag.Cities; } <div> <label>Select your city:</label> <div id="list" style="width:250px;height:150px"></div> <c1-list-box id="list" selected-index=0 on-client-selected-index-changed="selectedIndexChanged"> <c1-items-source source-collection="@cities"></c1-items-source> </c1-list-box> </div> |
Append the folder name and view name to the generated URL (for example: http://localhost:1234/Default1/index) in the address bar of the browser to see the view. Or link the view to the home page. |