MVC 3 布局页、Razor 模板和下拉列表

Question

我想在我的网站的所有页面上包含一个年份下拉列表。我认为将这个逻辑放在布局页(_layout.cshtml)中是一个很好的地方。如果用户更改了年份，我希望我的年份会话(ModelBinder)也随之更改。这在ASP.NET Web Forms中非常容易实现，但在MVC中似乎几乎不可能。我尝试过局部视图，但没有成功。有人有什么想法吗？

- Sam Stange

---

你遇到了什么具体的问题？ - marcind

Answer 1

像往常一样，您可以从定义视图模型开始：

public class YearsViewModel
{
    public string Year { get; set; }
    public IEnumerable<SelectListItem> Years
    {
        get
        {
            return new SelectList(
                Enumerable.Range(1900, 112)
                .OrderByDescending(year => year)
                .Select(year => new SelectListItem
                {
                    Value = year.ToString(),
                    Text = year.ToString()
                }
            ), "Value", "Text");
        }
    }
}

然后是一个控制器：

public class YearsController : Controller
{
    public ActionResult Index()
    {
        return View(new YearsViewModel());
    }

    [HttpPost]
    public ActionResult Index(int year)
    {
        // TODO: do something with the selected year
        return new EmptyResult();
    }
}

还需要为索引操作编写相应的视图：

@model SomeAppName.Models.YearsViewModel
@{
    Layout = null;
}
@Html.DropDownListFor(x => x.Year, Model.Years)

最后在你的_Layout.cshtml中，你可以使用这个控制器：

<div id="selectyear">@Html.Action("index", "years")</div>

并附加相应的脚本，以在值更改时发送AJAX请求：

$(function () {
    $('#selectyear select').change(function () {
        $.post('@Url.Action("index", "years")', { year: $(this).val() }, function (result) {

        });
    });
});

- Darin Dimitrov

---

太棒了。我毫不费力地将它适应了一个国家选择器。非常感谢。 - Roberto Bonini

这对于提供清晰的ASP.NET MVC实现非常有帮助。这里有很多东西需要学习，不仅仅是如何在页面上放置一个下拉菜单。谢谢。 - hanzolo

@DarinDimitrov 你好，非常感谢您的出色工作。但我有一个疑问，我该如何使用ViewBag实现呢？我需要在布局页中使用ViewBag或Session绑定下拉列表，因为如果我在布局页中指定了"@model SomeAppName.Models.YearsViewModel"，那么我就无法从我的内容页传递任何模型到视图中，例如return view("home",Detail)，因为此处布局除了yearviewmodel外，不接受其他模型，所以会报错。 - Ryder