making cascading dropdownlist

Question

I am trying to make cascading dropdown list in ASP.NET MVC4, both values for my dropdown list's comes from methods, so am in trouble how to pass value form one dropdown list to another.

Here's how I get values for the first dropdown list:

var CampaignInfo1 = CampaignManagementService.GetAdvertisers((string)Session["ticket"]);
List<CampaignList1> items1 = new List<CampaignList1>();
foreach (var element in CampaignInfo1)
{
    items1.Add(new CampaignList1() { ID1 = element.Key, Name1 = element.Value });
}
var listOfCamp1 = new SelectList(items1, "ID1", "Name1", 1);
ViewData["list1"] = listOfCamp1;

And dropdown list in view:

@Html.DropDownList("list1", ViewData["list1"] as SelectList, "-- Select Client -1-")

The second dropdown list value am getting almost same method:

var CampaignInf = CampaignManagementService.GetCampaigns((string)Session["ticket"], IDFromfirstDDL);
List<AlreadyCreatedCampaignList> itemas = new List<AlreadyCreatedCampaignList>();
foreach (var element in CampaignInf)
{
    itemas.Add(new AlreadyCreatedCampaignList() { campID = element.Key, campName = element.Value });
}
var listOfCam = new SelectList(itemas, "campID", "campName", 1);
ViewData["clist"] = listOfCam;

But there is a problem that in method GetCampaigns I have to pass the id(IDFromfirstDDL) which I get from first DDL, and only then method return values which are for that id. The problem is that I don't know how to pass that selected value from first DDL to second, without any form submit, because I need that second DDL changes his values immediately after first DDL changes.

Answer 1

i made it combining http://kruisit.nl/articles/asp.net-mvc-linked-dropdown/ and http://www.appelsiini.net/projects/chained jquery chained selector this article

currently using in my site

public static class LinkedDropdownHelper
        {
            #region Methods

            public static MvcHtmlString LinkedDropdownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string parent, IEnumerable<LinkedSelectListItem> selectList ,bool removedefault=false)
            {
                ModelMetadata metadata = ModelMetadata.FromLambdaExpression( expression,htmlHelper.ViewData );
                var selectedvalue = metadata.Model;
                string propertyName = metadata.PropertyName; 
                TagBuilder select = new TagBuilder("select");
                select.Attributes.Add("id", propertyName);
                select.Attributes.Add("name", propertyName);
                //select.Attributes.Add("class", "linked-dropdown");
                select.Attributes.Add("class", parent);

                foreach (var item in selectList)
                {
                    if (removedefault && item.Value == "-1")
                    {
                        //skip default
                    }
                    else
                    {
                        TagBuilder option = new TagBuilder("option");
                        option.InnerHtml = item.Text;
                        option.Attributes.Add("value", item.Value);
                        option.Attributes.Add("class", item.LinkValue);

                        if (item.Selected)
                        {
                            option.Attributes.Add("selected", "selected");
                        }
                        select.InnerHtml += option.ToString(TagRenderMode.Normal);
                    }
                }
                //below code was changed by abdurrauf to support jquery chains 
                string script = @"<script type='text/javascript'>$(document).bind('ready',  function(){
            $('#" + propertyName + "').chained('#" + parent + "');"+
                   @"$('select[name=""" + propertyName + @"""]').val("""+selectedvalue+@""");" +
                  "});</script>";

                return MvcHtmlString.Create(script + select.ToString(TagRenderMode.Normal));
            }

            #endregion Methods
        }

        public class LinkedSelectList : IEnumerable<LinkedSelectListItem>
        {
            #region Constructors

            public LinkedSelectList(IEnumerable items, string dataValueField, string dataTextField, string dataLinkedValueField, IEnumerable selectedValues)
            {
                if (items == null)
                {
                    throw new ArgumentNullException("items");
                }

                Items = items;
                DataValueField = dataValueField;
                DataTextField = dataTextField;
                DataLinkedValueField = dataLinkedValueField;
                SelectedValues = selectedValues;
            }

            #endregion Constructors

            #region Properties

            public string DataLinkedValueField
            {
                get; private set;
            }

            public string DataTextField
            {
                get; private set;
            }

            public string DataValueField
            {
                get; private set;
            }

            public IEnumerable Items
            {
                get; private set;
            }

            public IEnumerable SelectedValues
            {
                get; private set;
            }

            #endregion Properties

            #region Methods

            public virtual IEnumerator<LinkedSelectListItem> GetEnumerator()
            {
                return GetListItems().GetEnumerator();
            }

            IEnumerator IEnumerable.GetEnumerator()
            {
                return GetEnumerator();
            }

            internal IList<LinkedSelectListItem> GetListItems()
            {
                return GetListItemsWithValueField();
            }

            private static string Eval(object container, string expression)
            {
                object value = container;
                if (!String.IsNullOrEmpty(expression))
                {
                    value = DataBinder.Eval(container, expression);
                }
                return Convert.ToString(value, CultureInfo.CurrentCulture);
            }

            private IList<LinkedSelectListItem> GetListItemsWithValueField()
            {
                HashSet<string> selectedValues = new HashSet<string>(StringComparer.OrdinalIgnoreCase);
                if (SelectedValues != null)
                {
                    selectedValues.UnionWith(from object value in SelectedValues select Convert.ToString(value, CultureInfo.CurrentCulture));
                }

                var listItems = from object item in Items
                                let value = Eval(item, DataValueField)
                                select new LinkedSelectListItem
                                {
                                    Value = value,
                                    Text = Eval(item, DataTextField),
                                    LinkValue = Eval(item, DataLinkedValueField),
                                    Selected = selectedValues.Contains(value)
                                };
                return listItems.ToList();
            }

            #endregion Methods
        }

        public class LinkedSelectListItem
        {
            #region Properties

            public string LinkValue
            {
                get; set;
            }

            public bool Selected
            {
                get; set;
            }

            public string Text
            {
                get; set;
            }

            public string Value
            {
                get; set;
            }

            #endregion Properties
        }