@ Html.DropDownList无法初始化值

Question

我有一段简单的代码，试图填充3个国家/地区的列表，并默认选择第2项。由于某种原因，@ Html.DropDownList没有初始化屏幕中的第二项。有人可以指出这段代码有什么问题吗？

public class DemoController : Controller
{
    [HttpGet]
    public ActionResult Test()
    {
        List<SelectListItem> ddlCountries = new List<SelectListItem>();
        SelectListItem item1 = new SelectListItem { Selected = false, Text = "USA", Value = "1" };
        SelectListItem item2 = new SelectListItem { Selected = true, Text = "Ireland", Value = "2" };
        SelectListItem item3 = new SelectListItem { Selected = false, Text = "UK", Value = "3" };

        ddlCountries.Add(item1);
        ddlCountries.Add(item2);
        ddlCountries.Add(item3);

        ViewBag.ddlCountries = ddlCountries;
        return View();
    }

    [HttpPost]
    public string Test(string ddlCountries)
    {
        return "The selected Value was " + ddlCountries;
    }
}

以下是屏幕上的输出..

快速监视窗口显示“已选择”属性已正确设置为值“2”，但屏幕未反映此内容。

视图的代码如下

@{
    ViewBag.Title = "Test";
}

<h2>Test</h2>

@using (Html.BeginForm("Test", "Demo", FormMethod.Post))
{ 

@Html.DropDownList("ddlCountries", (IEnumerable<SelectListItem>) ViewBag.ddlCountries)
    <br />
    <input type="submit" value="submit" />
}

Answer 1

尝试使用视图模型，它更容易，更安全，更清洁：

public class MyViewModel
{
    public string SelectedCountryId { get; set; }
    public IEnumerable<SelectListItem> Countries { get; set; }
}

然后在你的控制器中：

public class DemoController : Controller
{
    [HttpGet]
    public ActionResult Test()
    {
        List<SelectListItem> ddlCountries = new List<SelectListItem>();
        SelectListItem item1 = new SelectListItem { Text = "USA", Value = "1" };
        SelectListItem item2 = new SelectListItem { Text = "Ireland", Value = "2" };
        SelectListItem item3 = new SelectListItem { Text = "UK", Value = "3" };

        ddlCountries.Add(item1);
        ddlCountries.Add(item2);
        ddlCountries.Add(item3);

        var model = new MyViewModel();
        model.Countries = ddlCountries;
        model.SelectedCountryId = "2"; // preseleted Ireland

        return View(model);
    }

    [HttpPost]
    public ActionResult Test(MyViewModel model)
    {
        return Content("The selected Value was " + model.SelectedCountryId);
    }
}

最后在你的强类型视图中：

@model MyViewModel
@{
    ViewBag.Title = "Test";
}

<h2>Test</h2>

@using (Html.BeginForm("Test", "Demo", FormMethod.Post))
{ 
    @Html.DropDownListFor(x => x.SelectedCountryId, Model.Countries)
    <br />
    <input type="submit" value="submit" />
}

这几乎是正确的做法。忘记任何ViewBag的东西。只需使用视图模型。视图的单一信息源必须是视图模型。

顺便说一句，GET控制器的动作可以简化为：

[HttpGet]
public ActionResult Test()
{
    var model = new MyViewModel();
    model.Countries = new[]
    {
        new SelectListItem { Text = "USA", Value = "1" },
        new SelectListItem { Text = "Ireland", Value = "2" },
        new SelectListItem { Text = "UK", Value = "3" },
    };
    model.SelectedCountryId = "2"; // preseleted Ireland

    return View(model);
}

或者国家/地区可以直接绑定在您的视图模型中：

public class MyViewModel
{
    public string SelectedCountryId { get; set; }
    public IEnumerable<SelectListItem> Countries 
    {
        get
        {
            return new[]
            {
                new SelectListItem { Text = "USA", Value = "1" },
                new SelectListItem { Text = "Ireland", Value = "2" },
                new SelectListItem { Text = "UK", Value = "3" },
            };
        }
    }
}

然后你的控制器变得更加苗条了：

public class DemoController : Controller
{
    [HttpGet]
    public ActionResult Test()
    {
        var model = new MyViewModel();
        model.SelectedCountryId = "2"; // preseleted Ireland
        return View(model);
    }

    [HttpPost]
    public ActionResult Test(MyViewModel model)
    {
        return Content("The selected Value was " + model.SelectedCountryId);
    }
}