Binding Wijcombobox in MVC Using ADO.Net Entity Model

C1ComboBox can be easily bound to a DataSource at runtime in an ASP.NET application. But how do you bind Wijcombobox in an ASP.NET MVC application. Well, it's equally simple. This Blog explains how you can bind Wijcombobox to an ADO.NET Entity model.

Initializing wijcombobox

Create an MVC Wijmo application and open Index.cshtml under the Views>Home folder. Add a 'select' tag as below and initialize it as a wijcombobox widget.

<select id="combobox"></select>  

<script type="text/javascript">  
   $(document).ready(function () {  
      $("#combobox").wijcombobox();  
   });  
</script>

Creating the Entity Model

For creating the Entity model, you can follow the steps given in the documentation for wijgrid.

Passing values from the Model to the View

Create an instance of the C1NWind entities in the Home Controller.

C1NWindEntities C1NWind = new C1NWindEntities();

Once we've done that, we'll cast the result from the Entity to a List and pass it across to the view.

public ActionResult Index()  
{  
   ViewBag.Message = "Customers";  
   var customers = C1NWind.Customers.ToList();  
   return View(customers);  
}

Populating wijcombobox

Now, we need to add items to wijcombobox from the list of Customers. For this, we'll add options to the tag using the following Razor syntax. You can specify which field you wish to be displayed in wijcombobox like I've displayed CustomerID field.

<select id="combobox">  
   @foreach (var p in Model)  
   {  
      <option>@p.CustomerID</option>  
   }  
</select>

Run the application. Refer to the attached sample for complete implementation. Download Sample