asp.net-mvc-3 - 在所有 View 中共享布局内的下拉列表的方法是什么？

Question

我越来越熟悉 MVC 3 和 RAZOR View 引擎。我有一个关于页面布局和共享控件的问题。

假设我在主布局中定义了一个标题部分。在该标题中是一个下拉列表，我需要填充项目名称。此下拉列表将作为整个站点的上下文并出现在所有页面上。例如，如果用户从下拉列表中选择“项目 A”，则该站点的所有 View 都将基于“项目 A”。既然这个下拉控件是静态的，并且被整个站点使用，那么在哪里放置代码来拉取所有项目以显示在下拉列表中的最佳位置？在局部 View 中？在 HTML 助手中？另一个想法是，如果用户选择一个新值，他们将被带到该新选择项目的仪表板或类似页面。我试图弄清楚如何在站点的每个页面上重用这个控件，而不必在每个可能的 Controller 中连接它。

Answer 1

您可以将子操作与 Html.Action 一起使用 helper 。所以你首先定义一个 View 模型:

public class ProjectViewModel
{
    [DisplayName("Project name")]
    public string ProjectId { get; set; }
    public IEnumerable<SelectListItem> ProjectNames { get; set; }
}

然后是一个 Controller :

public class ProjectsController: Controller
{
    private readonly IProjectsRepository _repository;
    public ProjectsController(IProjectsRepository repository)
    {
        _repository = repository;
    }

    public ActionResult Index(string projectId)
    {
        var projects = _repository.GetProjects();
        var model = new ProjectViewModel
        {
            ProjectId = projectId,
            ProjectNames = projects.Select(x => new SelectListItem
            {
                Value = x.Id,
                Text = x.Name
            })
        };
        return PartialView(model);
    }
}

然后是相应的 View ( ~/views/projects/index.cshtml ):

@model ProjectViewModel

@Html.LabelFor(x => x.ProjectId)
@Html.DropDownListFor(
    x => x.ProjectId, 
    Model.ProjectNames,
    new {
        id = "projects",
        data_url = Url.Action("SomeAction", "SomeController")
    }
)

现在剩下的就是在 _Layout.cshtml 中渲染这个小部件:

@Html.Action("Index", "Products", new { projectid = Request["projectId"] })

现在我们可以放置一些 javascript 以便当用户决定更改选择时，他将被重定向到其他一些操作:

$(function() {
    $('#projects').change(function() {
        var url = $(this).data('url');
        var projectId = encodeURIComponent($(this).val());
        window.location.href = url + '?projectid=' + projectId;
    });
});

另一种可能性是将下拉列表放在 HTML 表单中:

@model ProjectViewModel
@using (Html.BeginForm("SomeAction", "SomeController", FormMethod.Get))
{
    @Html.LabelFor(x => x.ProjectId)
    @Html.DropDownListFor(
        x => x.ProjectId, 
        Model.ProjectNames,
        new {
            id = "projects",
        }
    )
}

这样在 javascript 中我们就不必担心在选择更改时构建 url，只需触发包含表单提交:

$(function() {
    $('#projects').change(function() {
        $(this).closest('form').submit();
    });
});