why page is reloading when html button executing c# code - c#

I have html form which default value is display:none.
Im showing it with jquery.
There is button with C# code behind. When its executing page is reloading and my form is disappearing(display:none).
How i can execute c# code without page reload ?

Your c# code is server side and the page reloads to be able to call it. If you don't want that you'll need to use some AJAX.
See this tutorial: http://www.asp.net/web-forms/videos/aspnet-ajax/how-do-i-make-client-side-network-callbacks-with-aspnet-ajax

Is all of your code in the Page_Load section? Each time you make a callback the Page_Load runs. To stop certain things from happening each time you make a callback you can put them in something like
if (!Page.IsCallback && !Page.IsPostBack)
{
//this code will only be run the first time the page is loaded.
}

Related

Submit a form from code behind

I'm having trouble implementing a functionality on my c#/asp.net app.
I have a form with a RadioButtonList and a submit button.
The RadioButtonList is generated on Page_Load() from a list of objects I retrieve from the database.
I would like to automatically submit the form if there is only 1 object in the list.
I have access to my Form object, to the submit button etc... but I can't seem to find a solution (in the end I'm looking for a kind of form.Submit() ) method.
Does anyone have an idea of how I could do this ?
Thanks in advance !
EDIT >> Here is the code :
.aspx : http://pastebin.com/0E6T7dqH
.aspx.cs : http://pastebin.com/54payZJP
EDIT2 >>>
As it seems there is no way to do what I wanted to do at first, I ended up using a session variable with a response.redirect()
Source :
http://dotnetslackers.com/Community/blogs/haissam/archive/2007/11/26/ways-to-pass-data-between-webforms.aspx
Post happens in the client side. As in Page_Load you are currently executing in the server side, just call the code you want to execute on post.
Edit: For actually going to another aspx
public void Page_Load(object sender, EventArgs e) {
if(!IsPostback && OnlyOneItem) {
Server.Transfer("TheOtherPage.aspx");
}
}
Server.Transfer will maintain the entire request, so your post data will be available.
http://msdn.microsoft.com/en-us/library/system.web.httpserverutility.transfer.aspx
Try something like this
In your Page_Load
if(!IsPostBack)
{
if(check for only one object)
{
//your submit code
}
}
I actually had to do something similar, once. Here is a way you can do it.
Asp.Net buttons have a property called PostBackUrl, and it does exactly what you would expect - it controls where the form will post if you click the button.
You can also use the RegisterStartupScript function to render javascript on the page.
Now, with these two pieces, you can achieve your goal.
if(!IsPostBack)
{
if(results == 1)
{
button.PostBackUrl = "next page's url"
//Register script to click the button using RegisterStartupScript
}
}
Now, having shown you this, I will warn you it may not make for the best user experience. When I did it, it was for a very specific case that had no other solution. The page will actually post back to the user, and they will see the page for a moment before the javascript to click the button takes effect. Additionally, when you set a button's PostBackUrl, that means that when it is clicked, your entire form will be posted to the page specified. The code behind for the current page will not fire at all, so if you have any validation, it won't run.
There's nothing wrong with letting the user click the button to submit the form even if they only have one choice. In my experience, users like to feel like they are in control on the system; they don't like it when pages just do things without their input.
Also, there is not really anything wrong with putting the information the next page needs into the session or even a database table, and using Response.Redirect. It's a fairly common practice and works reliably in most scenarios.

AsyncFileUpload, can't refresh page after upload is completed

I have an Ajax AsyncFileUpload on one of my pages (inside a update panel). The control works, however I want the page to reload after the upload is complete. I tried a Response.Redirect in the code behind for the OnUploadedComplete method and a location.reload(true) in the OnClientUploadComplete. Both result in javascript alert of `Server Response Error: 'Unknown Server error'
Do you want to see the response page?` and the page doesn't refresh.
Has anyone been able to do a full page refresh after the upload has completed?
Edit: I mistakenly said the AsyncFileUpload is in a control panel, I meant to say update panel.
Use asp:FileUpload control and register it as postback control with Scriptmanager's RegisterPostBackControl method. Or add postback trigger entry for this FileUpload to Triggers collection of UpdatePanel
This control panel that you told. Is this a UpdatePanel? If it is, you can try an upd.Update(); to refresh the panel.
Becareful, if you have Response on your backside you may be ending your page's life cycle right there. This is just a guess. Check to make sure that your code is even reaching the intended point. Look for things like Response.End which will will prevent anything thereafter from executing.

