i am new in mvc. i want to generate a UI dynamically like
initially a table will be displayed with four columns and 5 rows. in first & second columns there will be dropdown with predefine values and in last column there will be textbox. there will be a button called add more and when user will click on that button then a postback will occur and a new row will be added to that existing column. user can remove any column just clicking on another button which will be in fourth column.
it is very easy to do it in webform with gridview but i have no idea how can i do it in mvc. i do not want to use any js library or grid rather i want to do it with html table which i will generate dynamically. please help me with concept & sample code snippet if possible. thanks
I cant see here something really connected with mvc.
The case is that you would like to have an interactive UI, that basically is the job of Javascript.
If we are talking about grids, it can be next plugins/frameworks:
Kendo UI (not free for commercial use) - http://demos.kendoui.com/web/grid/editing.html
http://jquerygrid.net/
A lot of good plugings are here: Choosing a jQuery datagrid plugin?
So basically this is the same (like) Grid View from asp.net.
If you wanna have something exactly like GridView - I think there is no native implementation (from Visual Studio) for this (maybe i'm wrong, but 4 year experience say to me that i'm right :) ).
Related
Anyone knows if it's possible to deal with DevExpress GridView as same as we deal with Gridview which in MS Visual Studio Windows Form App?
Such as:
Creating a grid with 100 empty rows in default.
User can fill 1,7,20 or other number of rows then save them to DB.
Can type data directly in cells without any other form or popup...
Can make some validations and calculations while entering data in a row.
And so on..
Finally, I need to create a web-based ASP.Net MVC invoice page using DevExpress tools.
I already made it using Windows Forms with pure MS components and now need to create same on ASP.Net MVC.
In other words, i need a gridview Excel-like editing!
* Attached image is my Windows Form Application.
Regards. windows form App
Devexpress on MVC should have the capabilities you mention. I found these articles which look like they can help you with this task.
I would look at this demo on "Batch Editing" and see if it suits your needs: https://demos.devexpress.com/MVCxGridViewDemos/Editing/BatchEditing
This link talks about adding new rows on the client-side: https://supportcenter.devexpress.com/ticket/details/t438193/gridview-how-to-add-new-row-to-empty-grid
This link also talks about binding on an empty grid and using the batch editing to add data on the client-side before saving it to the server:
https://supportcenter.devexpress.com/Ticket/Details/T694907/gridview-bind-an-empty-grid-with-option-to-add-and-delete-rows-on-the-client-side
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/
At my work we have an existing ASP.NET web application and are duplicating some of the pages & functionality to better target our mobile users. We are using the jQuery Mobile framework and ASP.NET Web Forms to do this.
Since this is going to target the mobile web I would like it to be fast & lightweight which means turning off the view state, loading lists on demand (when opened), and I'd like to eliminate post backs (annoying & doesn't work well w/ jQuery Mobile). Of course this means doing a lot more work client side.
One of the pages is a bit complex, it allows the user to log items, however it's layout is fully customizable. Prior to logging the user is able to define what fields they wish to track. Some of these fields are system designated but others are created by the user. They can choose from a checkbox, dropdown list, date box, radio button, text box, or list box. Some fields are also tied to other fields meaning the user can select an item in one drop down list which then reloads another drop down list with the associated data. The user also has the ability to add an unlimited amount of additional fields (drop down lists) while on the actual page used to log their item. Once the page is filled out by the user the selected fields values are saved back to the server in a database table.
I figured this would be a great chance to use a JS Framework like Knockout.js, the dependency tracking would come in great for trying to keep things synced up & reload lists as needed based on selections made in other lists. Even though I am a bit concerned about how it would handle the fact that the form layout is dynamic & can be modified once displayed (anyone know if it can handle this?).
So I started looking around for jQuery Mobile & Knockout.js and apparently there are issues, workarounds, limitations, etc. w/ the two working together and I saw the same thing w/ Backbone.js
Does anyone have any suggestions w/ this? Is it worth the hassle to try and use a JS Framework of some sort w/ jQuery Mobile? Can a JS Framework handle the form I am trying to create w/o me having to jump through hoops? Am I better off looking for some sort of dependency tracking plugin and just using that and if so can you suggest any that will wire up to my model object & other controls on the page & work correctly w/ jQuery Mobile?
Overall, knockout should be a good fit for your requirements. I'm currently using it an MVC3 applicaiton to do similar things to what you are describing.
As for your complex page, this is all doable.
Your highly customizable form. This is one area where knockout really shines. It allows a separation be how data is displayed and the data itself. This can be done with different data-bindings types and you can add your own customized bindings. I actually do this a lot when creating a form and experimenting with what the test control type is.
Dynamic Layout - With Knockout there is no direct connection between the DOM and the data. Knockout's data-bind statements allow you to connect new content to it's data at run time. This currently works well in my current app.
For your requirement about unlimited adds, take a look at the Contacts Editor Demo. It seems to have features to do the unlimited requirements
In general with knockout, once I went to using ajax to handle all my data requirements, things became greatly simplified.
As far as using knockout with jQuery mobile, knockout is now part of the new releases of Asp.Net Mvc4, developer preview. It is my understanding that knockout is key to MVC's design on building single page web offline where the data is stored locally, then dynamically added to the displayed page. Cannot find link right know, but I'll keep looking and post edit later.
Hope this helps out. Also, checkout the links on knockoutjs.net home page. -
I'm developing my first MVC website and I'm experimenting with the few available grids out there. I really like the MVCContrib grid, but I need to implement a standard "Add new record" functionality, and I don't see a clear way to add a single record to the database and grid without having to reload the entire grid each time.
I know there is a jQuery grid plugin, and if there's no good way to do this with MVCContrib I'll go that direction.
After much looking around it would seem that my best solution is a framework like jQuery or ExtJS. MVCContrib Grid isn't there yet, if it ever will be.
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.