MVC practically begs to create pages that are organized into clear areas of responsibility. So instead of a single page with two or three editable grids that allow in-line changes to their lists, in MVC one is more likely to get a specific edit page per line item per grid.
For that matter one is very unlikely to see the type of page that has multiple editable grids thrown on it. Is there a good UI pattern to take the place of multiple editable lists/grids on a classic asp.net page?
I am guessing there would be some sort of taxonomy with categories of editable "stuff" that's displayed in a sidebar (perhaps) which then leads to a page with one grid grid or list per entity type. And clicking on an edit per line item would drill down further into a detail edit page.
I am mainly curious if anyone has seen good UI examples that simplify the taxonomy and organization of these lists. Most likely this sort of paradigm is found in administrative parts of sites I suspect.
StackOverflow is the best example I know of. It uses tags as the taxonomy organization metaphor, gives you lists based on these tags, and then allows you to drill down into any one item (which itself contains lists of items).
Platforms, such as ASP.NET webforms or ASP.NET MVC are really means to an end here. They shouldn't set the UI paradigm, they should just help you get there.
There is no reason you couldn't have multiple grids on a page. With MVC you can also have multiple forms on a page. And if you do things right you will most likely use the concept of subcontrollers to build out your page areas to make your over all site easier to work with. You can post grid updates to an ajax handler. You could possibly submit multiple grid data to one controller if you wanted too...and then farm out the work of saving it. There is no reason to not have pages like you used too. MVC just requires that you are more creative with how you handle processing the data to keep things clean!
Related
I am just starting a project and the wireframes are ready. But looking at the wireframes it seems that the primary goal was to reduce the number of pages and to include maximum functionality in to a single page.
Taking an example of an organization, the top portion of the page will show the organization details, below that at the left we have an division structure as a tree view, clicking on a division will populate the employee list on the right as a table, and when you click on an employee it will populate the employee details below.
Current wireframe looks something like this:
End user is happy as they can see the entire functionality on a single page and doesn't need to navigate to another page.
But this design reminds me the screen of some old desktop application and I feel that this page is unnecessarily complex- I want to split this in to multiple pages (at least in to three). Also, I am using MVC 4 and splitting this in to multiple pages will definitely help me to reduce the complexities during implementation.
But before arriving at any conclusion and raising any concern, I would like to know what you guys think. Some articles related to User experience are also welcome.
Here's what I think.
Whether the design above is 'right' depends on the target audience and the type of work / business process they need to carry out. There may be a strong business argument for being able to see all the information (org details, divisions, employees and employee details) on one page. It is not unusual to see a lot of information displayed in a page with a lot of interactivity - users expectations have increased because of consumer sites such as Gmail.
The users might find it frustrating if it was broken out into different pages.
To put it another way, I don't think there is a valid technical justification for making the designer change the UI above to split it into different pages.
You would be able to build the UI above in MVC as a single page web application. You will probably need to implement a lot of controller actions to support ajax calls. You're almost certainly going to end up using a lot of JQuery and you are probably also going to end up with a significant amount of JavaScript to write. Also, you'll need to make sure the designer has made good decisions around the sizing of the page. Is it going to be fixed width or dynamic for instance? You'll need to emit well structured HTML in order to achieve that solely using CSS (which I would strongly advise you do).
I am wanting to edit a number of rows in a model in a grid. I would really like to be able to edit "inline" ie within the grid rather than going off to another page via another controller.
I know about the "Web Grid" which seems lean, but I believe it needs to go over to an edit page.
In the first instance I am wanting to focus on server solutions for simplicity. Also I would want the control to respect the validation data annotations in the View Model.
Many thanks,
Ed
You can render your own grid for a table of data and include a form within it to allow the user to edit a particular row. You will need to implement typical grid features to control this process, such as row selection, insert, edit, update and possibly delete. There are plenty of good models from Web Forms world you could work to, including but not limited to MS and Telerik controls.
If you are going to make extensive use of such grids in your applications I would recommend wrapping up this functionality in an HtmlHelper extension that accepts a table of data and the configuration options you need as arguments.
http://datatables.net/ is a very good jQuery grid. Try it out.
also other options
kendo: http://demos.kendoui.com/web/grid/index.html
jqgrid. http://jqgrid.com/
I am a little ashamed for asking so many questions, but I really want to learn.
In Sipke's blog a webshop is created. There is one specific question that boggles my mind when trying to do something similar.
Let me spell out the basic requirements:
User registration form and login, etc. This one is covered by the blog and it works nice.
Creating product parts and so on. This one is covered and no problem there.
Ordering by filling in an order form and making the payment. See down
Having the order page maintainable by customer. See down.
Viewing your own orders and their status. See down
Maintaining customers and orders from backend system. This one is covered by the blog and I need to do some work there yet.
As for items regarding creating orders and viewing your orders. I have followed the approach for creating records and using standard MVC controllers. But then I encountered problems:
Menu for orders page. This I had to do manually after installing the module.
The order page itself. I had to create the view including title and so on. But I can imagine a customer wanting the order page on another menu and with a different title. And maybe add even some own content to the ordering page. This I couldn't achieve by using standard MVC approach. So maybe I am using the wrong approach here. So I was thinking about using contentparts for creating an order and displaying them and using the drivers and handlers for that. But before I go down that road and refactor everything I want to know if that is the right approach. A downside could be that once the module follows that route it can then not so easily be reused with customers that have other cms's capable of hosting an MVC3 module.
So when to use drivers, handlers and contentparts and when to use standard controllers and views.
You should use Drivers and Parts (with Handlers if needed) when you want to create functionality for content items. E.g. if you want to display a custom media with all products, you could create a Part (together with its Driver, etc.) to handle that. Read the docs on Parts.
If the functionality is not tied to content items the most possibly you want to use the standard MVC toolbox, it's fine. Look at the built-in modules how they do that. E.g. the Blog module uses controllers and views to show the admin UI, but has parts to enhance the functionality of for example the Blog content type.
To make things more complicated you can employ ad-hoc content items to build a page that you'd normally do with simple views, but that's an advanced topic :-).
I was thinking of creating a UtilityController that only contains actions which return json because I might have several forms with a province/state dropdown and a country dropdown. These dropdowns are filtered by selection with ajax...only show prov/state in selected country.
What do you think about this idea...is it good...bad...neither?
Thanks
I would not recommend having a utility controller or any kind of utility classes. In my opinion that is bad practice as it will easily become a dumping ground for code that you don't know where it belongs. This violates the S.O.L.I.D principals as you do not separate your concerns. It is better to look at what actions you want and find the appropriate controller for each one of them.
I follow a similar pattern in one of my web applications. I default the page to loading US states and have USA pre-selected in the dropdown since a large majority of visitors are from there, but then use JSON to load sates if they switch.
I am writing an ASP.Net MVC application. I have two entities - patients and treatments - which belong to large datasets with more than a thousand of each. The user needs to be able to easily create an association between the two - say add a treatment to a patient. I cannot use ajax or javascript. The list of treatments would be too large for a dropdown or listbox. Has anyone got any nice UI ideas that would work well in asp.net mvc? Is there any standard pattern for solving this?
Regards
Luke
In this particular setup, I would assume the user is already looking at a "main" screen, say patient.
I would probably use a "search engine" interface for this. To realize it, I would probably have the main page (patient) generate an iframe with a src attribute that includes the id of the patient. The search results would be paginated and would come back with checkboxes or radiobuttons in front of the items. Inside the search results would be a submit button to save the association