Вы можете использовать дочернее действие вместе с помощником Html.Action .Итак, вы начинаете с определения модели вида:
public class ProjectViewModel
{
[DisplayName("Project name")]
public string ProjectId { get; set; }
public IEnumerable<SelectListItem> ProjectNames { get; set; }
}
, затем контроллера:
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);
}
}
, затем соответствующего вида (~/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 так, чтобы, когда пользователь решает изменить выбор, он перенаправлялся на какое-то другое действие:1017 *
$(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();
});
});