I'm working on a web app in ASP.NET MVC 3 using the Razor HTML 5 engine and C#. The client wants something pretty complex and I would like to know if there is any examples out on the web that might show me how to begin setting this up. Here's what they are looking for:
I have a very large SQL database (25,000 rows). They want to be able to select the data using three different views on the same page.
The first will be a tree and using similarities in certain columns of the table will be how the tree is broken in to sections.
The second will be a grid. This will be just one entire list of the everything in the database that you can scroll through. Of course there has to be some sort of virtual scrolling because loading 25,000 rows rather quickly isn't going to happen.
The third will be a search box where you can type in the code and select it that way.
All three of these need to be linked so that when you type a code in the search box it will select it in the grid and in the tree. If you select it in the tree then it will be selected in the grid, and if you select it in the grid then it will be selected in the tree.
They also want me to remember the last selection when you navigate away and be able to type a code n on a different page and go directly to this page with the item you typed selected. Therefore, I need to be able to use MVC's capabilities to establish a hyper link for every item in the list (I assume that would be the way to do this)
This is honestly the first time I've worked with ASP.net MVC and I feel like I may have bitten off more than I can chew with this project so any help would be greatly appreciated!
They would rather it if I didn't need to include any extra dll's so if there is a way to do this without third party tools that would be even better, but at this point I'm just looking for anything.
A few random ideas/thoughts about this:
This is kind of a big project as your first MVC app - hopefully you have some experience with HTML/Javascript/jQuery since it's going to require a fair amount of glue code to make everything work together. There is no "here, do this" solution.
There are a bunch of different free/open source projects for treeviews and grids. I've used jqGrid for a number of projects - it works well. It has a decent API and is fairly configurable (although it may take some digging to find the example code you need).
For a treeview, you can try jsTree. I haven't worked with it, though.
I'd suggest starting with just the treeview, or just the grid and get it working first. Then add the other control and get it working. Then add the search. Finally, I'd work on getting everything to work together.
To handle navigating to a specific selection, you can pull information off the query string from Javascript.
Realize that most of this is going to be happening in Javascript on the client side, not much server side.
Related
The sample has been attached for your reference.
I am trying to create a commenting system similar to the reference. The Users should be able to comment about particular issue and i want it to display as a stack in a panel like view along with their name and timestamp on the comment above. I have no clue how to display them as a stack with their name on top of comment apart from doing it in a gridview way. Any help is much appreciate
First of all, you should at least check out all the controls for the platform that you are working on. Apart from Grid, there are many controls which you can utilize to build the page that stacks comments.
You can use check out all the data controls here The choice is up to you but i would suggest that you go with Repeater as that is built for producing such repetitive blocks.
you can sort your comments data by "id desc" so that latest comments show up on top. The look of the blocks depends on how you style them using css.
I'm learning asp.net 2.0 for a project and so far after several tutorials and searching it's going pretty well. However what I am having problems with is I have a main page with a huge list of anchor tags and need a way to have the user click one and redirect to another page along with a variable or two so the new page an be dynamically created pulling database info based off those two variables. So far I can do this just fine for one item with a form, submit button and postback but with a huge list of anchor tags it doesn't really make a lot of sense. I really don't know what I'm trying to do is called so I don't know what to search on the internet to learn how to do it. I'm hoping someone may have a suggestion to point me in the right direction.
<ul>
<li>Custoemr1</li>
<li>Custoemr2</li>
<li>Custoemr3</li>
<li>Custoemr4</li>
</ul>
above is the sample list and it doesn't have to be anchor tags I just need to be able to not have to write a new form for every customer , it's an odd project trying to combine a lot of database info as well as a lot of static pages.
I'm building a system in MVC that has a lot of heterogeneous data to be displayed: Customers, logs, etc.
I'm finding that I'm building the same view over and over again in different forms:
Header row (with sorting links)
Filter row (drop-downs, date pickers, etc.)
Data
Paging row
Naturally the abstractor in me is shouting "Build a generic data view factory!", as well it should. However, before I disappear up my own abstracting bottom, has this work already been done elsewhere?
The only option I can currently find is MVCContrib.Grid, which doesn't seem to handle the rendering of filters (although it has allowances for extending the renderer). Is this the only option?
As one may expect a question similar to your has already been done...years ago. So here: grid controls for ASP.NET MVC? you can find a list available data grids, that has been updated in the years. I recommend that you, once and for all, give a look to all of them, so in the furure you may choose the more adequate to your needs. There is no better grid, but each of them has advantages and disadvantages.
Yes, I could recommend this jQuery plugin
http://datatables.net/
My Choice would be between
datatables.net (Already mentioned)
jqGrid (http://www.trirand.net/demoaspnetmvc.aspx)
I've foud the datatables easier to use at first, but finally I've used jqGrid as I've foud it more powerfull.
I've used both KendoUI and jqGrid successfully. jqGrid is a light-weight and less expensive solution if all you are looking for is a grid. One of the things I liked about jqGrid aside from its easy integration with knockout was it's ability to edit data in table cells as well as creating a "edit view" in which the data is edited in a form-type view with labels beside edit widgets.
That said, it sounds like you might be looking for more than a grid, and if so you should also look at using Html helpers to generate the constituant parts (header w/filter, data rows, paging, etc). This would give you ultimate flexibility over where the different parts are rendered on the page. Maybe you want to put the paging controls twice on the page at the top and bottom; maybe you want to put the filtering into a modal dialog box. The ability to simply go:
#Html.FilterControlsFor(Model.PhoneBookUsers)
someplace (or someplaces) on a page and have the helper deal with all of the details is pretty powerful juju.
Flexigrid - nice table plugin, but it is only ui table you should provide appropriative server side processing for selection and filtering data.
KendoUI any day. Theres a ASP.NET wrapper but it's quite expensive. But the jQuery lib is definitly the best out there.
I am attempting to create a store page, and for the storefront page I need to create something that will
list items from the database,
get the ID + Image URL saved in the database
create an hyperlinked image for each item in the query.
Any suggestions on how to do this?
The hyperlinked image will be an image of a product and links to a store page based on ID.
and a list of them will be displayed for the person to click on.
Thank you in advance, this project is a first for me (as well as my first web application in asp.net) and I'd like to see it done right!
And the site is done in C#, although if necessary I can port over to VB, at this time, not much actual code behind has been written, and I am comfortable enough with both to port whatever code I have over to it)
A simple approach would be to use an ASP.NET repeater.
Class documentation is here: http://msdn.microsoft.com/en-us/library/w9283stf
One detailed (although potentially out-of-date) article I found with a quick search is http://msdn.microsoft.com/en-us/magazine/cc163780.aspx
(But there are plenty of other "how to use repeater control" articles out there).
Good luck.
Now this is going to be a very absurd question. But what can I do, it's the client's requirement. Basically, we have a grid (master-detail type) that goes up to about 15 thousand plus rows (has the potential to go up to 30-50 thousand rows in a few years time).
My client does NOT want any paging, does not want any data cropped as well. Also he isn't exactly using the latest hardware so rendering on browsers is a big issue. He wants to view everything by printing it out or looking through it on the browser. (You may all think how insane that sounds, and it sure is).
Now I want to resolve this issue by rendering html quickly. At the moment its a simple asp.net grid view w/o paging. That essentially renders HTML tables. My options that I think are:
- Manually rendering html using div (for quick loading)
- export it to pdf or excel (is there any way to export without the need to resort to third party controls?)
- give the finger (to the client :D j/k)
So to sum up, whats the best way to show 10,000 plus records of data on html?
consider using the "Scroller" plug-in for Datatables..
As part of DataTables 1.8 release a new plug-in called "Scroller" was
introduced as part of the download package. Scroller is an
implementation of virtual scrolling for DataTables, which presents a
vertically scrolling table, scrolling the full height of the table,
but drawing only the rows which are necessary for the visible display,
leading to a huge performance increase. This is quite an exciting
plug-in for DataTables not only for the performance increase, but also
because it effectively provide a new user interaction with the table,
allowing full scrolling of very large data sets.
I know this is almost a year late, but in case it helps someone.
Use SlickGrid - It uses divs instead of tables, which gives so much more performance in IE. Check this example
He wants to view everything by printing
This is imho the only viable solution to view all information. PDF or Excel is much better at handling a large number of rows.
Doing the rendering is quite easy. Just set the excel mime type and return a HTML table.
http://www.designdetector.com/archives/05/07/HTMLToExcelTheEasyWay.php
When it comes to PDF, you probably have to use an external library like PDFSharp.
You should do the paging - it does not mean that you need to show only one page of data at a time but rather you should retrieve and render pageful of data at a time (and keep continuously fetching pages one after one till data is finished).
For example, send the first page of data from the server in the initial request. Setup a js timer and use AJAX requests to retrieve subsequent pages of data and load that into the browser. You can have multiple (say 3-4) AJAX requests going on simultaneously for retrieving pages - only thing would be to achieve the ordering correctly in such approach.
I will personally avoid grid-view and render the html table using manual java-script (with help for jquery) or use some java-script template engine. I will use JSON for retrieving the data from the server.