My end goal is to be able to select a value in one DropDownList, and after having made that selection, I want another DropDownList to be populated based on the selection made in the first one. My form should have a DropDownList full of a list of provinces and a DropDownList full of cities for the selected province. 

I am new to ASP MVC so I am not sure how this will be accomplished. If this had to be done in Winforms or WPF I would be able to implement it since i know how data is propagated from my Business logic to the controls displayed to the user - however in MVC I am not comfortable enough to know how to do this correctly and effectively. I am also in the process of learning javascript and associated helpers(eg. jQuery), so I need some assistance in using things like ajax to accomplish my goal.

Here is what I have already and what I know I should have to achieve my goal :

My Model(To capture the input from user):

```
    public class CaptureCreateTrip
    {
        [Required]
        [Display(Name = "Trip ID")]
        public string TripID { get; set; }

        [Required]
        public string StartPointProvince { get; set; }

        [Required]
        public string StartPointCity { get; set; }

        [Required]
        public string EndPointProvince { get; set; }

        [Required]
        public string EndPointCity { get; set; }
    }

```

My Form:

Keep in mind that I just inserted the ViewBag reference to act as a place holder till I can replace it with dynamic data.

```
@using (Html.BeginForm("CreateOneWayTrip", "Trips"))
        {
            @Html.ValidationSummary(false);
            <fieldset>
                <legend>Enter Your Trip Details</legend>

                <label>Start Point</label>
                @Html.DropDownListFor(m => m.StartPointProvince, (SelectList)ViewBag.Provinces);
                @Html.DropDownListFor(m => m.StartPointCity, (SelectList)ViewBag.Cities);

                <label>End Point</label>
                @Html.DropDownListFor(m => m.EndPointProvince, (SelectList)ViewBag.Provinces);
                @Html.DropDownListFor(m => m.EndPointCity, (SelectList)ViewBag.Cities);

                <p style="float: none; text-align: center;">
                    <button type="submit" value="Create" class="btn btn-info btn-circle btn-lg">
                        <i class="fa fa-check"></i>
                    </button>

                    <button type="submit" value="Create" class="btn btn-warning btn-circle btn-lg">
                        <i class="fa fa-times"></i>
                    </button>
                </p>
            </fieldset>
        }

```

The controller:

```
        //To Show Create Page
        public ActionResult Create()
        {
            return View();
        }

        // To Get Data after post
        [HttpPost]
        public ActionResult Create(Models.CaptureCreateTrip trip)
        {
            Models.CaptureCreateTrip t = trip;

            return Redirect("~/Trips/Index");
        }

        //Will I need a controller to get json data?

```

Also, what javascript do I have to include in my page to (1) Trigger an event on the dropdownlist Selection Changed event and (2) fetch appropriate data(list of cities for selected province).

UPDATE: 

Here is a snippet of the page source that is generated:

```html
<select Id="province_dll" class="form-control" data-val="true" data-val-required="The StartPointProvince field is required." id="StartPointProvince" name="StartPointProvince"><option value="NC">Northern Cape</option>
<option value="FS">Free State</option>
<option value="WC">Western Cape</option>
</select>
                <select Id="city_dll" class="form-control" data-val="true" data-val-required="The StartPointCity field is required." id="StartPointCity" name="StartPointCity"><option value="NC">Kimberley</option>
<option value="FS">Boshof</option>
<option value="WC">Barkley</option>
</select>
```

Here is the javascript I wrote:

```js
$("province_dll").change(function () {
        $.ajax({
            url: 'getCities/Trips',
            type: 'post',
            data: {
                provinceId: $("province_dll").val()
            }
        }).done(function (response) {
            $("cities_dll").html(response);
        });
    });
```

And here is my controller(ps. Data is just test data, will connect with db later):

```
    [HttpPost]
    public ActionResult getCicites(int provinceId)
    {
        var lstCities = new SelectList(new[] { "City1", "City2", "City3" });

        return Content(String.Join("", lstCities));
    }

```

However it's still not working - When I select a different value in the first DropDownList, nothing happens.