ASP.NET MVC - 将用户输入从View传递到Controller

时间:2013-11-25 11:54:50

标签: c# jquery asp.net-mvc asp.net-mvc-3

我创建了一个如下界面的UI:当用户从下拉列表中选择一个国家/地区时,视图已动态返回。此视图具有州名称,重要城市列表和输入注释的文本框。

现在,当用户从下拉列表中选择一些值(多个)时,输入一些注释,然后按“提交”按钮,这些数据应该传回控制器进行进一步处理。

以下是我的模特:

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 string Comments { get; set; }
}

以下是控制器代码:

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);
        }
}

视图如下:

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 + '"></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" />
}

这里的问题是这些评论只传递给控制器​​。但是下拉列表中的选定值没有传递给控制器​​。以下是POST Action方法:

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

            return View("Display", cm);
        }

如何在控制器中获取所有选定的值?任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:2)

更改

附近的脚本
<select id="' + finalDdlId + '"></select>

<select id="' + finalDdlId + '" name="Cities"></select>

您必须提供名称以将数据绑定到模型。