Как можно раскрыть раскрывающийся список внутри макета для использования во всех представлениях? - PullRequest
5 голосов
/ 26 июля 2011

Я знакомлюсь с MVC 3 и движком RAZOR view.У меня есть вопрос относительно макетов и общих элементов управления на страницах.

Допустим, у меня есть раздел заголовка, определенный в моем основном макете.В этом заголовке есть выпадающий список, который мне нужно заполнить именами проектов.Этот раскрывающийся список будет служить контекстом для всего сайта и присутствует на всех страницах.Например, если пользователь выбирает «Проект A» из выпадающего списка, все представления для сайта будут основаны на «Проекте A».Поскольку этот раскрывающийся элемент управления довольно статичен и используется всем сайтом, где лучше всего разместить код, чтобы вытащить все проекты для отображения в раскрывающемся списке?Частичный вид?В помощнике HTML?Другая мысль заключается в том, что если пользователь выберет новое значение, они будут перенаправлены на панель мониторинга или аналогичную страницу для этого нового выбранного проекта.Я пытаюсь выяснить, как повторно использовать этот элемент управления на каждой странице сайта без необходимости подключения его к каждому возможному контроллеру.

Ответы [ 2 ]

11 голосов
/ 26 июля 2011

Вы можете использовать дочернее действие вместе с помощником 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();
    });
});
0 голосов
/ 26 июля 2011

Мы просто сделали нечто похожее на проект.

Во-первых, вы не можете поместить его в раздел, потому что вы должны поместить этот раздел в каждое представление, вы можете поместить его в частичное, новам все равно придется называть это с любого взгляда.

Во-вторых, вы не можете поместить его на страницу макета, потому что на странице макета не передается никакой модели.Поэтому я создал вспомогательный HTML и сослался на это на странице макета.Существует множество учебных пособий по созданию html-помощников, поэтому я не буду помещать здесь код.Но, по сути, в вашем html помощнике вы можете сделать вызов базы данных, чтобы получить все ваши проекты.Затем вы можете создать список выбора с помощью строителя строк в html-помощнике и вернуть его на страницу макета.Затем мы использовали jquery для добавления события об изменении в список выбора.Когда список выбора изменился, он загрузил новую страницу.Так, например, в вашем списке выбора значением каждого элемента может быть идентификатор проекта, затем при изменении он перенаправляет их на страницу типа / Projects / View? Id = 234, где 234 - это идентификатор вашего проекта.

Так что вещи для исследования.1. Создание помощников HTML 2. Событие изменения JQUERY.

Это должно привести вас в правильном направлении.Дайте мне знать, если вам понадобится какая-либо другая помощь, и я могу выложить некоторый код.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...