I have a checkout process that lets users add items to cart, and they are able to go through the first step of the checkout before logging in. Once it gets to the part where they have to log in, I'd like to use a popup div for this rather than redirecting them to a login page so it doesn't feel like they're leaving the checkout process.
I'm not sure what the best way to implement this is though. In a perfect world, there would be a way to integrate this idea with the existing asp.net forms authentication and it would popup the div over the page you're already on before redirecting to the protected page. I don't 'think' that's possible though so wondering how else could I do this?
There are a variety of ways to skin this cat. If you are a bit more old school, you can use the AJAX bits and modal popup control extender. If you are not using the AJAX bits for anything else, I would not go this direction.
A newer approach would be something like a JQuery popup: http://www.formget.com/jquery-popup-form/
As JQuery is integrated with ASP.NET now, this is a much more modern approach.
The key here is making the call outside of the page context, which means JavaScript (AJAX is essentially JavaScript (and XML - as the name implies)). You then can bring the user's context into play without sending to a login page and then bringing them back to the cart checkout page.
There are other JavaScript libraries that can be used for the same purpose. I would google login popup JQuery (or other library) and you will likely find a full implementation somewhere and save yourself time inventing it.
Related
want to have search functionality as on this website
http://www.carwale.com/new/search.aspx#budget=6&budget=8&fuel=2
here whenever the user filters search(checks any checkbox), it updates results accordingly,
that can be understood as an ajax filter.
But at the same time, the query string also reflects for the change,
which helps the user to bookmark the filter search for later reference.
changing it through asp.net/javascript may cause the page to reload..
any hint or suggestions on implementing the same would be really helpful..
This can be done with the help of 3 things together
1) as #Aristos said, checkboxes with Auto Postback enabled
2) Ajax control toolkit Modalpopup, which gets fired automatically on every async postback (http://weblogs.asp.net/ruslan/pages/ajax-update-progress-updateprogress-in-ajax-modal-popup-modalpopupextender.aspx or http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html)
3) History Points (http://msdn.microsoft.com/en-us/library/cc488548.aspx)
This can be done completely without the use of jQuery, if you dont want to use it.
-- For the first part, he have a set of check boxes list with autopostback.
In every post back the list is updated base on the selected check box.
All is simple until now, the cool is that is have a nice interactive interface (made with javascript and jQuery).
-- About the second part, how its change the url so can be bookmark with out reload the page. The trick here is that is place the parameters after the anchor # eg:
/new/search.aspx#budget=2
Using the anchor # the page is not reload and stay as it is. So when some one click on the check boxes, via javascript is also update the url, but only what is after the # so the page stay as is with out fully reload.
Now the parameters after the # can not read on code behind but only via javascript.
So when you have bookmark this page and you go direct to eg /new/search.aspx#budget=2 the javascript reads what is after the # and translate it to commands, check the appropriate checkboxes, and ask for refresh the content. All that can be done only via javascript.
I see that is use the jQuery history plugin as helper with this schema.
http://archive.plugins.jquery.com/project/history
The same trick with parameters after # is done from amazon, when you navigate on catalog, from page to page.
-- One more clever trick that is done is that is open a full page wait, so the user can not interact with the page until the page is ready again. If it not do that, and the user make very fast two clicks on the check boxes, then this can cause a full page post back on updatepanel and this can lose the previous settings.
I've always wanted to know what is, in a general way, the opinions about popups in web (I mean, those who are implemented via divs).
I've always liked not to load the user with the entire size of this popup in his navegation (when the popup is not visible). I assume that it's better load the content by demand (when the user clicks in the corresponding button). If you have five popups in one page, I always thought that the increase in 'bytes' can make a difference downloading the page.
Following the 'on demand' option I've always liked iframes because they let me change his URL via Javascript. So, I display a popup (div) which contains an iframe in wich I can change his contents downloading the page in this moment.
In my probably limited view, this method has another advantage. The validation logic (usually Asp.NET validators) are isolated in the popup page, so they don't enter in any kind of conflict with the validators located in the parent page (if applicable).
But it seems that iframes are not so well supported by some browsers and they are not too much appreciated by the community of designers (and it's a object with strong security implications).
So Basically I was wondering what are your experiences displaying these kind of UI. I know Jquery can load dynamically HTML in one div, but probably without isolating client validation scripting.
Opinions? THANKS a lot!
Firstly, you can create validation groups (http://msdn.microsoft.com/en-us/library/ms227424.aspx). That will help you with your validation problems.
You're right, you can use jQuery to dynamically load HTML as appropriate, but I'm not sure how well that works with aspx pages. There are problem a number of gotchas. Consider, you have page1.aspx and popup.aspx. If you load popup.aspx in an iFrame, you're fine, because it's a separate page. If you load it dynamically via JQuery.load() - the output of popup.aspx will load into your page1.aspx (this includes html tags, form tags, viewstate fields etc). That will likely cause some problems. (I haven't tried just guessing).
I have used .load in the past, but I tend to load standard html pages, not aspx pages. Then when the "submit" button is pressed, it calls a webservice with the relevent fields. This adds more javascript coding on my part - coding the "submit" button, coding a webservice to handle the ajax submit, coding the "wait screen" while an action is being done or data being submitted via ajax. I also have write the js to do client side validation and any code to handle server side validation and report that back to the user.
jQuery Validation plugins work well for this - or alternatively, you can instantiate .net validators if you don't want more plugins / frameworks (http://msdn.microsoft.com/en-us/library/yb52a4x0.aspx)
I'm doing some brainstorming for a portal framework, and I'm envisioning a breadcrumb navigation stack that is tracked via the ViewState (so that if the user clicks "back" in their browser and clicks some other link, the breadcrumb trail will depart from the right page). My pages are really just ascx controls that get loaded into a placeholder control on the main portal page based on the URL. When the user clicks a portal link, there is a postback that loads the original page and invokes the given link's "clicked" handler, which should then "push" the current location onto the breadcrumb stack before sending the browser a redirect instruction to change the URL to that of the page that I want to go to.
That's as far as my brainstorming goes for the moment, because once we perform a redirect, we lose the ViewState. Rather than doing the redirect, I've thought of simply telling my main portal page to replace the current page control with the target page control, thus avoiding the extra http round-trip and allowing me to keep the ViewState. But then my entire website experience occurs in the context of a single URL, so I lose URL bookmarking among other things. And if I wrap some of my controls in AJAX panels, the entire site happens in one page request as far as the browser's history is concerned.
What I would like is some way to have the browsing history and URLs behave as if each link is leading them to a new page with a descriptive URL and all that, but still have some way to know the path that the user took to get to the page that they're on (ViewState seeming to be the simplest way to track this).
Could anyone suggest some techniques I might try using?
First suggestion... You may want to look into ASP.NET MVC. However, I have to admit to some ignorance here as I'm not sure that would really solve your problem. But it sounds like the sort of thing MVC would be suited for.
Second... it's possible to override the methods responsible for saving and loading ViewState. One of the things you can do, for instance, is push the ViewState into the Session rather than sending it down to the user and back up on postback. You could easily add some custom code here.
Third... I think you may want to rethink part of your design. The ViewState really serves one purpose: It recreates the state of the page as it existed when the page was rendered for the user. If you are moving to a different page, or a new set of controls, why would you need the ViewState at all? The ViewState itself is really just a hack to begin with... ASP.NET's way of maintaining state on top of a stateless system. (but that's a whole 'nother discussion) We have other methods of maintaining state... the primary mechanism being the Session object. Why not save your breaacrumb data there instead?
I would look at using cookies. For performance reasons, you really want to avoid HTTP redirects if you can, and ViewState only works if the user submits a form, not for regular links.
You might do something like maintain several path lists in cookies that show the path that the user took to go from one page to another. Maybe you set a unique ID with each page that is applied by some JavaScript as a query string when the user clicks on a link, and the server uses that ID and the past history from the cookies to determine how to render the bread crumb on the next page?
I am writing an ASP.NET 3.5 web app that displays a list of items. I want to be able to display a non-modal popup with details when the user selects an item. I want to be able to display several detail popups simultaneously. (i.e., the user can click an item to see its details, then click another item to get another popup.) Currently I call RegisterStartupScript during postback to write a "window.open(...)" script to the page when it re-renders. The problem, of course, is that this requires a full page postback and refresh.
It occured to me that this might be a perfect use for XMLHttpRequest or AJAX but I don't know how to do it (or whether it's even possible or smart to do this). Can someone show me the way?
I have the AJAX Extensions installed but I'd prefer not to use the AJAX Control Toolkit.
EDIT:
Some clarification: When the user selects an item a custom event is raised. On the server I handle this event and use some server-side logic to construct a URL which I then use with RegisterStartupScript to construct a "window.open(myUrl...)" script. But posting back the whole page to do this seems inefficient and I'd like to know if I can just make a call to a simple server-side function that constructs the url and sends it back without having to roundtrip the entire page.
Creating a popup has very little to do with AJAX, and a lot more to do with JavaScript. See the jQuery dialog library here. You can then use jQuery's AJAX API to do your server dirty work :)
jQuery Dialog UI
--
Bill Konrad
Devtacular - Web Development Tutorials
You can use DHTML Window widget.
It offers many way to display either modal or non modal window.
Also it supports AJAX.
You can use dhtmlwindow for open a new window, or
dhtmlmodal to open a new modal window.
Of course, you can edit it to match your requirement.
Sample:
var insWindow = dhtmlmodal.open("insbox", "iframe","UserMaster.aspx?" + queryStr, "User Master", "width=425px,height=500,center=1,resize=0,scrolling=1", "recal");
Do you really need to open a new window? Opening an absolutely positioned DIV or a new layer on top of the current page in the same window is all the rage these days.
Edit:
I don't think it would limit the number of popups, there is some neat stuff that can be done these days with libraries like jQuery + jQuery UI, you can simply create as many of these DIVs/layers as you need and make them movable, resizable, etc. Only thing that real popups have and these do not is that they do not appear on the tab panel/taskbar.
Yes, you will be limited to the size of the window in which is the main page opened, however, I don't personally see it as a problem since most people surf in a maximized browser window anyways.
Implementation of the oldschool typical popup window is undoubtedly much easier for you, but it also runs into problems with end user popup blockers. Just had that problem # my work, they needed to make a popup during the certificate authentication process for some reason and as soon as Yahoo released a new version their toolbar, it quit working).
I have a web login page with the standard username password and login button controls. I would like to write a wrapper page that will render and auto fill the username and login form text boxes with a constant and force the onclick event for login button. Any suggestions how to accomplish this?
If you want this sort of functionality to decrease overall testing time you should also take a look at:
WatiN
or
IEUnit
If you are doing this as a production feature of your system you should look at implementing some sort of "Remember Me" option with browser-based cookies - you would likely never want such a feature that automatically authenticates any anonymous person to a user to your system out in the wild.
Depending on the specific form and how it is done, you can make a wrapper page that embeds the form inside an iFrame. You can then use JS to set the values inside the iFrame, and call the proper submit.
This would require testing and a bit of research, but i have seen it done.
NOTE: I also strongly caution against this due to the obvious security implications...but you know your situation/use better than we do.
This sounds like a terrible idea, security-wise. Don't do it.
If you're looking for a default login, as many sites show with a textboxes having "username" and "password", then they are attributes of the input tag.
If you want to automate a login for a demo purposes, as many FLOSS projects do, you could prefill with a combo of demo/demo (or similar), also as attributes of the input tag.