How do I generate JavaScript during an AJAX callback (postback) and then execute it on the browser?

In summary:
I have an ASP.NET web page that causes an AJAX postback to the server. When this event handler runs (in the code behind) it will generate some JavaScript that I then want to run in the client. Not sure how to achieve this.
In Detail:
I have an ASP.NET web page with multiple items displayed on the page.
As a "nice to have", I want to display either a green circle or a red cross next to each item (these differ depending upon each item). Since it isn't vital for the User to see these icons and also because it takes several seconds to work out which icon should be shown for each item, I want to perform this after the page has loaded, so in an AJAX callback.
My thought therefore was this. When creating the page, I would create both icons next to each object and create them with the style of "hidden". I would also make a note of each one's client ID.
Then, when the callback occurs, I fetch the necessary data from the database and then create a JavaScript function that changes the display for each of the icons I want to show from "hidden" to "visible".
I thought I could achieve this using the ScriptManager object.
Here's a very trivial version of my server side code (C#)
void AjaxHandler(object sender, EventArgs e)
{
// call to database
string jscript = "alert('wibble');";
ScriptManager.RegisterStartupScript(this, this.GetType(), "uniqueKey", jscript);
}
Obviously, here I'm just trying to get an alert to fire after the postback has occurred...in real life I'd have my JavaScript function to change the display of all the icons I want to display.
When I run this, the serverside code runs and yet nothing happens in the server.
I have also tried:
ScriptManager.RegisterClientScriptBlock()
Page.RegisterStartupScript()
Page.RegisterClientScriptBlock()
Page.ClientScript.RegisterStartupScript()
Page.ClientScript.RegisterClientScriptBlock()
but none of them work....
FireFox shows the following JavaScript error:
Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "http://localhost/MyWebSiteName/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a3de828f0-5e0d-4c7d-a36b-56a9773c0def%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2009.3.1314.20%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3aec1048f9-7413-49ac-913a-b3b534cde186%3a16e4e7cd%3aed16cbdc%3a874f8ea2%3af7645509%3a24ee1bba%3a19620875%3a39040b5c%3af85f9819 Line: 1075"]
Does anyone know if what I am trying to do is even allowed?
If not - what's my alternative?
Thank you
Since your script doesn't have enclosing <script> tags, you need to use this form of RegisterStartupScript:
ScriptManager.RegisterStartupScript(this, this.GetType(), "uniqueKey", jscript, true);
You said your initial goal was:
The idea was that the page would load, data would be sent (AJAX) to the server. The server would then generate some JavaScript based upon this data and send that back to the page. That JavaScript would then run updating the page in a specific way.
Here's a way you can do that:
given:
<asp:ScriptManager runat="server" ID="scriptManager">
</asp:ScriptManager>
<script type="text/javascript">
function endRequestHandler(sender, args) {
var dataItems = args.get_dataItems();
for(var key in dataItems){
if(/^javascript:/.test(dataItems[key])){
eval(dataItems[key].substring("javascript:".length));
}
}
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
</script>
<asp:UpdatePanel runat="server" ID="pnl">
<ContentTemplate>
<asp:Button runat="server" ID="btnClick" Text="Click me!" OnClick="btnClick_Click" />
</ContentTemplate>
</asp:UpdatePanel>
You can create a click handler that does this:
protected void btnClick_Click(object sender, EventArgs e)
{
ScriptManager.GetCurrent(Page).RegisterDataItem(this, "javascript:alert('hello world!');");
}
What's happening is during the postback, the page request manager is sent a data item your code-behind. That data-item happens to be a javascript command. After the postback, the client side script manager's endRequest handler is checking for data items. Normally you'd want to see who those items are for, which is apparent by the key of the item (it's the client ID of the control that is the target of the data being sent). In your case, you could load this up with the javascript that you want to fire, tell yourself that it's a javascript because it's prepended, then dynamically evaluate the script.
So in this example, clicking the "Click Me!" button will generate a Hello World prompt whose script was actually created by the code-behind during the postback.
You'll have to be very cautious with this approach until you're comfy - I'd avoid references to "this"...
Happy coding.
B
Okay
The idea was that the page would load, data would be sent (AJAX) to the server. The server would then generate some JavaScript based upon this data and send that back to the page. That JavaScript would then run updating the page in a specific way.
Couldn't get that to work....
I got around this in the following way:
When the page loads, data is sent (AJAX) to the server. This processes the data and serialises the results updating a hidden text element, which goes back to the browser. Meanwhile, I have a JavaScript timer on the page that runs a JavaScript function that was generated when the page first loads. This function looks at the hidden text element. If that element has text (the result of the postback) then it shuts down the timer, deserialises the data and then works out how to update the page.

