Question

我正在创建一个空子下拉列表，它根据其父级动态填充。提交表单时，属性Platform始终为null。为什么呢？

这是我的ViewModel：

public class SkillsViewModel
{
    public int SkillId { get; set; }
    public string Platform { get; set; }
}

以下是我的观点：

@using (@Html.BeginForm("AddSkill", "AddSkills"))
{
    @Html.DropDownListFor(m => m.SkillId,
                                new SelectList(ViewBag.SkillsFound, "Id", "SkillName"), "Select skill",
                                new { @class = "form-control", @onchange = "SkillSelected()" })

    @Html.DropDownListFor(m => m.Platform,
                          new SelectList(Enumerable.Empty<SelectListItem>()),
                          new { @class = "form-control" })

    <input type="submit" name="submit" value="Add skill" class="btn btn-success" />
}

和控制器：

[HttpPost]
public ActionResult AddSkill(SkillsViewModel model)
{
    // model.Platform is always null
    // to be implemented... 
    return RedirectToAction("Index");
}

这是填充下拉列表的脚本。它工作正常 - 在下拉列表中添加字符串列表

   function SkillSelected() {

    var idSelected = $('#SkillId').val();

    if (idSelected == 0)
    {
        $("#Platform").html("");
    }

    $.post("../GetSkillPlatforms", { skillid: idSelected }, function (data) {
        $("#Platform").html("");
        $.each(data, function (i, data) {
            $("#Platform").append(
                $('<option></option>').val(data.Id).html(data));
        });
    });
}

编辑：

这是返回字符串列表的控制器。

public class GetSkillPlatformsController : Controller
{
    [HttpPost]
    public ActionResult Index(int skillId)
    {
        var Db = new DbContext();

        List<Platform> PlatformsFound = Db.Platforms.Where(pl => pl.PlatformSkill.Id == skillId).ToList();

        List<string> PlatformsNames = new List<string>();

        foreach(Platform pl in PlatformsFound)
        {
            PlatformsNames.Add(pl.PlatformName);
        }

        return Json(PlatformsNames);
    }
}

Answer 1

您的控制器方法正在返回string的集合，并在您使用

的脚本中

$.each(data, function (i, data) {
    $("#Platform").append($('<option></option>').val(data.Id).html(data));
});

将每个选项的value属性设置为null（value=""），因为data是string且string不包含名为Id的属性。

将脚本更改为

$.each(data, function (i, data) {
    $("#Platform").append($('<option></option>').text(data));
});

省略了value属性，默认情况下会提交所选文字的值（或者您可以使用.append($('<option></option>').val(data).text(data)）

此外，您可以将控制器代码简化为

[HttpPost]
public ActionResult Index(int skillId)
{
    var Db = new DbContext();
    var model = Db.Platforms.Where(pl => pl.PlatformSkill.Id == skillId).Select(pl => pl.PlatformName);
    return Json(model);
}

将字符串属性绑定到动态填充的下拉列表不会设置值

1 个答案: