I am using 2 combo boxes for drop downs. The combo boxes are cascading combo boxes, where  one combo box value should be populated based on the selected value in the combo box. Here is  my view, controller and model code. Please any one can help me. Many thanks in advance

//View .

 

@using Infragistics.Web.Mvc

@model SEWSE.Commercial.UI.Web.Models.IndexedMaterialPriceChangeViewModel

 

@{

    ViewBag.Title = "IndexedMaterialPriceChange";

}

 

<h2>IndexedMaterialPriceChange</h2>

 

@section Head

{

    <style type="text/css">

        input.button-style {

            margin-top: 10px;

        }

 

        .ui-iggrid th, .ui-iggrid th.ui-state-default, .ui-iggrid th.ui-state-hover, .ui-iggrid th.ui-state-active {

            text-align: left;

            white-space: pre-wrap;

        }

 

        div#layout {

            background-color: #777;

            padding: 15px;

            border-radius: 5px;

            /*border-top-left-radius: 5px;

                border-top-right-radius: 5px;

                border-bottom-left-radius: 5px;

                border-bottom-right-radius: 5px;*/

        }

 

        div#layout .left p, div#layout .right p, div#layout .center p, div#layout h3 {

            margin: 15px;

        }

 

        div#layout .center {

            background-color: #EEE;

            color: #555;

        }

 

        div#layout .right {

            background-color: #555;

            color: #EEE;

            border-radius: 5px;

        }

 

        div#layout .left {

            padding-left: 20px;

            background-color: #EEE;

            border-radius: 5px;

        }

 

        div#layout .header {

            background-color: #2CBDF9;

        }

 

        div#layout .footer {

            background-color: #2CBDF9;

        }

 

        .hidden {

            display: none !important;

        }

    </style>

<script>

    $(document).ready(function () {

        $("#projectCombo").prop("disabled", true);

        $("#customerCombo").change(function () {

            if ($("#customerCombo").val() != "Please select") {

                var options = {};

                options.url = "/IndexedMaterialPriceChange/getproject";

                options.type = "POST";

                options.data = JSON.stringify({ country: $("#customerCombo").val() });

                options.dataType = "json";

                options.contentType = "application/json";

                options.success = function (states) {

                    $("#projectCombo").empty();

                    for (var i = 0; i < states.length; i++) {

                        $("#projectCombo").append("<option>" + states[i] + "</option>");

                    }

                    $("#projectCombo").prop("disabled", false);

                };

                options.error = function () { alert("Error retrieving !"); };

                $.ajax(options);

            }

            else {

                $("#projectCombo").empty();

                $("#projectCombo").prop("disabled", true);

            }

        });

    });

 

</script>

 

}

