I am porting an application from ASP.NET 2 to ASP.NET 4.5
I have a page that creates a popup windows (Another .aspx page started with the javascript modalWin function).
When the popup is dismissed (using window.close()):
Under 4.5 the primary page refreshes
Under 2.0 it does not refresh.
This is a problem because it throws away all the data on the parent page.
How can I determine what it causing the parent page to refresh?
This is difficult for me to debug because I don't know where to set a break point to step thru code to figure out what it is doing. When I set a break point in the onload= function it just reports the call stack of the page starting the javascript.
I am new to visual studio so please use terminology and instructions that I can see on the screen.
The parent page invokes the popup page like this:
<button id="bbb" onclick="button_onclick(this)">Button</button>
The javascript looks like this:
function button_onclick(element) {
modalWin("popup.aspx", 300, 300);
}
When the user clicks the save button on the popup page this javascript runs:
function closeit() {
window.returnValue = true;
window.close();
}
I have dug into the change history of the code and previously the <button> button was a image button but the javascript that is invoked did not change.
"previously the button was a image button". You seem to mention this in passing almost, but here's your clue. An image with a client-side click event wouldn't cause a postback, because images never do that. Whereas a <button> element will, by default, cause a postback, because its default type is submit. You need to change that to button to prevent it.
<button type="button" id="bbb" onclick="button_onclick(this)">Button</button>
This is the crucial change, and is related to the way the web works in general, not to ASP.NET. The change of .NET Framework is a red herring. The problem does not occur because you changed frameworks, it's because you changed the code
Related
I thought this would be a trivial feature, but I have lost a fair bit of hair trying to figure it out. I have a jquery mobile web page with a select menu. Users click an item in the drop down list, then later click on a link and navigate to another page. Users then click the back button. The desired result is that the selected item remains selected. Right now, the selection is lost, and it defaults to the first element in the list again.
Things I've tried:
1) Use an asp.net dropdownlist with autopostback. This preserves the selected option, but then I get a page flicker because the entire page is posted back.
2) Wrap above asp.net dropdownlist in an updatepanel. This preserves, doesn't flicker, but it wipes out the jquery mobile styling. Also tried some suggested workarounds with firing a jquery create event, but couldn't get anything working.
3) Write cookies on the select change event in javascript, and read them in the asp page_load event. However, page_load is not called when the back button is clicked, so this had no effect.
4) Tried creating a jquery ajax request to a web page method, but the method must be static and therefore I can't get it to modify the page.
Any other ideas? Is it just me or should this indeed be a problem that's been solved a million times?
As an FYI, I am a newbie at web programming, so please spell it out if you have an answer :) (come from a c++/database background).
Thanks!
Turns out even the date scroller could not survive a back button in some cases. For example if the user navigates to another site, and then uses the back button to come back to my jquery mobile site, all my javascript dom manipulations are lost. The solution is non-trivial. I store everything I need to maintain state of a page using html 5 local storage. On the jqm show page event, I detect if all my global variables have been wiped clean, and if so, reload state from local storage. Works perfectly, but it is quite an implementation task. And of course, if local storage is not supported by underlying browser, it all falls to pieces.
I'm trying to build a modalpopupextender, along with a panel and content, and need to make it application-wide. I am thinking about creating it on the Masterpage, so it's accessible on all pages, but I need the content inside the panel (anything that I may need to add there) to be visible and editable from outsite the masterpage.
For now, I'm working on this, but haven't figured out how to make it accessible to other pages and classes, and so would like to have some help on it.
Basically, what I want is to work more on the idea in a near future in order to make something consistent to be used on any web application, and to be fully customizable. What I'm having trouble is with "basics", like making it accessible to the application, allow customization of some controls inside the panel from both server and client sides, and will improve everything from there.
I have tried creating a user control for it, but didn't seem to work. I'm not an expert on asp.net (few years of experience), and even less on ajax, so any help is appreciated.
Please let me know if anybody have any questions.
EDIT:
I have now succeeded somehow creating the moodal within a user control and it's almost done.
At this moment, there are 2 issues I couldn't fix:
The damn flickering that happens on Firefox 3.5 (Corporate version, can't touch this). Ocasionally during page load (Somewhere near Page_Init or Page_PreInit events, not sure), the modals I have blink quickly on the screen, only when a postback happens. I have already done some workaround, like setting style display:none, but the issue remains. Need some help on the matter.
I need to have a modal that have 2 behaviors, like windows popups. One is information, likee only showing the message with some buttons, and the other is question. For questions, I'll need to use the ConfirmButtonExtender, and so would need to tell this confirm extender and the modal that an external button (Means a button that isn't within the user control, and by that means it's outside the same UpdatePanel as the confirm extender and modal extender) will be their TargetControlID. For now, I couldn't solve this, so I thought about creating a button inside the UC and UpdatePanel that will always be the TargetControlID. When the popup is informational, it will work as a dummy hidden button (information messages are called on server-side through methods), and when it's a question, it will receive the response. The method to be executed by the button will be set through a delegate, and therefore any method may be run when it's clicked and the Yes button on the modal is pressed (It's not ready yet, and I'm not sure it will work, or even if it's a good idea).
Any thoughts on this second option is appreciated.
It's easy for elements on the masterpage to be visible and editable from outsite the masterpage.
In this example the masterpage has a label that you want to read/write from other pages
<asp:Label ID="lblSubTitle" runat="server" Text="sub title"></asp:Label>
In the codefile for the masterpage, create a property for the subtitle:
public partial class MainMasterPage : System.Web.UI.MasterPage
{
public string SubTitle
{
get
{
return lblSubTitle.Text;
}
set
{
lblSubTitle.Text = value;
}
}
}
Then any page that uses this masterpage as its MasterPageFile can find the subtitle property and read or write it.
// get a reference to the masterpage
MainMasterPage master = (MainMasterPage)Master;
//set it to the value you want.
master.SubTitle = "Custom sub title";
I have solved the issue and created a user control containing the modalpopup for showing customized messages.
Many aspects are public, so it allows high customization, and the modal and it's customized buttons work like a charm. I still have a problem regarding the flickering, but it's for another question.
In an asp.net web application, I have a modal popup built with a Telerik Rad Window. In that popup there is a button which must do some action in its "code-behind" and then redirect the application to another page.
For the redirection I use the javascript command 'top.document.location.href = myPage' (sent to the browser from the code-behind with a ScriptManager.RegisterClientScriptBlock(...)).
This solves my problem but it is not very nice. When the button is pressed, this triggers the post-back. In the browser the popup is covered by a RadLoadingPanel which disapper when the post-back is finished. Then during a few seconds, nothing happens in the application and it is only after some time that the browser loads the new page.
The fact that nothing happens during a few second is not great since a user cannot know what the application is doing.
What can I do ? Is there a better way to do the redirection ? (I'm very new to javascript programming...).
Instead of just calling 'top.document.location.href = myPage', you can call a function that displays an overlay (e.g. show a RadAjaxLoadingPanel over the parent page body) and then set the new URL. See http://www.telerik.com/help/aspnet-ajax/ajxshowhideloadingpanel.html for info on how to show loading panels with JavaScript.
I think the delay after you set location.href is normal - the browser/server take some time to retrieve the new page HTML so the old page cannot go away instantly.
i need to implement a back button for my asp.net website.I am able to use the javascript method to acheive my requirement.But using this method sometimes I need to click on the back button multiple number times to go back to the previous page.It may be because we are using jquery tabs in our website.To focus on a particular tab,other than the 1st tab on page load I am using Page.ClientScript.RegisterStartupScript(....).So I am unable to take the user back to the previous page with just one click.
I also tried with asp.net-C# methods mentioned in the following link.
http://www.dotnetcurry.com/ShowArticle.aspx?ID=89
I am able to go back to the previous page, but its state is being lost.Could someone please help me in acheiveing my requirement?
Details:
I have page1.aspx,page2.aspx(which contains jquery tabs view/edit).
In the page1.aspx there are 2 buttons(View,Edit).If I click on view button it takes me to page2.aspx View tab(1st tab) and if I click on the edit button it has to take me to page2.aspx with Edit tab loaded.both View/Edit tabs contain back button.
Also from the View tab I can navigate to the Edit tab,by clicking on another Edit button present in it.
Thanks.
The methods you have covered in your question are essentially what is available to you.
You can either
1. Provide a link that uses javascript to make the client go back a page.
2. Provide a link that posts back to the server that redirects you back a page.
I am not sure why the jquery in your webform as described in your question is causing you to click more that once to go back. If you know that it will always take 2 clicks to go back you could try this method:
javascript: window.history.go(-2)
When you are using the postback/redirect method you will always be using a http GET method to retrieve the page you are returning too. If you want to maintain state you will have to do this manually i.e. save the values when leaving the page somewhere, like session or a temporary database, and when returning to the page, during the page load, check to see if the user has these values saved and pre-populate them.
I've done something similar (with automatic redirections though) and I had to keep track of the number of pages to go back in my ViewState (or Session if you're jumping from page to page):
code-behind
public void Page_Load()
{
Session["pagesToGoBack"] = ((int)Session["pagesToGoBack"])++;
}
mark-up:
<input type="button" value="Back" onclick='javascript:history.go(<%= Session["pagesToGoBack"] %>);' />
Be careful to reset the session variable when needed
Made me feel a bit dirty but it worked :)
I'm using jQuery and SimpleModal in an ASP.Net project to make some nice dialogs for a web app. Unfortunately, any buttons in a modal dialog can no longer execute their postbacks, which is not really acceptable.
There is one source I've found with a workaround, but for the life of me I can't get it to work, mostly because I am not fully understanding all of the necessary steps.
I also have a workaround, which is to replace the postbacks, but it's ugly and probably not the most reliable. I would really like to make the postbacks work again. Any ideas?
UPDATE: I should clarify, the postbacks are not working because the Javascript used to execute the post backs has broken in some way, so nothing happens at all when the button is clicked.
Both of you were on the right track. What I realized is that SimpleModal appends the dialog to the body, which is outside ASP.Net's <form>, which breaks the functionality, since it can't find the elements.
To fix it, I just modified the SimpleModal source to append eveything to 'form' instead of 'body'. When I create the dialog, I also use the persist: true option, to make sure the buttons stay through opening and closing.
Thanks everyone for the suggestions!
UPDATE: Version 1.3 adds an appendTo option in the configuration for specifying which element the modal dialog should be appended to. Here are the docs.
All standard ASP.NET postbacks work by calling a __doPostBack javascript method on the page. That function submits the form (ASP.NET only really likes one form per page) which includes some hidden input field in which all the viewstate and other goodness lives.
On the face of it I can't see anything in SimpalModal that would screw up your page's form or any of the standard hidden inputs, unless the contents of that modal happened to come from a HTTP GET to an ASP.NET page. That would result in two ASP.NET forms being rendered into one DOM and would would almost certainly screw up the __doPostBack function.
Have you considered using the ASP.NET AJAX ModalPopup control?
Web browsers will not POST any disabled or hidden form elements.
So what's happening is:
The user clicks on a button in your dialog.
The button calls SimpleModal's close() method, hiding the dialog and the button
The client POSTs the form (without the button's ID)
The ASP.NET framework can't figure out which button was clicked
Your server-side code doesn't get executed.
The solution is to do whatever you need to do on the client (closing the dialog in this case) and then call __doPostback() yourself.
For example (where "dlg" is the client-side SimpleModal dialog reference):
btn.OnClientClick = string.Format("{0}; dlg.close();",
ClientScript.GetPostBackEventReference(btn, null));
That should hide the dialog, submit the form, and call whatever server-side event you have for that button.
#Dan
All standard ASP.NET postbacks work by calling a __doPostBack javascript method on the page.
asp:Buttons do not call __doPostback() because HTML input controls already submit the form.
got caught out by this one - many thanks to tghw and all the other contributors on the appendto form instead of body fix. (resolved by attributes on the 1.3 version)
btw: If anyone needs to close the dialog programmatically from .net - you can use this type of syntax
private void CloseDialog()
{
string script = string.Format(#"closeDialog()");
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}
where the javascript of closedialog is like this....
function closeDialog() {
$.modal.close();
}
I have found the following works without modifying simplemodal.js:
function modalShow(dialog) {
// if the user clicks "Save" in dialog
dialog.data.find('#ButtonSave').click(function(ev) {
ev.preventDefault();
//Perfom validation
// close the dialog
$.modal.close();
//Fire the click event of the hidden button to cause a postback
dialog.data.find('#ButtonSaveTask').click();
});
dialog.data.find("#ButtonCancel").click(function(ev) {
ev.preventDefault();
$.modal.close();
});
}
So instead of using the buttons in the dialog to cause the postback you prevent their submit and then find a hidden button in the form and call its click event.
FWIW, I've updated the blog post you pointed to with come clarification, reposted here - the reasoning & other details are in the blog post:
The solution (as of my last checkin before lunch):
Override the dialog's onClose event, and do the following:
Call the dialog's default Close function
Set the dialog div's innerHTML to a single
Hijack __doPostBack, pointing it to a new function, newDoPostBack
From some comments I’ve seen on the web, point 1 needs some clarification. Unfortunately, I’m no longer with the same employer, and don’t have access to the code I used, but I’ll do what I can. First off, you need to override the dialog’s onClose function by defining a new function, and pointing your dialog to it, like this:
$('#myJQselector').modal({onClose: mynewClose});
Call the dialog's default Close function. In the function you define, you should first call the default functionality (a best practice for just about anything you override usually):
Set the dialog div's innerHTML to a single – This is not a required step, so skip it if you don’t understand this.
Hijack __doPostBack, pointing it to a new function, newDoPostBack
function myNewClose (dialog)
{
dialog.close();
__doPostBack = newDoPostBack;
}
Write the newDoPostBack function:
function newDoPostBack(eventTarget, eventArgument)
{
var theForm = document.forms[0];
if (!theForm)
{
theForm = document.aspnetForm;
}
if (!theForm.onsubmit || (theForm.onsubmit() != false))
{
document.getElementById("__EVENTTARGET").value = eventTarget;
document.getElementById("__EVENTARGUMENT").value = eventArgument;
theForm.submit();
}
}
The new Jquery.simplemodal-1.3.js has an option called appendTo. So add an option called appendTo:'form' because the default is appendTo:'body' which doesn't work in asp.net.
Had the same problem, but {appendTo:'form'} caused the modal popup to be rendered completely wrong (as though I had a CSS issue).
Turns out the template I'm building on top of has includes that put other forms on the page. Once I set {appendTo:'#aspnetForm'} (the default Asp.net form ID), everything worked great (including the postback).
In addition to tghw's answer, this excellent blog post helped me: jQuery: Fix your postbacks in Modal forms -- specifically BtnMike's comment: "You also must not have CssClass=”simplemodal-close” set on your asp:button." Taking that off the class was the not-obvious-to-me solution.
-John
if you don want modify the SimpleModal source.
try this..
After you call the modal() method add this:
$("#simplemodal-overlay").appendTo('form');
$("#simplemodal-container").appendTo('form');
the SimpleModal plugin add two this to your markup.
'simplemodal-overlay' for the background
'simplemodal-container' containig the div that you whant as pop up modal.