I am new to mvc3, developing my first project in mvc3. I have left side bar filled with top categories. On click of top category, I want to display sub categories under clicked category.
Subcategories can be at any no of level.
How to go for it?
Should I use partial views?
On click of category, first I have to check if it has a subcategory, if yes then render sub categories.
I think your best option here is to use AJAX and dynamic load of data.
On your javascript code bind the click event of your first level nodes to an AJAX call to a method on the server.
This method should: check if the node has children, if it has then return the list of children associated to it, if it hasn't it should return some info adverting your client code about it.
Your AJAX call on success should check if receive a list of subnodes or a message adverting that there's no subnodes. If it has the subnodes just append them to your html structure, if it hasn't do nothing (or whatever you want to do when clicking on a top node without children).
From here you can make your system grow in complexity as much as you want, using different methods for different node levels and behaviours, etc...
Related
First, I apologize if this is a dumb question, but I'm new to MVC and am trying to get up to speed as quickly as possible. I have spent hours searching for answers and even went and bought a book on MVC 4, but it still didn't answer my question.
I have a form I'd like a user to fill out to add a new product to the catalog. They choose the category, enter the name, a description, etc.. On the same page I'd like them to be able to add sizes or product options such as Small, Medium, Large, etc.. The problem is I'm not sure how to go about this.
I need to temporarily store the size options for example in some sort of collection until the user actually 'saves' the product, then I need to be able to read the collection. What I'm trying to avoid is to have the user add the basic product info, then save it, then select it, then choose to add options to it. I'm trying to just do it all on one form. Any help would be greatly appreciated!
There is nothing preventing you creating a view model with its own collections for the detail items and have those mapped to some sort of javascript control for selecting multiple items such as one that writes to an mvc hidden form control.
The controller handling the postback will simply create the master model from the postback data (the updated view model) and then create the child records. The whole thing could be achieved with ajax calling a controller action that returns a partial view of the updated ui.
Similar to this but have the list as a property of the master model
http://www.stevefenton.co.uk/Content/Blog/Date/201002/Blog/How-To-Handle-Multiple-Select-Lists-In-ASP-NET-MVC/
A little more advanced on how to manage your own bindings http://www.dotnetcurry.com/ShowArticle.aspx?ID=584
Sounds like u need to roll your sleeves up and get a control written in javascript that allows child items to be added client side whist serializing e.g. Into json when they save and saving it to an mvc hidden control ready for postback. Use json.net to hydrate these values into your pocos. http://erraticdev.blogspot.co.uk/2010/12/sending-complex-json-objects-to-aspnet.html
I am practicing MVC 2 (I'll do MVC 4 in just a bit) after almost 2 years, just to revise before I jump to MVC 4.
I am creating a strongly typed view of one of my data objects called Category. I want to create a list type view, i.e. a view that displays all records from the Category table.
I recall there used to be T4 templates of each type of view -- Index, List, Create, etc. that you could choose from.
But I can't find them. When I create the View, the Add View dialog shows a disabled input field for View content.
I don't think you can have Visual Studio generate the list for you. After all, you need some lookup logic to get all the objects you want to display in the list.
You might want to check out this blog post for a nice way to pass a list of objects into your drop down list. You will, however, need to supply the objects yourself.
On Telerik demo site we can see an example of how to implement kind of functionality: "check all checkbox in a grid's column". But in my case it has 2 disadvantages:
It didn't check all checkbox on all pages.
It didn't save a state of checkboxes on different pages.
Is anybody know how to resolve these issues? Thanks in advance.
As long as I know there's no built-in functionality to do so. The same problem happens when you select records on page one and change to page two, you loose whatever you selected before.
To achieve that functionality you have 2 options (I've used both on previous projects)
1) On each check make an Ajax call to one of your controllers and store whatever you selected on a Session Variable (This can be inefficient if you have a lot of records)
2) Create a javascript variable and store your selections there, and send back to the controller using a json variable or a comma separated values string
As I said, I've used both approachs so it depends on if this works for you or not
Hope it helps
I can't test this, so I'm not 100% sure, but looking at Telerik's example, one reason it's not persisted is because every "page" of the grid requires a postback, and in the controller action result method, they aren't passing in the model (or view model) for the items that are bound to the grid, they're only returning that list of items back to the view, so it will never "save" which items are checked/selected and which ones aren't. You should be able to get around this by making your view model a parameter into the HttpPost action result method and then passing that list back to the view after the post so that it retains which items are selected instead of creating a new one. This won't solve the issue with not selecting all the items, but it should at least retain which ones are selected throughout the pages. I think the reason for it not working with all items is it can only select the ones that are actually being displayed at the time. You may want to do a post (or ajax) to select "all" items.
One of the major reasons for using paging in grids is so that you don't have to retrieve all of the data from the data store and generate a lot of HTML to push to the client.
It's been my experience that most users understand that a "select all" check box only checks the items on the current page. I've not seen a site where checking such a check box would actually check all records, even those I can't see.
If you have an action which will affect more than the current page of records, I would suggest that you add a button which clearly indicates that the action will affect all records, then send a command to your data layer which will perform that action. This will perform better (you don't have to send a potentially long list of ids across the wire) and allow users to understand the repercussions of their action.
Is there a way to refresh several partial view from the controller ? (return View())
Thanks,
Update1:
Example, the content pârt of my screen is divided in 2 parts, on the left a customer list on the right the details customer, the details of the customers selected in the list of the left. If I create an new customer, when I save, I'd lile refresh the list (left part) and see the details (right part)
Kris,
the only way i can think to do this simply is by having multiple partialviews embeded within the main 'view' to be refreshed. these would then be refreshed in the same cycle. alternatively, you could have custom html helpers embedded within the main view that ran approprite code when the view was refreshed.
As for multiple views from a single action, i don't think this is both a good idea or in any way possible.
of course, rules are there to be broken :)
I don't think there is any automatic way to do this, but you could use some convention and:
Create a custom view result that takes in multiple partial view results i.e. a MultiplePartialViewResult
In the execute of the custom view result, call each the execute method of each of the supplied views'. Make sure to wrap each in a div or some other container for ease of retrieval at the client script
Upon receiving the response on the AJAX call in the client script, grab the value from each container and replace it in the corresponding elements matching the partial views initially rendered
For the last step you could use a convention. A simple one would be (if there is only one instance for each partial view) to put the id of target html element to update in the div/container you used to wrap it in the second step.
Based on what you're saying, I think using javascript and ajax to refresh from the server would be best.
You could use Html.RenderPartialAction to achieve DRY by putting it on the page, and then loading it using ajax and javascript.
If you were using jQuery, then something like this would work:
jQuery("#divToReload1").load('Url/To/PartialAction')...
jQuery("#divToReload2").load('Url/To/PartialAction')...
Just put that all inside one function and you'll reload all your partials at once.
You can send data through using the data parameter and catch the callback function to do as you wish.
I am using asp.net mvc 2.0 in my application and the application requires to get multiple values from a ListBox, from view to controller.
The scenerio is like that, I have two listbox say ListBox1 and ListBox2 and on the load of a page, I initally load Listbox1 with some data.
Now a user can transfer some of the data from one Listbox1 to Listbox2 and then want to select multiple data present in ListBox2 in the controller.
I have used two "ListBoxFor" for this purpose and provide "IEnumerable" to the ListBox control in view as a property of a class.
Now when I post back the data to controller, I don't get the the data correspond to "ListBox2" in my class object.
In short, I want to select multiple data which is present in ListBox2, in my controller on postback of form.
Please help and provide sample for this.
An http post will not contain all values in a select box, only the one(s) selected. You could use javascript to select all values (make sure select is set to multiple), but that's not my preferred way since it changes the way the page looks to the user.
I would recommend using javascript to add the selected values to hidden fields. It would work something like this:
Your model has a List selections
on select, javascript is used to move from ListBox1 to ListBox2
in addition, a new and the second
On unselect, you would remove the input and update all inputs with a higher index to index - 1 in order to retain sequential-ness
Then when you post, the data will be automatically bound to your model's selections list.