Strongly Typed HTML Helper

27 Apr 201812 minutes to read

The DropDownList control supports strongly typed HTML helpers which uses lambda expression to refer models or view models passed to a view template. These helpers allow you to define the value of the DropDownListFor from the model. The following steps explain how to use the strongly typed helpers to create DropDownListFor.
Add a class named “DropDownListModel” in the Models folder and replace the code with the following code:

C#

public class DropDownListModel
    {
        [Display(Name = "Drop Down")]
        public List<DropDownValue> DropData { get; set; }
    }

    public class DropDownValue
    {
        public string Text { get; set; }
        public string Value { get; set; }

    }

In the controller, pass the model to the View.

C#

using MvcApplication.Models;
    using Syncfusion.JavaScript.Models;
        public ActionResult DropdownlistFeatures()
        {
            DropDownListModel model = new DropDownListModel();
            BindingData();
            return View(model);
         }
        public void BindingData()
        {
            List<DropDownValue> data = new List<DropDownValue>() { };
            data.Add(new DropDownValue() { Value = "item1", Text = "List Item 1" });
            data.Add(new DropDownValue() { Value = "item2", Text = "List Item 2" });
            data.Add(new DropDownValue() { Value = "item3", Text = "List Item 3" });
            data.Add(new DropDownValue() { Value = "item4", Text = "List Item 4" });
            data.Add(new DropDownValue() { Value = "item5", Text = "List Item 5" });
            DropDownListProperties obj = new DropDownListProperties();
            obj.DataSource = data;
            DropDownListFields fields = new DropDownListFields();
            fields.Text = "Text";
            fields.Value = "Value";
            obj.DropDownListFields = fields;
            ViewData["properties"] = obj;
        }

In View, invoke the strongly typed DropDownListFor helper with the lambda expression to set the default value.

RAZOR

@model MvcApplication.Models. DropDownListModel

    @Html.EJ().DropDownListFor(Model => Model.DropData,(Syncfusion.JavaScript.Models.DropDownListProperties)ViewData["properties"])

Cascading operation can be performed in DropDownListFor.

Defines the Employee class as follows

C#

public class DropDownListModel
        {
            public List<Employee> DropData { get; set; }
            public List<DeptDetails> getDept { get; set; }
        }
        public class Employee
        {
            public string Name { get; set; }
            public string Department { get; set; }
        }
        public class DeptDetails
        {
            public string Department { get; set; }
            public string Subject { get; set; }
        }

In controller, defines Data source and properties for the both DropDownLists. The model will be passed to the view page. Here “DropDownListModel” class will be passed to the view.

C#

public ActionResult DropdownlistFeatures()
        {
            List<Employee> data = new List<Employee>() { };
            data.Add(new Employee() { Name = "Nancy", Department = "Computer Science" });
            data.Add(new Employee() { Name = "Angel", Department = "Mechanics" });
            data.Add(new Employee() { Name = "Prince", Department = "Electronics Communication" });
            data.Add(new Employee() { Name = "John", Department = "Information Technology" });
            data.Add(new Employee() { Name = "Daniha", Department = "Marine" });

            DropDownListModel model = new DropDownListModel();
            
            DropDownListProperties obj = new DropDownListProperties();
            DropDownListFields fields = new DropDownListFields();
            obj.DataSource = data;
            obj.CascadeTo = "getDept";
            fields.Text = "Name";
            fields.Value = "Department";
            obj.DropDownListFields = fields;
            ViewData["properties"] = obj;

            List<DeptDetails> dept = new List<DeptDetails>() { };
            dept.Add(new DeptDetails() { Department = "Computer Science", Subject = "Software Engineering" });
            dept.Add(new DeptDetails() { Department = "Computer Science", Subject = "Software Testing" });
            dept.Add(new DeptDetails() { Department = "Computer Science", Subject = "Web Technology" });
            dept.Add(new DeptDetails() { Department = "Computer Science", Subject = "Data Ware Housing" });
            dept.Add(new DeptDetails() { Department = "Mechanics", Subject = "Thermal Engineering" });
            dept.Add(new DeptDetails() { Department = "Mechanics", Subject = "Materials Engineering, Composites." });
            dept.Add(new DeptDetails() { Department = "Mechanics", Subject = "Statics and dynamics" });
            dept.Add(new DeptDetails() { Department = "Mechanics", Subject = "Strength of materials and solid mechanics" });
            dept.Add(new DeptDetails() { Department = "Electronics Communication", Subject = "Signals & Systems" });
            dept.Add(new DeptDetails() { Department = "Electronics Communication", Subject = "Electromagnetic Engineering" });
            dept.Add(new DeptDetails() { Department = "Electronics Communication", Subject = "Electronics Communication" });
            dept.Add(new DeptDetails() { Department = "Information Technology", Subject = "Analog Electronic Circuits" });
            dept.Add(new DeptDetails() { Department = "Marine", Subject = "Effects of waves" });
            dept.Add(new DeptDetails() { Department = "Marine", Subject = "Towing and mooring" });
            dept.Add(new DeptDetails() { Department = "Marine", Subject = "Ocean structures" });

            DropDownListProperties deptProperties = new DropDownListProperties();
            DropDownListFields objFields = new DropDownListFields();
            deptProperties.DataSource = dept;
            deptProperties.Enabled = false;
            objFields.Text = "Subject";
            objFields.Value = "Department";
            deptProperties.DropDownListFields = objFields;
            ViewData["Department"] = deptProperties;

            return View(model);
         }

C#

@Html.EJ().DropDownListFor(Model => Model.DropData, (Syncfusion.JavaScript.Models.DropDownListProperties)ViewData["properties"])

        @Html.EJ().DropDownListFor(Model => Model.getDept, (Syncfusion.JavaScript.Models.DropDownListProperties)ViewData["Department"])