In this article, we will learn how to bind DropDownList using ViewBag in ASP.NET Core MVC. Let's learn step by step by creating an ASP.NET Core application.
Step 1: Create ASP.NET Core MVC Application
- Start then All Programs and select "Microsoft Visual Studio 2019".
- Once the Visual Studio Opens, Then click on Continue Without Code.
- Then Go to Visual Studio Menu, click on File => New Project then choose ASP.NET Core Web App (Model-View-Controller) Project Template.
- Then define the project name, location of the project, Target Framework, then click on the create button.
The preceding steps will create the ASP.NET Core MVC application. If you are new to the ASP.NET core and know how to create an ASP.NET Core application in depth, then refer to my following article.
Step 2: Add controller class
Delete the existing controller for ease of understanding, then add a new controller by right clicking on the Controller folder in the created ASP.NET Core MVC application, give the Controller name Home or as you wish as in the following.
Now open the HomeController.cs file and write the following code into the Home controller class as in the following.
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.Rendering; using System.Collections.Generic; namespace BindDropDownList.Controllers { public class HomeController : Controller { public IActionResult Index() { //Creating the List of SelectListItem, this list you can bind from the database. List<SelectListItem> cities = new() { new SelectListItem { Value = "1", Text = "Latur" }, new SelectListItem { Value = "2", Text = "Solapur" }, new SelectListItem { Value = "3", Text = "Nanded" }, new SelectListItem { Value = "4", Text = "Nashik" }, new SelectListItem { Value = "5", Text = "Nagpur" }, new SelectListItem { Value = "6", Text = "Kolhapur" }, new SelectListItem { Value = "7", Text = "Pune" }, new SelectListItem { Value = "8", Text = "Mumbai" }, new SelectListItem { Value = "9", Text = "Delhi" }, new SelectListItem { Value = "10", Text = "Noida" } }; //assigning SelectListItem to view Bag ViewBag.cities = cities; return View(); } } }
Step 3: Add View
Add an empty view named Index.cshtml and write the following code.
@{
ViewData["Title"] = "Home Page";
}
<hr />
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label"> Select City</label>
<select name="products" class="form-control" asp-items="@ViewBag.cities"></select>
</div>
</div>
</div>
Step 4: Run the Application.
Now press Keyboard F5 or Visual Studio run button to run the application. After running the application, the output will be shown on the browser, as in the following screenshot.
I hope, from all the above examples, you have learned how to bind the DropDownList using ViewBag in ASP.NET Core MVC.
Post a Comment