@section Body {

    <h2>@ViewBag.Title</h2>

    @using (Ajax.BeginForm("Index","./IndexedMaterialPriceChange/IndexedMaterialPriceChange", new AjaxOptions { UpdateTargetId = "result" }))

    {

        <fieldset>

            <div id="layout" style="width: 100%; height: 400px; display: block">

 

                <div id="crossprojectpriceGridDiv" class="left" style="width: 100%">

                    <table>

                        <tr>

                            <td><h4> Customer</h4></td>

                            <td>

                                @(Html.Infragistics().ComboFor(m => m.ComponentSalesPrice.CustomerId)

                      .ID("customerCombo")

                      .Width("200px")

                      .DataSource(Model.Customers)

                      .ValueKey("Id")

                      .TextKey("CustomerName")

                      .NullText("Select a Customer")

                      .ValidatorOptions(options => options.Required(true))

                      .DataBind()

                      .Render()

                                )

                                @Html.HiddenFor(m => m.ComponentSalesPrice.CustomerId, new { @id = "CustomerId" })

                            </td>

                        </tr>

                       

                        <tr>

                            <td>

                                <h4>Project</h4>

                            </td>

                            <td>

 

                                @(Html.Infragistics().ComboFor(m => m.ComponentSalesPrice.ProjectId)

                          .ID("projectCombo")

                          .Width("200px")

                          .ValidatorOptions(options => options.Required(true))

                          .DataBind()

                          .Render()

                                )

                                @Html.HiddenFor(m => m.ComponentSalesPrice.ProjectId, new { @id = "ProjectId" })

                            </td>

                        </tr>

                        <tr>

                            <td>

                                <h4>Previous Event</h4>

                            </td>

 

                            <td>

                                @(Html.Infragistics().ComboFor(m => m.ComponentSalesPrice.EventId)

                                      .ID("preveventCombo")

                                      .Width("200px")

                                      .DataSource(Model.EventId)

                                      .ValueKey("Id")

                                      .TextKey("EventId")

                                      .NullText("Select an event")

                                      .ValidatorOptions(options => options.Required(true))

                                      .DataBind()

                                      .Render()

                                      )

                                @Html.HiddenFor(m => m.ComponentSalesPrice.EventId, new { @id = "Id" })

                            </td>

                        </tr>

                        <tr>

                            <td>

                                <h4>New Event</h4>

                            </td>

 

                            <td>

                                @(Html.Infragistics().ComboFor(m => m.ComponentSalesPrice.EventId)

                                      .ID("neweventCombo")

                                      .Width("200px")

                                      .DataSource(Model.Events)

                                      .ValueKey("Id")

                                      .TextKey("EventDescription")

                                      .NullText("Select an event")

                                      .ValidatorOptions(options => options.Required(true))

                                      .DataBind()

                                      .Render()

                                )

                                @Html.HiddenFor(m => m.ComponentSalesPrice.EventId, new { @id = "Id" })

                            </td>

                        </tr>

                        <tr>

                            <td>

                                <h4>New Start Date </h4>

                            </td>

                            <td>

                                @(Html.Infragistics().TextEditorFor(m => m.ComponentSalesPrice.EffectiveStartDate)

                                      .ID("EffectiveStartDate")

                                      .Width(205)

                                      .MaxLength(4)

                                      .NullText("Enter an Effective Start Date")

                                      .ValidatorOptions(options => options.OnBlur(false).OnChange(false).OnSubmit(true))

                                      .Required(true)

                                      .Render()

                                      )

                            </td>

                        </tr>

                        <tr>

                            <td><h4> New End Date</h4></td>

                            <td>

                                @(Html.Infragistics().TextEditorFor(m => m.ComponentSalesPrice.EffectiveEndDate)

                          .ID("EffectiveEndDate")

                          .Width(205)

                          .MaxLength(4)

                          .NullText("Enter an Effective End Date")

                          .ValidatorOptions(options => options.OnBlur(false).OnChange(false).OnSubmit(true))

                          .Required(true)

                          .Render()

                                )

                            </td>

                        </tr>

                        <tr>

                            <td>

                                <input type="button" id="AmendPrice" class="button-style" value="Amend Price" />

                            </td>

                        </tr>

</table>

                </div>

 

            </div>

        </fieldset>

    }

}

 

 

// Controller:

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Reflection;

using System.Web.Mvc;

using SEWSE.Commercial.Entities.CSP;

using SEWSE.Commercial.Entities.Masters;

using SEWSE.Commercial.UI.Process;

using SEWSE.Commercial.UI.Web.Models;

 

namespace SEWSE.Commercial.UI.Web.Controllers.CspModule

{

    public   partial class CspModuleController

    {

        public ActionResult IndexedMaterialPriceChange()

        {

            ViewBag.DllVersion = Assembly.GetExecutingAssembly().GetName().Version.ToString();

 

            var ppc = new ProjectProcessComponent();

            var custpc = new CustomerProcessComponent();

            var epc = new EventProcessComponent();

            var csp = new ComponentSalesPriceProcessComponent();

            var viewModel = new IndexedMaterialPriceChangeViewModel

            {

 

                Customers = custpc.Select(),

                Projects = ppc.Select(),

                Events = epc.Select(),

                };

 

            return View(viewModel);

        }

        public JsonResult GetProject(int customer)

        {

            List<string> projectsList = new List<string>();

            var project = new ComponentSalesPriceProcessComponent();

            var projects = project.SelectByCustomerId(customer);

            foreach (ComponentSalesPrice proj in projects)

            {

                projectsList.Add(proj.ProjectId.ToString());

            }

 

 

            return Json(projectsList);

        }

        public void SaveIndexedMaterialPriceChange()

        {

 

        }

 

    }

}

 

//Model:

namespace SEWSE.Commercial.UI.Web.Models

{

    public class IndexedMaterialPriceChangeViewModel

    {

        public IEnumerable<Customer> Customers { get; set; }

        public IEnumerable<Project> Projects { get; set; }

        public IEnumerable<Event> Events { get; set; }

        public IEnumerable<ComponentSalesPrice> ComponentSalesPrices { get; set; }

        public ComponentSalesPrice ComponentSalesPrice { get; set; }

        public List<ComponentSalesPrice> EventId { set; get; }

        

    }

}