Разделите пользовательский интерфейс на asp.net mvc views

Question

У меня есть CSS #MainDiv, содержащий #TreeDiv с левой стороны и #DataGridDiv с правой стороны.

The TreeDiv содержит дерево Javascript с объектами отдела, а DataGridDiv содержит объекты Datagrid with Employee.

Изменение выбора отдела в Treeview должно также изменять связанные объекты работника в DataGrid.

У меня установлен диспетчер отделов. Оба элемента управления должны иметь возможность получать данные через ajax независимо друг от друга.

1.) Какому объекту должен возвращаться метод Index для отображения этих агрегированных данных в представлении?

2.) Как я могу разделить свои элементы управления на какие виды?

Answer 1

2.) Как я могу разделить свои элементы управления на какие виды?

Создать представление с #MainDiv, #TreeDiv и #DatagridDiv. Пусть #TreeDiv размещает ваш дерево управления (вы уже знаете это). Создайте частичный вид, чтобы отобразить datagrid с объектами employee. Пусть #DatagridDiv размещает это частичное представление.

Теперь, когда в дереве управления выбран отдел, вы можете сделать ajax-вызов методу контроллера, который принимает отдел и возвращает частичный вид, содержащий данные сотрудника. Обновите #DatagridDiv с возвращенными данными.

В качестве альтернативы, если вам удобно с Json, ваш метод контроллера может возвращать данные сотрудника в формате Json (вместо частичного представления), и вы можете заполнить его в таблице html внутри #datagridDiv, используя javascript/jquery.

1.) Какому объекту должен возвращаться метод Index для отображения этих агрегированных данных в представлении?

В методе Index вы можете вернуть свое представление, которое содержит все 3 Divs и #TreeDiv, заполненные деревом. На стороне клиента при загрузке страницы вы можете идентифицировать выбранный отдел, чтобы выполнить вызов ajax и обновить #datagridDiv. Этот подход будет иметь задержку на стороне клиента, однако вы можете использовать его для отображения некоторой анимации, указывающей, что страница загружается/div обновляется.

Если вы не хотите добавлять этот период задержки, определите отдел, который будет выбран при загрузке древовидного изображения и заполнен частичный вид этого отдела, добавьте его в #datagridDiv на стороне сервера и доставьте.