Divide a user interface into asp.net mvc views - asp.net-mvc

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?

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.

Related

Mvc How safe is viewbag?

My website is built around tabs. I have one single page with multiple partial views that display each tab.
The problem im facing now is I want to loop through files that the user has uploaded and display them in one of my partial views. This requires me to send the file list as a paramater in my action like this:
//Uploadedfiles is a function that adds the files to a list.
var files = UploadedFiles();
return View(files);
Because im only using one view to display all my partial views, i get:
The model item passed into the dictionary is of type 'Microsoft.WindowsAzure.Storage.Core.Util.CommonUtility+d__0`1[Delamapp.CloudStorageServices.UploadEntity]', but this dictionary requires a model item of type 'Delamapp.Models.LoginFolder'.
This means im required to not send a model item to my index view. Now, the only thing i can think off is adding my file list to viewbag and then display them on my view. BUT.. The files require high security. How safe is viewbag? Can you for example store sensitive login information in there? Can you think off some other way to accomplish this?
Thank you in advance
You can pass a model item to your view, but the model item you are passing doesn't match the type of model that your view uses (that's what the error message says).
So you need to do one of the following:
Modify your view to accept the model type that you are passing to it
Put the data you want to pass into the model type that your view is expecting
Create a new model type for both your data and for the view, and use that
In terms of security, I don't think using a view bag versus model binding really enters into the question of security. Both are just ways of passing data in between the controller and the view, and that all takes place within the ASP.NET process (perhaps you have ViewBag confused with Web Forms' ViewState?).

Telerik mMVC master detail grid view for two unrelated models

I need to display/present two different models in a master-detail grid.
One model(collection) is bound to master grid.It has a link in one of the column and is enabled/disabled based on condition. Simple.
What I need to do is upon clicking the link I should be able to populate the detail grid by calling another controller- action. I need the row information,to pass the row details/ model data to the controller-action to fetch the model for detail grid.How do I do this through Javascript/jQuery.
The detail model is not a collection.
Any other approach to achieve this?
http://demos.telerik.com/aspnet-mvc/razor/grid/detailsajax gives a great example on how to do this with AJAX. I am assuming you are using the MVC Extensions by Telerik?

Create/Edit Parent and Child Form MVC

I am using C# and MVC3
I have a simple Entity Model
Entities: Orders , OrderItems
Orders have 0 or more Order Items
I want to create a single page to create an order
While on this Page I would fill in the fields that are in the Orders table (Customer, Phone, Order Number...etc)
Then there would be a grid (I am using Telerik MVC grid). I want to add OrderItems to this grid. I was thinking of having s small form above the grid with its own submit button. I can submit using ajax and refresh the grid using ajax.
At the bottom there would be a single submit button that coudl create the order and all the orderitems at once.
I can't seem to piece this enitre solution together.
Short answer: follow this post - how to implement Create action on Order and Order Details on single Create View
Basically, convert your code to partial views in your main view. Also separate order entry form from displaying the order list. Also you may find useful to look at this resource - Empty Model with Partial View

MVC ViewModel binding for collection properties

When a model is passed to view, the view has access to all data inside that model. But only for first time. When the view page is submitted say by clicking a submit button , then you don't get any data in the controller. For this you need to explicitly bind each and every model item either by giving a control to populate it or by using Html.HiddenFor(..)
But if my model is having a collection member which in turn having collection member .. upto level 3 or 4, then do I "have to" bind each and every member of these collections in order to get all data in action method after submit? If I am not displaying all these collections items on a view, then why should I bind it by writing huge code? But then I need them in the action method too. Is there any other simpler way to accomplish this other than explicitly binding it on view?
Following is the structure I have.
SalesModel
....IList HomeProducts
....int SalesID
Products
....int ProductID
....IList SecurityProducts
SecurityProduct
....SecurityProductID
....Description
....Price
....IList ProductFeatures
~ SalesModel is boud to aspx (View).
~ From this view, I have called partial view to show Home products (with model=Product).
~ From this partial view I have called another partial view (with model=SecurityProduct).
~ When I first time open the view, I get data at every level. But when I submit the view using submit button, then I dont get anything in SecurityProduct collection evern after binding every thing in FOR loop.
Thanks in advance.
yes, great example here: http://weblogs.asp.net/nmarun/archive/2010/03/13/asp-net-mvc-2-model-binding-for-a-collection.aspx
Resolved : by having hidden fields on both, the root level aspx and the child level ascx. Don't know how this resolves it but it solved the problem.

Using a dynamic list of checkboxes in a view, how to create the model

I have an asp mvc 2 app lication where I want to display a list of check boxes that a user can select, based on a list of records in a database. To display the list my model contains a List object and the view has a foreach, and outputs Html.CheckBox for each item in the list.
Is there a way to get the model populated with the selected checkboxes, given that the model can't have specific properties for each checkbox, because the list is dynamic? Or do I have to manually iterate through the forms variables myself?
Edit: Extra details as per sabanito's comment
So in a simple view/model scenario, if my model had a property called Property1, then my view outputted a Textbox for Property1, when the form is posted via a submit button, the mvc framework will automatically populate a model with Property1 containing the text that was entered into the textbox and pass that model to the Controllers action.
Because I am dealing with a dynamic list of options the user could check, I can't write explicit boolean properties in my model and explicitly create the checkboxes in my view. Given that my list is dynamic, I'm wondering if there are ways to create my model and view so that the mvc framework is able to populate the model correctly when the form is posted.
Here's what I would do:
Are you having any issues generating the checkbox's dynamically?
If not, create a property on your ViewModel that is a:
public List<string> CheckboxResults { get; set; }
When you generate your checkbox's in the view make sure they all share the name = "CheckboxResults". When MVC see's your ViewModel as a parameter on the action method it will automatically bind and put all the "CheckboxResults" results in the List (as well as your other ViewModel properties). Now you have a dynamic List based on which checkbox's your user checked that you can send to your DomainModel or wherever.
Pretty cool stuff. Let me know if you're having issues generating the checkbox's dynamically, that's kind of a seperate issue than model binding to a list.
Use a ViewModel that reflects your view exactly, and map your domain model(s) to the viewmodel.
At first it often seems appropriate to use domain models directly in the view, for no better reason than that they're simple to use. However, as the view gets more complex over time, you end up putting a TON of conditional logic in your view, and end up with spaghetti. To alleviate this, we typically create a ViewModel that correlates 1:1 with the view.

Resources