Available in the Full Version

Combo Box - ASP.NET MVC Helper

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample shows the combo used in a basic ASP.NET MVC scenario. The ASP.NET MVC helper is used to instantiate the combo in the view. In addition, the ComboDataSourceAction attribute is used to process the remote request for the collection of employees as well as process the remote filtering parameters. Finally, you can see how the combo is used in a form to update a field in the model.

Code View

Copy to Clipboard

@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models
@model IgniteUI.SamplesBrowser.Models.Northwind.Order

<!DOCTYPE html>

<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>
    <style>

        .sample-ui div {
            margin-bottom: 1em;
        }

        .sample-ui h4 {
            margin-bottom: .5em;
        }

        .sample-ui #submitBtn {
            width: 100px;
        }

    </style>

    @using (Html.BeginForm())
    {
        <div class="sample-ui">
            @Html.HiddenFor(item => item.OrderID)

            <div>
                <h4>Current Employee:</h4>
                @Html.DisplayFor(item => item.EmployeeName)
            </div>

            <div>
                <h4>Choose New Employee</h4>

                @(Html.Infragistics().ComboFor(item => item.EmployeeID)
                    .Width("270px")
                    .DataSource(Url.Action("employee-combo-data"))
                    .ValueKey("ID")
                    .TextKey("Name")
                    .DataBind()
                    .Render()
                )
            </div>

            <input id="submitBtn" type="submit" value="Update" />
        </div>
    }
</body>
</html>

using IgniteUI.SamplesBrowser.Models.Repositories;
using Infragistics.Web.Mvc;
using System.Web.Mvc;
using System.Linq;
using IgniteUI.SamplesBrowser.Models.Northwind;
using System.Collections.Generic;

namespace IgniteUI.SamplesBrowser.Controllers
{
    public class ComboController : Controller
    {
        //
        // GET: /Combo/

        [ComboDataSourceAction]
        [ActionName("employee-combo-data")]
        public ActionResult ComboData()
        {
            IEnumerable<Employee> employees = RepositoryFactory.GetEmployeeRepository().Get();
            return View(employees);
        }

        [ActionName("aspnet-mvc-helper")]
        public ActionResult UsingAspNetMvcHelper()
        {
            Order order = RepositoryFactory.GetOrderRepository().Get().First();
            return View("aspnet-mvc-helper", order);
        }

        [HttpPost]
        [ActionName("aspnet-mvc-helper")]
        public ActionResult UsingAspNetMvcHelper(Order updatedOrder)
        {
            ItemRepository<Order> orderRepository = RepositoryFactory.GetOrderRepository();
            ItemRepository<Employee> employeeRepository = RepositoryFactory.GetEmployeeRepository();

            Order existingOrder = orderRepository.Get(o => o.OrderID == updatedOrder.OrderID);
            Employee newEmployee = employeeRepository.Get(e => e.ID == updatedOrder.EmployeeID);

            if (existingOrder != null && newEmployee != null)
            {
                existingOrder.EmployeeID = newEmployee.ID;
                existingOrder.EmployeeName = newEmployee.Name;

                orderRepository.Update(existingOrder, o => o.OrderID == existingOrder.OrderID);
                orderRepository.Save();
            }

            return View("aspnet-mvc-helper", existingOrder);
        }

    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace IgniteUI.SamplesBrowser.Models.Northwind
{
    public class Order
    {
        public int OrderID { get; set; }
        public string CustomerID { get; set; }
        public Nullable<int> EmployeeID { get; set; }
        public Nullable<System.DateTime> OrderDate { get; set; }
        public Nullable<System.DateTime> RequiredDate { get; set; }
        public Nullable<System.DateTime> ShippedDate { get; set; }
        public Nullable<int> ShipVia { get; set; }
        public Nullable<decimal> Freight { get; set; }
        public string ShipName { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipRegion { get; set; }
        public string ShipPostalCode { get; set; }
        public string ShipCountry { get; set; }
        public string ContactName { get; set; }
        public string EmployeeName { get; set; }
        public int ShipperID { get; set; }
        public string ShipperName { get; set; }
        public decimal TotalPrice { get; set; }
        public int TotalItems { get; set; }
    }
}

Ignite UI for jQuery | Samples

Search Results

Combo Box - ASP.NET MVC Helper

Current Employee:

Choose New Employee

Code View