0

I have a CSS #MainDiv containing a #TreeDiv on the left side and a #DataGridDiv on the right side.

The TreeDiv contains a Javascript Treeview with Department objects and the DataGridDiv contains a Datagrid with Employee objects.

Changing the selection of a Department in the Treeview should change also the related employee objects in the DataGrid.

I have setup a DepartmentController. Both controls should be able to recieve data via ajax independently from each other.

1.) What kind of object should my Index method return to display this aggregated data in the view?

2.) How should I divide my controls into what sort of views?

Pascal
  • 12,265
  • 25
  • 103
  • 195

1 Answers1

0

2.) How should I divide my controls into what sort of views?

Create a view with #MainDiv, #TreeDiv and #DatagridDiv. Let #TreeDiv host your tree control (You already know this). Create a partial view to display the datagrid with employee objects. Let #DatagridDiv host this partial view.

Now when a department is selected in tree control, you can make an ajax call to a controller method which accepts the department and returns the partial view containing the employee data. Update the #DatagridDiv with returned data.

Alternatively if you are comfortable with Json, your controller method could return the employee data in Json format (instead of partial view) and You can populate this into an html table inside #datagridDiv using javascript/jquery.

1.) What kind of object should my Index method return to display this aggregated data in the view?

In the Index method you can return your view which contains all 3 Divs and #TreeDiv populated with tree control. On the client side when page loads you can identify the selected department to make an ajax call and update #datagridDiv. This approach will have a it lag on the clientside, however you can use that to display some animation indicating the page is loading/div is updating.

If you dont want to add this lag period, identify the department that will be selected when tree view is loaded and populate the partial view for that department, add this to your #datagridDiv on the server side and deliver.

Rakesh
  • 803
  • 1
  • 6
  • 11
  • Why do i have to create a partial for my dataggriddiv? – Pascal Feb 06 '12 at 16:38
  • View consists of a complete html page along with head & body tags. Whereas partial view will render only the html tags (which represent the controls in it). As you are only updating a div through the ajax call, it is better to have partial view. – Rakesh Feb 07 '12 at 07:45
  • Why did you then not advise me to create also a partial View for the TreeControl which gets ajax updated with add/del nodes? – Pascal Feb 07 '12 at 09:24
  • I was thinking that the whole of the tree control will be loaded at once during the initial load, and navigation/selection would only hide/show the elements. If that is the case then there is no need to make a partial view. If the tree control also gets updated dynamically then you might have to use partial view for that also, but ensure you design the partial view appropriately considering how the tree view gets updated. – Rakesh Feb 07 '12 at 10:10
  • so I create now a normal view with the #MainDiv, #TreeDiv and #DatagridDiv. Then I create 2 partialViews (_TreeView and _DataGridView) and put those into their counterpart (#TreeDiv and #DataGridDiv). Is that right? – Pascal Feb 07 '12 at 18:40
  • Hi Pascal, you are saying that #TreeDiv hosts only tree control. In that case the tree control should have the self sufficiency to handle its own state changes (selection change event is being triggered by tree control itself), rather than your view handling those situations. If you can explain the behavior of your tree control a little more it would be helpful – Rakesh Feb 08 '12 at 14:16
  • These are the tasks my treecontrol should/will have: Add/Delete a department object, Read all departsments, GetEmployessByDepartmentId – Pascal Feb 08 '12 at 21:21