Large data entry pages using ASP.NET MVC - asp.net-mvc

I am working on a large data entry page using the default ASP.NET MVC theme. Due to the large number of controls on the page it would be good to use a two column fieldset so the user does not need to scroll. I can't see any templates in the MVC design gallery that use a two column data entry page, they are all geared towards standard website designs. Has anyone seen any? It would be great to have templates for different data entry scenarios.
Thanks
Danny

What you can do is create your own T4 (Text Template Transformation Toolkit) file. You can find out more here. This will give you an extra view content option in your "Add View" dialog box, generating the HTML however you've specified.

If your problem is to show all controls on single window without scrolling and may be using two columns,Right!
I have another solution for you.
And that is Wizard. check out this link and this link.
Your form will look nice!

If your issue is layout, you can lay it out in the design view first (or dreamweaver or the designer of your choice) then add the MVC specific code.

Related

Asp.NET MVC view engines, why they don't support "View designer" now?

With the asp.net MVC, we see a lot different view engines, like Razor, spark, webform etc.
I thought the idea of MVC is separating of data and view, I assume view part should be something that allows a designer to do some work, even after it is created by a developer. But I see now most if not all view engines introduce new syntax, not stick with html. The old web form, you can use "view designer" to see how a page looks like even with some code blocks, designer could at least move blocks and html elements around, but now with engine like Razor, you cannot even view a page in designer mode. So I don't quite get what is the point?
This came to me when I tried to search for a server side templating that allows end user do some changes on the page. I perfer something stick to pure HTML, maybe Spark is the one, but I am not sure. Please someone can give me some idea.
Thanks
Views are meant for that. It will not static design. Markup will be generated on fly.
If you take razor as an example, you will have the combination of c# and html as code in view page. So, as you may be able to understand now, you cannot see the actual design until the c# and html execution goes hand-in-hand.
Hope it clarifies a little!

asp.net mvc custom template for application forms and page

everyone, I'm really new with asp.net mvc
I have given this new task that converting existing application using asp.net webform into asp.net mvc
This application have basically have 3 type template form:
Grid Template (include the navigation such paging and search, and input/view form/panel shown after click, can be below or hide the grid)
Process Template (Grid with check box on each item to process)
Non-Grid Template (just input form, usually used for application parameter form)
This application also has some template pages, but basically this template page is combining just 1 template form or more (can be same template form), e.g parameter application form or sales order application (master and detail). The page can also has many detail show in tabs.
How do I achieve this templates using asp.net mvc as efficient as possible rather than just create new form and copy-paste from the other form.
I mean to minimalize the same code I have to write rather the specific thing that differentiate the form purpose, e.g the code just show the input form after click item.
Can anyone show me how I can do it or solution that came near to what I need?
Any link to tutorial, step by step, or anything?
Or if there any reasons I can't/shouldn't do it with asp.net mvc and what is the best way?
Thanks in advance and sorry if there are any mistakes in my words.
Editor/Display templates
They are mostly used for edit/display forms such as editing/displaying user profile data form, etc. Kind of like your Non-Grid Template. You can create Object templates, place them in the corresponding folders of the solution and they will be automatically every time you render your model via Html.EditorForModel() or Html.DisplayForModel helpers. Here is a good article to start with ASP.NET MVC 2 Templates, Part 4: Custom Object Templates
Shared views
I'm not sure what your Process template looks like but it seems it's a fixed number column grid like a one column with chackboxes and one more column with names of the items to process. In this case you'd better create an interface and a shared view. Then you can use the interface to map your view model to and render it with your shared view via Html.Partial helper.
Html helpers
For more advance grid templates just use a grid template, there are a lot of online, personelly I prefer Grid helper from MvcContrib library.
Two combine different templates within a single page use layout, sections and again shared view. Here is a good video about how to create and use them Asp Net MVC 4 - 02 Creating Layout, Views and Partial Views
Can't advice anything more specific as I don't really know what you WebForm application actually looks like but I think I described everything you need to start with.
Hope it helps!

ASP.NET MVC Templated Control

I am currently building an ASP.NET MVC site after years of being in the Web Forms world (and taking a bit of getting used to!).
I have an admin dashboard which has several area's contained in boxes which can be collapsed etc. The basic layout of the box is the same for all - the only difference is the content inside the box. I don't really want to repeat the box code over and over (talking only about front end code here). What I would normally do in the Web Forms world is create a control with template region for the content (i.e http://weblogs.asp.net/scottgu/archive/2006/06/04/Supporting-Templates-with-ASP.NET-User-Controls.aspx)
This question is pretty similar to my scenario How do build a composite or template control in ASP.Net MVC, or the equivelant?. The top answer in the referenced question points to this article http://jeffreypalermo.com/blog/asp-net-mvc-and-the-templated-partial-view-death-to-ascx/ which I guess would work but seems somewhat of a hack. What is the best way to achieve this in MVC? How do others handle this?
If the sharing is in the layout, use master (a concept from web forms).
If it is in the content then use Display/Editor Templates.

Porting ASP.NET (Telerik) multi-column combobox to MVC.

I need to port the functionality of this one and only one AJAX control to MVC, but given the poor selection of MVC controls out there, I think I need to bring this legacy control into the MVC world...
I'd rather not taint my MVC project with ASP.NET controls, and welcome json/MVC alternatives you know of. (post them if you know of any)
Sample UI that I need in ASP.NET MVC
Back to porting
Although it's unfortunate that I am left to porting this control to MVC, it seems to be a widely accepted practice since Telerik has detailed instructions on how do this.
That makes me ask:
How common is it for a MVC website to use ASP.NET controls?
Again I'll mention I don't want to do this so I welcome MVC-specific alternatives. That being said, I'll proceed with trying to merge that control with my existing site. </End Disclaimer>
If you click on this hyperlink, and look at the source code at the bottom, can you tell me where I should put the following in MVC?
Code behind (My first instinct is to use a Controller but another SO question indicates I should create a create a ViewName.aspx.cs file)
How do I port the SQLDataSource to the new "Model" way of thinking. I know they are different in nature but I don't know how to present data to a ASP.NET control in a way that it will consume the information.
How do I handle the AJAX component? This control has an AJAX component using callbacks. Yes this is getting ugly, but it seems like I have to do this.
Apparently this model saves data in session or view-state. I have no idea if this even work in MVC. Guidance, an alternate control, or a life preserver is much appreciated.
I've already done research and have instructions from Telerik here and here that describes how to get started with placing a simple menu, but I need a little assistance with the more complex controls like this one.
Note: For all the commentary that has hit this question, please remember that I only want this one ASP.NET control functionality; I can't find a comparable control in MVC.
porting from asp.net webforms to MVC is a paradigm shift.
Directly porting does not work.
The Model is where you typically describe your data and do the data access
the View is for displaying the data
The controller plums the other two together
So SQLDataSource is your data access layer and would therefore go to your model
the problem with the thought pattern of SQLDataSource == Model then you get away from the point of decoupling your presentation from data access
You have to think of MVC development as a new build
I would pick a book or video series from your preferred source and learn starting with MVC3 (it has some differences that simplify build speed and reinforce the difference between webforms and mvc)
Hope this helps.
This article explains how to run web forms and mvc together
http://weblogs.asp.net/rajbk/archive/2010/05/11/running-asp-net-webforms-and-asp-net-mvc-side-by-side.aspx
This is by telerik and explains the limitiation of the grid and what is need to get it to run.
http://blogs.telerik.com/aspnetmvcteam/posts/08-11-06/asp_net_ajax_controls_in_asp_net_mvc.aspx
Add an IFrame in your MVC view that just shows the WebForms page (or just use that control on a single WebForms page).
There is nothing that says you can't have a site with both WebForms and MVC pages. You can route a single URL to a WebForm just for this control.
Why not just use the telerik MVC controls? They work quite well. Either get them via a NuGet package or visit this link http://www.telerik.com/products/aspnet-mvc.aspx
I would rather use ViewModel instead of code behind
You don't have to throw away SqlDataSource you can use result set and buld from it your model, problem may be column names in result set... tricky but can be done
Since there is no components in MVC except helpers youll need help of jQuery probably, it easy
$.ajax({
url : "/controller/action",
data: { /*json or serialized form */ },
successs: function(data){
//if you got response as html from /controller/action
$("#some_div").html(data);
}
}
Session is available in MVC but viewstate not, you can use HttpContenxt.Cache or TempData if you need something like viewstate. USe TempData to keep data between redirections, or httpcontext.cache to cache your data further more.
I can't find similar functionality in an MVC control
MVC doesn't really have a concept of controls in the same way that ASP.Net does - there are only really the plain old HTML controls (i.e. hidden input, text input, checkbox, radiobuttons, select box, text area, password and buttons).
When you need something more complicated than the plain HTML Controls you need to use some JavaScript to achieve this.
I'm not sure that you will be able to 'port' the control into MVC - you will most likely have to try and re-create it your self using an MVC controller and a partial view with a fair bit of a javascript to create the control.
Have a look at the JQuery UI Autosomplete plugin - you could probably use this to acheive something similar

UI Patterns for ASP.NET MVC

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!

Resources