Is there a straightforward way to use server-side validation with ASP.NET's validation controls in a form that's displayed in a modal dialog? I am using jQuery and SimpleModal (in C#, VS2010, .NET 4.0)
I've got a modal form which works fine. I need to use a server-side validation because the logic depends on data specific to the record being accessed
My solution for the project I'm working on now is to use a jQuery ajax call to pass all the form data to the server and get back the validation results before allowing the post to proceed. But this is relatively time consuming to implement, and in some situations I'm dealing with now all the validation code exists already.
The first challenge is that of course the modal dialog will close on a full postback. So you could put an UpdatePanel inside the dialog... without even thinking about this too much, though, I assumed that it wouldn't work out that well. It doesn't. And the form which opens the modal dialog to begin with is already in an UpdatePanel, which further confuses matters.
Anyway, I tried putting the contents of the modal form in an UpdatePanel for the heck of it. It does actually do a partial postback, the dialog remains open, but the contents of the dialog do not get updated with anything I change server side. If I close and re-open the dialog on the same page after testing the validation code, though, its contents are in fact updated to reflect these changes. Obviously the way the dialog is rendered is confusing ASP.NET. Or vice-versa. But this just seems sketchy from the get-go.
Rather than trying to hack my way through this problem I was hoping that others had some suggestions about a better way to approach this. Or just tell me I'm trying to hard too mix apples and oranges and I should keep it all client side (or client side + jQuery ajax) if that is the only sensible thing to do.
The two approaches I've taken:
1) submit the data via ajax, the response includes a success:true or false. If false, there is a message included that details the issue.
2) submit the form normally. If there is a validation problem, but the errors in a hidden div on the page and write JS to check for content in that div when the page loads and display the warning/error as necessary.
Related
I would like to take one decision based on the question described. I had already used PageMethods in clientside code. If it triggers postback then I wanted to replace it with ajax call from client side. Can anybody clarify it?
A web method of the given page when called by a ajax call client side does NOT cause a post-back. But, keep in mind that such web methods can't referance any control on the page, nor can you use ViewState. You can use session() in a web method.
Often, in some cases, you can then adopt a update panel, and put the controls in that update panel, and thus when you click a button, or any event code from a control?
Then you don't get nor see a full page post-back. So often, a update paneal is a great way to prevent and not have full page post back. But, do keep in mind that a update panel DOES cause a partial page post-back, and even your page load event fires again.
But, a web method? No page post back occures. You often require this since a jQuery.UI pop dialog can disply things, but if that dialog needs server side code, then you can't have a post-back (since then the dialog will collapse, since you getting a new fresh re-rendered page. And even using a up-date panel will also collapse a dialog.
however, if you don't have some pop dialog showing? Then it MUCH less work and effort to just use a update panel, and not bother with all the work to wire up a ajax call to a web method.
So, in most cases I don't make the time + effort to build a ajax call.
So, look into a update panel first - often less work.
But, if you just need some value from the server, don't want a post-back, and don't want (or can't use a update-panel), then a web method is great choice. (since no post-back occurs). The big down side of a web method is no use of controls or anything from the web page can be used in that ajax call to the web method (so, you have to have the data you need client side, or pass some value(s) to the server side web method.
A pagemethod also does not cause a post-back.
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've heard different stories about ASP.NET and JavaScript: that it works fine with Javascript turned off, that only some parts don't work, and that nothing works at all.
How exactly are ASP.NET applications affected if JavaScript is turned off in a client's browser? What parts don't work (if any)?
For example, will RequiredFieldValidators still work? What about UploadControls? AJAX UpdatePanels and AsyncPostBack's? FileUploads? Do page codebehinds still run?
Forgive my ignorance, I can't seem to find much about the issue that is in-depth.
Client-side validation and Ajax won't work, including async postbacks and any control that requires Javascript in order to work.
Server-side validation (which should always happen anyway) and full postbacks and such should always work, and i think a FileUpload control will as well. The biggest difference would be that someone wouldn't see that the data they entered happened to be invalid til the form was submitted.
LinkButtons don't work because they render out a javascript: target.
If you use GridView controls with ButtonColumns then these won't work as the buttons are javascript too. One way around this is to use a TemplateColumn and add <asp:Button> objects inside it.
Also GridView paging and sorting is JavaScript out-the-box so you'd have to write custom paging and sorting.
Also any control with AutoPostback set to true (e.g. a DropdownList) will not auto-postback. You will be able to catch the SelectedIndexChanged but ONLY when the next postback happens.
Any control that "does something" on the client side without a full page request going back to the server(ie. the whole page reloading) is done via JavaScript , and will not work with JavaScript turned off.
Remember HTML is static, so anything that "changes" in the browser window other than CSS hover effects or anything that calls back to the server without a full page reload, is done via JavaScript, and you cannot expect that to work with JavaScript disabled on the client.
I am a little confused and making it alot more complicated than this needs to be! Here is what I have...
A view which displays a drop down of US States. When the user chooses a state it loads a list of data from a database and returns the results (populates the View Model) and the View renders the information.
What I wanted to do was have have the dropdown trigger an Ajax event which performs the data load, but also wanted it to depreciate if the user didn't have Javascript enabled. How would I go about rendering the view with AND without javascript / ajax?
Hope that makes sense. Thanks for your help.
You can't re-populate a drop-down without jscript. You can do a page-reload with a new drop-down though, although the logic to determine which to use is javascript unfortunately. (Not to mention triggering the re-load of the page on click)
No Javascript support though? That seems kind of out of date, most people run javascript-enabled browsers these days. As for paranoia freaks with javascript turned off, a <noscript> block to tell them to get over it may be appropriate.
To do this with ajax, read this article about cascade dropdowns by Stephen Walther.
To do this without ajax, you could put your first dropdown in a form with a button visible only when javascript is disabled (hide this with javascript for that) wich gets to some action (in another window, maybe) wich returns the second dropdown populated according to the element selected on the first (on the first window, if you have 2 - you could know this url using a viewstate variable).
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).