DropDownListFor

12 Apr 20226 minutes to read

The DropDownListFor control can be rendered by passing values and data from the model. The selected values can be retrieved during form submit using the post method.

CSHTML

@using (Html.BeginForm())
{
    @Html.EJS().DropDownListFor(model => model.Value).Placeholder("Select a Country").DataSource((IEnumerable<object>)ViewBag.data).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Value = "Name" }).Render()

    <div id="submitbutton">
        @Html.EJS().Button("btn").Content("Post").Render()
    </div>
}

For.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        Countries model = new Countries();
        public ActionResult Index()
        {
            ViewBag.data = new Countries().CountriesList();
            model.Value = "Cameroon";
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(Countries model)
        {
            ViewBag.data = new Countries().CountriesList();
            model.Value = model.Value;
            return View(model);
        }
    }
}

Data Annotation

Data Annotations help us to define the rules to the model classes or properties for data validation and displaying suitable messages to end users.

Data Annotations includes built-in validation attributes for different validation rules, which can be applied to the properties of model class. ASP.NET Framework will automatically enforce these validation rules and display validation messages in the view.

Using value property gets or sets the value of the selected item in the control.

CSHTML

@using (Html.BeginForm())
{
    @Html.EJS().DropDownListFor(model => model.EnquiringAboutSelect).Placeholder("Select a Country").DataSource(Model?.EnquiringAboutSelectListItems).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Value = "Text" }).Placeholder("Please Select Enquiring About").Render()
    <div>
        @Html.ValidationMessageFor(model => model.EnquiringAboutSelect)
    </div>

    <div id="submitbutton">
        @Html.EJS().Button("btn").Content("Post").Render()
    </div>
}

For.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
         public ActionResult Index()
        {
            DataModel model = new DataModel();
            model.EnquiringAboutSelectListItems = new ListItems().getListItems();
            model.EnquiringAboutSelect = "104";
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(DataModel model)
        {
            model.EnquiringAboutSelectListItems = new ListItems().getListItems();
            model.EnquiringAboutSelect = model.EnquiringAboutSelect;
            return View(model);
        }
    }
    public class DataModel
    {
        [Required(ErrorMessage = "The value is Required")]
        public string EnquiringAboutSelect { get; set; }
        public List<ListItems> EnquiringAboutSelectListItems { get; set; }

    }

    public class ListItems
    {
        public string Text { get; set; }
        public string Value { get; set; }
        public List<ListItems> getListItems()
        {
            List<ListItems> items = new List<ListItems>();
            items.Add(new ListItems() { Text = "Aberdeen", Value = "103" });
            items.Add(new ListItems() { Text = "Alexandria", Value = "102" });
            items.Add(new ListItems() { Text = "Albany", Value = "101" });
            items.Add(new ListItems() { Text = "Beacon ", Value = "104" });
            items.Add(new ListItems() { Text = "Brisbane ", Value = "105" });
            return items;
        }
    }
}