Llenar DropDownlist con MVC 4.5 Json

1.) Primer paso a ser un proyecto, File --> New Project



2.) Se solicitara que seleccione el tipo de proyecto, seleccione MVC.



3.) Para realizar el ejemplo, necesitamos datos, utilizaremos Entity Framework,  en la carpeta de "Model" presione clic derecho, y luego "New Item".



4.) En la sección de Data seleccione "Ado .Net Entity Data Model"



5.) Se mostrara la pantalla para que seleccione "Generate from database"



6.) Se solicitara la pantalla para que ingrese sus credenciales.



7.) Se mostrara la pantalla para seleccionar las tablas, seleccione "Categories","Products" y "Suppliers"



 Ahora vamos a crear el controlador de la tabla "Products" y generamos con Scaffold las vistas, no olvide generar el proyecto.

8.) Agregado el controller, en la carpeta "Controller" clic derecho "add new item"


9.) En la pantalla de "Add Scaffold" selecionamos "MVC 5 Controller with views using Entity Framework"



10.) En la pantalla de Add Controller complete con lo siguiente. (No olvide compilar antes), esto generar las vistas de "products"



Por fin tenemos vistas con DropDownlist para jugar, si ejecutamos el proyecto y entramos "Productos/Create" podremos ver que tiene los DropDownlist de "Categoria" y "Proveedores"


Debemos de crear los métodos que retornen json para su posterior uso.

11.)  Abra la el controllador de Productos Ubicado en Controllers, el nombre será "ProductsController" y agregue el siguiente código:

 public JsonResult getcategories() 
        { 
            var query = from c in db.Categories 
                        select new { c.CategoryID, c.CategoryName };

            return Json(query,JsonRequestBehavior.AllowGet); 

        } 

 public JsonResult getsuppliers() 
        { 
            var query = from s in db.Suppliers 
                        select new {s.SupplierID, s.CompanyName };

            return Json(query, JsonRequestBehavior.AllowGet); 

        }

12.)  En este mismo controlador, debemos de comentar el código de llenado de los viewbag que usan los  Dropdownlist en el método create.

public ActionResult Create() 
{ 
//ViewBag.CategoryID = new SelectList(db.Categories, "CategoryID", "CategoryName"); //ViewBag.SupplierID = new SelectList(db.Suppliers, "SupplierID", "CompanyName"); 
 return View(); 
}

Procederemos a llenar el DropDownlist de Suppliers y Category con Json.

13.) Abra el archivo de "Create" ubicado en "View" --> "Products" --> "Create.cshtml"



Al abrir el archivo debemos de comentar los Dropdownlist de Razor y cambiarlos por select de html.

Cambia:

@Html.DropDownList("SupplierID", String.Empty)

Por:

<select name="SupplierID" id="SupplierID"> 
      <option value="">Seleccione uno...</option> 
</select> 
                 
             

Cambia:

@Html.DropDownList("CategoryID", String.Empty)

Por:

<select name="CategoryID" id="CategoryID"> 
            <option value="">Seleccione uno...</option> 
</select> 
               

15.) En el mismo archivo "Create.cshtml" debemos agregar el Json de llenado, busque la  sección "Script" y reemplace por los siguiente:

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
    <script> 
        $(document).ready(function () { 
            load_categories(); 
            load_suppliers(); 
        }); 

        function load_categories() { 
            $.get( 
                  '@Url.Action("getcategories", "products")' 
               ) 
              .done(function (data) { 
                  $.each(data, function (i, row) { 
                      var $option = $('<option>');
                      $option.val(row.CategoryID); 
                      $option.html(row.CategoryName); 
                      $('#CategoryID').append($option); 
                  }) 
              }) 
              .fail(function (data) { 
                  console.log('error !!!'); 
              } 
          ); 
        } 

        function load_suppliers() { 
            $.get( 
                '@Url.Action("getsuppliers", "products")' 
             ) 
            .done(function (data) { 
                $.each(data, function (i, row) { 
                    var $option = $('<option>');
                    $option.val(row.SupplierID); 
                    $option.html(row.CompanyName); 
                    $('#SupplierID').append($option); 
                }) 
            }) 
            .fail(function (data) { 
                console.log('error !!!'); 
            } 
        ); 
        } 
    </script> 
} 

El resultado sera: