4

In ASP.NET upon making a button click I need one JavaScript to make its action. I tried OnClientClick function but the problem with this event is first OnClientClick function takes place and then OnServerClick function takes place i.e. first JavaScript function runs and then C# code executes but I need in reverse order first I need to execute C# code and then I have to run the JavaScript. I am using AJAX.NET and ScriptManager in my code. Do scriptmanager helps me anyway? else how to run JavaScript on server side.

I need in the below manner.

Button1_Click(object sender, EventArgs e)
{
 ListBox1.Items.Add(TextBox1.Text); //for example
 ` here I have to run JavaScript `
}

Is there any way to implement this?

Edit 1:

I need a div to be scrolled down onbuttonclick(on click adds new data to div using databinder and repeater). As said above clientclick is running first but I need to run it after server action.

javascript is..

<script>
 var objDiv = document.getElementById("div1");
 objDiv.scrollTop = objDiv.scrollHeight;
</script> 

and

<div id="div1"> //css properties height 200 and width 200 overflow:auto
 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
 <asp:Timer ID="Timer1" runat="server" Interval="200" />
 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Repeater id="Repeater1" runat="server" >
 <ItemTemplate>
 <%# DataBinder.Eval(Container.DataItem, "Message") %> <br />
 </ItemTemplate>
 </asp:Repeater>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> 
 </Triggers>
 </asp:UpdatePanel>
 </div>
 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <div id="div2">
 <asp:TextBox ID="tb_message" runat="server" Width="250px" EnableViewState="false" />
 <br />
 <asp:Button ID="btn_send" runat="server" Width="250px" Text="Send" 
 onclick="btn_send_Click" />
 </div>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="btn_send" EventName="click" />
 </Triggers>
 </asp:UpdatePanel>
asked Dec 1, 2011 at 12:57
2
  • Is the postback an AJAX postback or standard postback? Commented Dec 1, 2011 at 13:01
  • 2
    please provide some code if possible, so we can see which approach could be applicable in your case Commented Dec 1, 2011 at 13:02

4 Answers 4

1

EDIT

Based on the code provided this should work if you would like to register the script on the server side:

Button1_Click(object sender, EventArgs e)
{
 ListBox1.Items.Add(TextBox1.Text); //for example
 ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "scriptKey", "var objDiv = document.getElementById('div1'); objDiv.scrollTop = objDiv.scrollHeight;", true);
}

You can use the code provided by James as well if you would like to register the script on the client side, but keep in mind that the script will be executed each time the AJAX request will be completed (The script will be executed each time any of the update panels is refreshed). If you are going to scroll down the div1 element each time the UpdatePanel1 is refreshed and there are no more update panels that are refreshed using the Timer control on the same page the code provided by James would be more useful, while my code will scroll down the div1 only of the button send is pressed.

UPDATED

i'm sorry - it seems that the code is executed after the server click event handler is executed, but before the html inside the first update panel is reloaded (you can simply set a breakpoint inside the server click event handler, and an alert in the registered script). So at the point when the script is executed the div element still contains old html.

As a hack you can use a setTimeout function with a small timeout (in my sample 100 ms is quite enough). I'm looking for a proper way to check if the html inside update panel is reloaded and will update my answer as fast as I find it.

answered Dec 1, 2011 at 13:06
Sign up to request clarification or add additional context in comments.

6 Comments

I tried your code but still it didn't work for me. Anymore corrections?
@KarsM is the code executed? I've created demo project with the code you've provided and it works fine. here is the url so you can have a look at the code dl.dropbox.com/u/26396738/UpdatePanelClientScript.7z
I tried the same with ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "scriptKey", @"<script>document.write('hello'); </script>;", true); didn't work :(
@KarsM you have to remove the <script> tag from the string like in the following sample ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "scriptKey", @"document.write('hello');", true);. If the last parameter is set to true the script is wrapped automatically. As well you can just use ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "scriptKey", @"<script>document.write('hello'); </script>;", false);
but this too providing me the same as the OnClientClick function does.
|
1

JavaScript is a client-side language and therefore cannot run on the server.

EDIT

Based on your updated question, something like this should work well:

JavaScript

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
function endRequestHandler(sender, args)
{
 var objDiv = document.getElementById("div1");
 objDiv.scrollTop = objDiv.scrollHeight;
}
answered Dec 1, 2011 at 13:01

9 Comments

Technically there's node and rhino that can run server side, no? (Not that I want to suggest KarsM's solution is any of those though.)
@Jeroen, technically, I guess. I think that's like comparing apples and oranges though. Look at what rhino says on it's homepage Rhino is an open-source implementation of JavaScript written entirely in Java. Maybe it's over my head, but that doesn't seem like JS to me.
I found some this like this btn.attributes.add("onClick",javaScriptFunctionCal lHere); but don't know whether this will work or not.
@KarsM, there are several ways to approach this. See comments in your question - we need a bit more information to ensure that we steer you in the right direction.
@JamesHill Apples (clientside) and Oranges (server side), perhaps. But they're both Fruit (JavScript) nonetheless ;).
|
1

Javascript will not run on the server, however you can inject Javascript into the HTTP response stream using Response.Write("<script>..</script>) at a place of your choosing in the server code.

Response.Write("<script>..</script>) will write the script to the page before it has started rendering which can cause side effects see Difference between Response.Write() and ClientScript.RegisterStartupScript()?

So as @dannyloid posted have a look at ClientScript.RegisterStartupScript

answered Dec 1, 2011 at 13:04

1 Comment

did you check to see if the script had rendered in the client page?
0

1 Comment

-1, suggesting something as different and complex as node.js without understanding the users requirements is silly. Most of the time when someone says they need to run JS on the server it's because they don't understand exactly what JS and how to use it properly.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.