MVC DropDownList from multiple views

Question

i've got bit of issue, I've got three models:

model - City

 public int ID{get;set;}
 public String Name { get; set; }

model - Suburb

public int ID { get; set; }

public int CityId {get;set;}

public string Name { get; set; }

public String Description { get; set; }

public virtual ICollection<City> Cities { get; set; }

model- CitySuburbContext

public DbSet<City> City { get; set; }
public DbSet<Suburb> Suburb { get; set; }

This is my controller:

public ActionResult Index()
        {
            return View("Index",db.Suburb.ToList());
        }
        public ActionResult getSuburb(int id)
        {
            return Json(db.Suburb.Where(s => s.ID.Equals(id)).ToList(), JsonRequestBehavior.AllowGet);
        }

THIS IS MY VIEW (now)

@model Admin.Models.Suburb

<header>
    <script src="~/Scripts/dddd.js" type="text/javascript"></script>
</header>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@Html.DropDownListFor(m => m.CityId, new SelectList( ((List<SelectListItem>)ViewData["cities"]),"Value","Text"), new { @onChange = "fillSuburb()" })

@Html.DropDownListFor(m => m.ID, Enumerable.Empty<SelectListItem>())

My issue is.

How do i get data in my view. Do i use the CitySuburbContext model? if so how?

Also i want 2 dropdownlist, one with list of cities and another list of suburbs for the selected city. I am not sure how to tackle this, some one please help

possible duplicate of [Easiest way to create a cascade dropdown in ASP.NET MVC 3 with C#](http://stackoverflow.com/questions/5497524/easiest-way-to-create-a-cascade-dropdown-in-asp-net-mvc-3-with-c-sharp) — Ilya Sulimanov, Jul 05 '14 at 07:15

Hiren Kagrana · Answer 1 · 2014-07-05T08:40:45.680

0

Bind your city and suburb dropdown at the time of view binding as below:

@Html.DropDownListFor(m => m.cityId, new SelectList( ((List<SelectListItem>)ViewData["cities"]),"Value","Text"), new { @onChange = "fillSuburb()" })

@Html.DropDownListFor(m => m.suburbId, Enumerable.Empty<SelectListItem>())

Note new { @onChange = "fillSuburb()" } is a java script onchange event bind with HTML select tag which call the fillSuburb() method while city changes.

function fillSuburb()
{
    var cityId = $("#cityId").val();
    $.ajax
    {
        url:'/home/getSuburb/'+cityId;
        method:'POST'
        onSuccess: function(data)
        {
           var suburbSelect = $("#suburbId") ;
           suburbSelect.empty();
           for(var suburb in data) {   
               $("<option />", {value: suburb.ID , text: suburb.Name }).appendTo(suburbSelect);
           }
        }
    }
}

Send the IEumrable list from controller as:

public ActionResult getSuburb(int id)
{
    return Json(_dataContext.Suburb.Where(s=>s.ID.equals(id)).toList(), JsonBehaviour.AllowGet);
}

edited Jul 05 '14 at 08:40

answered Jul 05 '14 at 07:24

Hiren Kagrana

912
8
21

Hi Thanks allot, i've updated my view and controller and created a new javascript file with the code you sent. I've updated my original code as you can see above. Should i be passing the suburb model as "db.Suburb.ToList());" as in my controlller? thats currently causing datamismatch – kayze Jul 05 '14 at 11:20
can you elaborate the problem in more detail – Hiren Kagrana Jul 05 '14 at 11:24
In my home controller (the code is above), in the index method i am passing suburb model ...return View("Index",db.Suburb.ToList()); in my view i am getting datamismatch. – kayze Jul 06 '14 at 02:02
second question is in your can you eloberate your javacript function please, am not too familiar, what does $("#cityId") and $("#suburbId") represent? are they the model properties? also what are suburb.ID and suburb.Name? – kayze Jul 06 '14 at 02:05
@kayze you need not to send model with the view, store the `List` of cities in `ViewData["cities"]`, search for google for binding the dropdown list in MVC – Hiren Kagrana Jul 07 '14 at 08:33
@kayze `$("#cityId")` and `$("#suburbId")` is a HTML select list DOM elements for cities and suburb respectively, which is accessible using the Jquery, we make a AJAX call on the change of cities, it will request the our `getSuburb` action method of `Home` controller and recive the JSON result on success, after that we rebind the suburb select list with the help of JQuery at the client side. – Hiren Kagrana Jul 07 '14 at 08:37

MVC DropDownList from multiple views

1 Answers1