progress bar in controller loop mvc asp.net - asp.net-mvc

I was reading several articles on how to add a progress bar, but did not get any example to help.
I have a controller that makes a data import from a csv (over 10000) file, and how to make the implementation for the progress bar on the screen.
The only thing missing is to implement the progress bar, I have no idea how to do.

Web Progress bars can be a bit tricky to get to work properly. I see two options that you can do:
The easyiest way is to have a progressbar that only shows a animation that indicate to the user that something is still working, but actually it doesn't show you the progress of your long running task, it only animates.
The harder way is of course to show a realtime report on how far the progress has come.
In this case you will have to use the setTimeout() method in javascript to call a function every 2 or 3 second or so, and in that function do a ajax call to a MVC Controller method that can retreive the currently reported progress from your long running task, and then display it in some way in your GUI.
I either case I think you can use the jQueryUI ProgressBar component.

Related

hide UI components at RUN TIME , design issue

on a form I need a first set of UI controls at process start, later I only need a second set of components. I put the set for process set #1 on a first panel , after finish process step #1 I start to hide panel #1, is ther any better way from UI design guide lines ?
I would use Frames instead of Panels. You can design Frames at design-time just like Forms, and then create instances of your Frames at run-time as needed. So create your first Frame (you can even place it on the Form at design-time) and then at run-time, when ready you can destroy the first Frame instance and create an instance of the second Frame.
Using panels like you describe is a very common and very respectable way to proceed. Nothing wrong with doing it that way.
Another often used idiom is a page control with hidden tabs. So, make a page control. Add two tab sheets. Set TabVisible to False for both tab sheets. Then at run time set the ActivePage property of the page control to specify which page is shown to the user.
The page control approach is really rather similar to using panels. It's perhaps marginally easier to work with at design time, but much comes down to personal preference.

Partial View Wizard with Navigation

Looked many things up, but never posted before. Here's my situation. Any help would be most appreciated.
I've got a wizard with numerous screens with an associated navigation bar made using CSS. As users click from screen to screen, the navigation reflects the current wizard page the user is on. Each screen has different inputs to be collected. Database reads and writes are required during the render and submission of each page.
Here's the catch. Not every page is required. Only required pages are displayed in the navigation and the required information is stored in the database.
My goal is to reduce the number of database queries by dividing the navigation and remaining input into two separate partials. This way I don't have to render the navigation between each screen eliminating the single query every time between screens.
How would I submit the form of the current screen, render the partial view of the next screen, and yet update the query string to reflect the current partial view as well? This way if the user refreshes the page, they get the current screen.
Sounds like pre-optimization. How do you know you're going to have a problem with your navigation because of the database?
Why not separate out your navigation and output cache it?
If you bound determined to change the url without changing the content you need to use History API and if you need a fall back for browsers that don't support that you can use history.js.

JavaFX - button with hyperlink to another page

I want to make an application in JavaFX-2 based on two pages as "main" page and "extras" page. In the main page, I have added a Hbox function which includes a button named "extras". How do I define a second page and how can I set a hyperlink to the button (onMouseClicked event?), to refer to extras page? I could not find any examples on Mouse events related to this question. Thanks for help!
Take a look at the JFX Flow framework - it seems to have the functionality you are requesting, with back and forward navigation and transitions between scenes.
I created a simple wizard implementation in response to a forum post which helps perform some of this scene to scene style navigation. I also created a small sample of animating sliding panes of in and out of the screen which I also created earlier. The code for the two concepts is not linked together, but the code is pretty simple so, it wouldn't be hard to link it.
There is a large source of Canned animations in the FXExperience project as well as plently of inbuilt Transitions in JavaFX.

Handle changes to a big form. Alert before closing modal

I am currently working on a Customer Management application made in SmartGWT 2.0.
The Add Customer form is a fairly big one with multiple tabs and each tab has lot of fields. This form is opened in a modal window which have a save and a close button at the bottom.
Since this is a huge form, sometimes the rep accidentally hits Close without noticing that there is some information in one of the tabs.
We want to add some kind of alert when user tries to close the form after he has made changes to it.
I saw that there is ChangeHandler on text items which can flag a change which can be evaluated before firing the close event. However currently doing this for so many fields is a little bit cumbersome. Is there a way of achieving this on a DynamicForm level or even better on the Window level?
I am looking for a SmartGWT equivalent of this jquery code:
$("input:text, select, input:checkbox, input:radio, input:password").change(function(){
unloadRoutineFlag = true;
});
Take a closer look at this handler at the dynamicForm level.
addItemChangedHandler(ItemChangedHandler handler)
Handler fired when there is a changed() event fired on a FormItem
within this form.
Typically, when a formItem fires the changed() event, the form gets notified. Let us know if this works.

progress bar in mvc

In my project, on a particular view I am having various ajax calls and during the access to the database and displaying the data, it`s taking a long time. I want to have something like a progress image pops up, that would be displaying till the data are displayed and making the view where the data would be displayed as a modal, such that the user can no more click on anything on that page. Can I have an idea or guide how can I achieve that? Is there the possiblilty of progress bar in MVC or any suggestion is welcomed, any example please.
It may be overkill if you've not already got jQuery and jQuery-UI on your site, it can be done by creating a modal dialog: http://jqueryui.com/demos/dialog/#modal
that contains a progress bar: http://jqueryui.com/demos/progressbar/
You can then poll the server for the progress and update the appearance of the progress bar.

Resources