Difference between Response.Write() and ClientScript.RegisterStartupScript()?

What is the difference between Response.Write() and ClientScript.RegisterStartupScript()
Thank you.
The Response.Write method can be used to output code during the rendering phase of the page. The <%= %> server tag is a shortcut for <%Response.Write( )%>.
If you use Response.Write from the code behind, you will write to the page before it has started rendering, so the code will end up outside the html document. Eventhough the browser will execute the code, it doesn't work properly. Having something before the doctype tag will make the browser ignore the doctype and render the page in quirks mode, which usually breaks the layout. Also, as the script runs before anything of the page exists, the code can't access any elements in the page.
The ClientScript.RegisterStartupScript method is the preferred way of adding script dynamically to the page. It will render the script at the end of the form so that it doesn't break the html documnet, and it can access the elements in the form.
Also, you give each script an identity, which means that duplicates are removed. If a user control registers a script, and you use several instances of the user control, the script will only be rendered once in the page.
There is a huge difference.
Basically Response.Write will write to your response stream right now, normally this will put whatever you write at the very top of your page output, even before the tag (unless you call it after the page render event).
When you use RegisterStartupScript it will wait and write your JavaScript to the response stream after the page's controls have rendered (IE, the controls wrote their HTML to the response stream). This means the JavaScript you register will be executed by the browser after the other HTML before it has been loaded into the DOM. This is very similar to the event. Another thing this does is if “registers” the script so if you have more than one control on the page that both need that JavaScript they can check to see if it’s already been registered so it’s only rendered once and both controls use it client side.
Hopefully that makes sense, there are more details then that but I tried to keep it simple.
Response.Write
The Write method writes a specified
string to the current HTTP output.
ClientScriptManager.RegisterStartupScript
Registers the startup script with the
Page object.
As I think, both these methods are unrelated. Response.Write() can be used to write something on page that is rendered. While ClientScript.RegisterStartupScript() can be used for registering a javascript on page start up.

c# Ajax Lazy Loading

I need to populate 4 GridViews on an aspx page, but I only bind a datatable to one of them on page load. I need to pupulate the other 3 after page load.
does anyone know the best way to do this using ajax ?
Currently I'm using javascript to __doPostBack on a button that pupulates the 3 GridViews but unfortunately this forces a full page load even when using an update panel. I need the page to load, and then populate the GridViews as the datatables are returned.
any suggestions would be much apreciated.
The way you are doing it should work ok, although using jquery to populate a div via the $("#targetDiv").load("contentUrl"); function may be a cleaner way to do it. Anyway, in order to get your current implementation working, there could be a few things you want to look at:
I assume EnablePartialRendering is true on your ScriptManager (always worth checking!).
Make sure the eventTarget for the __dopostback call is set up as an async trigger for your update panels or that it is inside the UpdatePanel if you are only using one UpdatePanel. (See here for details)
Try returning false from the javascript code that executes in the onclick event handler if you have attached this to a button, to make sure the form is not being submitted normally by your browser when you click the button.
If I understand the question properly, you want the data to load after the page is in the browser. If this is the case, then you can fire an event with JavaScript when the page loads on the client.
One method I've used is to put a hidden (with CSS, not any property) button on the page and 'clicking' it with javascript. The event of the button click event will need to be wired in the page's code. Also the button would have to be in an update panel that either contains the grids you want to be bound or has the appropriate triggers to cause them to reload.
You might look at JQuery to get manage when this code gets fired. The $(document).ready(function(){ /* Your code here... */ }); method will fire after the entire DOM is available, which is faster than waiting on the entire page to load (images and so forth).

Categories

Resources