I thought I would ask here about how to develop a wiazrd like control
in ajax for MVC before I started it.
The control will have pages that have data entry controls and
on each page submission insert data into a database.
Any ideas how to go about this?
Malcolm
Are you using a JavaScript library? I know dojo has a wizard in dojox namespace, and I'm pretty sure there are wizards for jquery. If not, I'd do a wizard just like I would tabs, without the tab bar, and each view contains a form and next, previous, cancel and or restart buttons, all of which would handle the ajax calls/state management and change the view.
If it's a wizard you probably actually should use separate web pages rather than having a single page that's updated through ajax calls, that way the forward and back buttons can work as nature intended in the browser for moving forward and back through the wizard.
Of course you can use fragment tricks to get forward / back working in a single page but in my experience this is tricky.
Related
Just wanted to share a discovery when using Google Tag Manager (GTM) and two submit buttons in a form-tag (common legacy asp.net Webforms tech).
GTM is used by website editors. So the developers doesnt need to be involved when other scripts or event needs to be implemented or traced.
The problem is that something in GTM is making our form to always trigger the default submit button (the first in order is default).
Example problem/how to reproduce: in a wizard scenario, with back and next submit buttons, which are triggering a postback. Click on next is triggering the back button.
Removing the GTM code, and it works.
This is a legacy site. Maybe a legacy issue, but the site worked until we implemented GTM.
You may ask me now, what components are we using in GTM. Well google analytics is one, then i don't know.
Regards.
Work-around solution: I had to rebuild the HTML to NOT use "input type=submit".
Instead use buttons without submit behavior. eg not use "postbacks" on one of the buttons.
Probably something for the GTM team to look at or inform.
I have a requirement of having the same URL throughout the application navigations. Like below
http://www.[Site Name]:com. (Here User should not have the idea of chaning the URL from one page to another page)
I am using ASP.NET MVC3 with latest Razor View Engine,
Can some body give suggestions on this?
Advanced Thanks,
Satish Kotha
This may make it very difficult for users to access your site - they won't be able to bookmark a specific page, for example.
It sounds like you want a single-page-app (e.g. like Google Mail or Reader). In this case, you have one page and make heavy use of AJAX. You can query the server via javascript, and send back Partial Views, or raw data in JSON format which can be rendered on the client, possibly via some kind of templating engine.
As Graham Clark has already mentioned, this functionality will most likely be frustrating for the user; however, achieving it depends on the complexity of your project. You may want to look into using jquery to load partial views into the main content area of your site.
When you click on your navigation you can use jquery's load() to replace the main content on the page. Jquery-load-with-mvc-2-partialviews is an interesting blog post that may give you more insight into what you would want to do. Your code to load content could look something like this:
$("#mainContent").load("/Controller/Action",
{parameter}, function () {
// perform javascript actions on load complete
});
In the past I have developed large extjs single page applications. Many users get frustrated for not being able to use the Back or Fwd buttons or reload the page.I would also like to warn the user if they navigate away from a page without completing a work flow, and enable users to directly access particular views.
For the next application, I am thinking of using the Codeigniter php MVC framework. It is possible to something similar to this example. I am stucked thinking about the navigation. If I load the ExtJs for each view, that is a significant slowdown.
How best to approach this?
Have a look at the Ext.History class (Ext.util.History on Ext4). With it you can register listeners for changes to the hash:
Ext.History.on('change', function( token ) {
console.log('token changed to: ', token);
});
The Ext.History singleton includes forward() and back() methods for triggering navigation from within the client-side code.
By having only the hash part of the URL change the browser stays on the same page, thus eliminating the need to reload the Ext library.
How this would integrate with your PHP framework I cannot say. I am not familiar with CodeIgniter and your example link goes to a dead page.
Also, do note a caveat with History in that under Ext3 at least it may give you issues with newer browsers. If this is the case an alternative is to code your own History-like solution using the 'hashchange' browser event as illustrated in this answer.
I am working on a site where the main part of it is driven by an ajax style navigation system using anchors in the url to define the application state.
On top of this I now need to support IFrames that are loaded on top of this application. The problem I'm having is that the back button breaks if I make use of fragments.
I've created a very simple sample, that isn't using any of the ajax libraries. All it has is a link that adds an anchor to the url and an iframe, with some normal links in it.
If I click then anchor link first, then I click the link in the iframe, I would expect the first back click to take back to the original iframe page and the second click to remove the anchor from the url.
I'm aware of all the various solutions out there (YUI, reallysimplehistory, jquery plugin) and they all work great, but they don't cater for iframes.
I'm also aware that I could add some JS to the framed pages and possibly route all navigation through the parent page, but I'm hoping that isn't necessary.
So the question is, can anyone explain what is going on inside the history object in this sample? Secondly is there anything I can do from the parent iframe to coax the history object to pick up these navigation entries?
Note: I'm only enquiring about FF/Safari/Chrome in this sample. IE needs to looked at separately.
Refer to
JavaScript .hashchange performance. Can it bring any slowdown?
and
How does Gmail handle back/forward in rich JavaScript?
We are using Ajax Update Panel in SharePoint web part to avoid postback, Certainly it is the easiest approach out there to provide AJAX functionality.But at times it feels like the performance is horrible!
Are there any better approach where in you get better performance then AJAX update panel.
If you're interested in better performance then the Update Panel isn't going to help you.
It's purely a User Experience thing!
When you're using the Update Panel:
Browser is still doing the full post
to the server
Server is doing all the usual work
for ALL the web parts on the page
Server graps the HTML inside the
update panel and sends this and
ViewState to browser
Browser replaces ViewState and HTML
inside Update Panel
But Using the Update Panel is very easy and you don't have to know any JavaScript
Using "real" AJAX would mean:
You have to know JavaScript
You have to know/develop Web Services
BUT only the requested functionallity will have to run on the server, so you'll usually get a lot better performance
NEVER EVER EVER user MS Ajax and the update panel. You will be burnt sooner or later.
Instead, use jQuery, and it's AJAX methods.
Why?
A) jQuery is smaller (and therefore faster?)
B) You can do more with jQuery by iteself than ms AJAX
C) Trying to hide AJAX in server controls is a dumb idea from the start
d) Web forms and server controls in general suck - less is more
e) Sooner or later you will need to get down and dirty with AJAX - better to start at a lower level
I suggest instead of using Asp.NET Update Panel. You can create an .ashx file handler that will expose your server side functions. Then with this you can use jQuery and Ajax to call your server side functions. This will be faster and cross browser issues will be kept to a minimum.