# Model Binding

You can implement model binding in the DropDownList with both [local data](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/binding/model-binding#local-data) and [remote data](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/binding/model-binding#remote-data).

## Local Data

Local data is the data that is available on the client when the DropDownList is initialized.

1. Pass the data to the view through `ViewData`.

   ```
    public ActionResult Index()
    {
        ViewData["products"] = GetProducts();

        return View(new ProductViewModel
        {
            ProductID = 4,
            ProductName = "ProductName4"
        });
    }

    private static IEnumerable<ProductViewModel> GetProducts()
    {
        var products = Enumerable.Range(0, 2000).Select(i => new ProductViewModel
        {
            ProductID = i,
            ProductName = "ProductName" + i
        });

        return products;
    }
   ```

2. Add the DropDownList to the view and bind it to the data that is saved in the `ViewData`.

   ```Razor HtmlHelper
       @model MvcApplication1.Models.ProductViewModel

       @(Html.Kendo().DropDownListFor(m => m.ProductID)
           .DataValueField("ProductID")
           .DataTextField("ProductName")
           .BindTo((System.Collections.IEnumerable)ViewData["products"])
       )
   ```

## Remote Data

You can configure the DropDownList to get its data from a remote source by making an AJAX request.

1. Create an action that returns the data as a JSON result.

   ```
    public ActionResult Index()
    {
        return View(new ProductViewModel
        {
            ProductID = 4,
            ProductName = "ProductName4"
        });
    }
    
    public JsonResult GetProductsAjax()
    {
        var products = Enumerable.Range(0, 500).Select(i => new ProductViewModel
        {
            ProductID = i,
            ProductName = "ProductName" + i
        });

        return Json(products, JsonRequestBehavior.AllowGet);
    }
    
   ```

2. Add the DropDownList to the view and configure its DataSource to use remote data.

   ```Razor HtmlHelper
       @model MvcApplication1.Models.ProductViewModel

       @(Html.Kendo().DropDownListFor(m => m.ProductID)
           .Filter("contains")
           .DataTextField("ProductName")
           .DataValueField("ProductID")
           .OptionLabel("Select product...")
           .DataSource(source =>
           {
               source.Read(read =>
               {
                   read.Action("GetProductsAjax", "Home");
               })
               .ServerFiltering(false);
           })
       )
   ```

## See Also

* [Server-Side API of the DropDownList HtmlHelper](https://www.telerik.com/aspnet-mvc/documentation/api/dropdownlist)