ASP.NET MVC - Return complex object from view to controller

Question

I have created a UI like below: When user selects a country from dropdown list, then a view has returned dynamically. This view has the state name, a list of important cities and a text box to enter comments.

Now when user selects some values (more than one) from drop down lists ,enter some comments and then press Submit button these data should be passed back to controller for further processing. Now what I want is I want to pass a List of objects to the controller. One list item should have below items:

Country, State, SelectedCity, Comment

Below is my model :

public class CountryModel
{
    public string Country { get; set; }
    public string State { get; set; }
    public List<string> Cities { get; set; }

    public static IEnumerable<CountryModel> GetLocationDetails()
    {
        return new List<CountryModel>()
        {
            new CountryModel { Country = "India", State = "WB", Cities = new List<string>(){ "Kolkata", "Kharagpur", "Darjeeling" } },
            new CountryModel { Country = "India", State = "AP", Cities = new List<string>(){ "Hyderabad", "Vizag", "Vijaywada" } },
            new CountryModel { Country = "India", State = "UP", Cities = new List<string>(){ "Kanpur", "Allahabad", "Agra" } },
            new CountryModel { Country = "India", State = "MH", Cities = new List<string>(){ "Mumbai", "Pune", "Nagpur", "Nasik", "Aurangabad" } },
            new CountryModel { Country = "India", State = "RJ", Cities = new List<string>(){ "Jaipur", "Kota", "Jaisalmer" } },
            new CountryModel { Country = "USA", State = "CA", Cities = new List<string>(){ "San Francisco", "Los Angeles", "Oakland" } },
            new CountryModel { Country = "USA", State = "WA", Cities = new List<string>(){ "Seattle", "Bellevue", "Yakima" } },
            new CountryModel { Country = "USA", State = "NY", Cities = new List<string>(){ "New York City", "Buffalo", "Albany" } },
        };
    }

    public List<SelectListItem> Countries { get; set; }
    public List<string> Comments { get; set; }
}

Controller:

public class CountryController : Controller
    {
        public ActionResult Select()
        {
            CountryModel viewmodel = new CountryModel();

            viewmodel.Countries = new List<SelectListItem>()
            {
                new SelectListItem { Text = "India", Value = "India", Selected = true },
                new SelectListItem { Text = "USA", Value = "USA" }
            };

           return View(viewmodel);
        }

        public JsonResult GetCountryDetails(string id)
        {
            var query = from c in CountryModel.GetLocationDetails()
                        where c.Country == id
                        select c;

            return Json(new { query }, JsonRequestBehavior.AllowGet);
        }
}

View

model MvcApplication2.Models.CountryModel
@{
    ViewBag.Title = "Select";
}
<h2>Select</h2>

@using (Html.BeginForm())
{
    @Html.Label("Select a Country:  ")
    @Html.DropDownListFor(m => m.Countries, Model.Countries)

    <div id="dynamictable"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#Countries').change(function () {
            var url = '/Country/GetCountryDetails/' + $('#Countries').val();

            $.getJSON(url, function (result) {
                if (result.query.length > 0) {
                    if ($('#tblResult').length) {
                        $('#tblResult').remove();
                    }

                    $('#dynamictable').append('<table border="1" id="tblResult"></table>');
                    var table = $('#dynamictable').children();
                    table.append('<th>State</th> <th>City</th> <th>Comments</th>');

                    var random = 1;

                    $.each(result.query, function (i, location) {
                        var ddlId = "citiesInState";
                        var finalDdlId = ddlId.concat(random.toString());

                        var markup = '<tr class="locationInfo"><td class="stateCode">' + location.State + '</td><td class="citiesList"><select id="' + finalDdlId + ' name="Cities""></select></td><td class="userCommentsOnLocation">@Html.TextBoxFor(m=>m.Comments)</td></tr>';
                        table.append(markup);

                        var option = '';
                        for (var i = 0; i < location.Cities.length; i++) {
                            $('#' + finalDdlId).append('<option value="' + location.Cities[i] + '">' + location.Cities[i] + '</option>');
                        }

                        random++;
                    });
                }
            });
        });
    });

</script>
<br />
<input type="submit" value="Submit" id="SubmitId" />
}

below is my POST action method:

[HttpPost]
        public ActionResult Select(CountryModel cm)
        {
            if (cm == null)
            {
                throw new ArgumentNullException("cm");
            }

            return View("Display", cm);
        }

But now I am not getting the items in expected format. How can I change my model and code accordingly to accommodate this ? Any help is appreciated

Answer 1

The Html is rendering wrong so I think ur not getting expected format so I have change it and perfectly it will be displayed what u want.I am also attaching screenshot for your answer. so you have to change your javascript code with below:

<script type="text/javascript">
    $(document).ready(function () {
        $('#Countries').change(function () {

            var url = '/Country/GetCountryDetails/' + $('#Countries').val();

            $.getJSON(url, function (result) {
                debugger;
                if (result.query.length > 0) {
                    if ($('#tblResult').length) {
                        $('#tblResult').remove();
                    }

                    $('#dynamictable').append('<table border="1" id="tblResult"></table>');
                    var table = $('#dynamictable').children();
                    table.append('<th>State</th> <th>City</th> <th>Comments</th>');

                    var random = 1;

                    $.each(result.query, function (i, location) {
                        debugger;
                        var ddlId = "citiesInState";
                        var finalDdlId = ddlId.concat(random.toString());

                        var markup = '<tr class="locationInfo"><td class="stateCode">' + location.State + '</td><td class="citiesList">';
                        markup = markup + '<select id="' + finalDdlId + '" name="Cities"></select>';
                        markup = markup + '</td><td class="userCommentsOnLocation">@Html.TextBoxFor(m => m.Comments)</td></tr>';
                        table.append(markup);

                        var option = '';
                        for (var i = 0; i < location.Cities.length; i++) {
                            $('#' + finalDdlId).append('<option value="' + location.Cities[i] + '">' + location.Cities[i] + '</option>');
                        }

                        random++;
                    });
                }
            });
        });
    });

</script>

the screenshot you get it by applying my code: