Executing Server-side Code from JavaScript
In the Asp.net forums, I often see the question asked, “Can I call server-side code from the client/JavaScript?” Almost invariably, the responses given are “No, the client cannot access the server,” or “You can only use WebMethods or PageMethods.” The first response is not entirely correct, and unfortunately, WebMethods and PageMethods are static methods and therefore have no way to directly access the page.
This is why I present to you the following “hack”. I call it a hack because there really should be some way built into the ASP.NET AJAX Extensions that allow this approach directly. Instead, it relies on using controls in a manner that they aren’t necessarily intended in order to obtain the desired result. But this “hack” does have a redeeming quality—it’s incredibly easy.
The Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>My Page</title>
<script type="text/javascript">
function myClientButton_onclick() {
document.getElementById('myServerButton').click();
}
</script>
<script runat="server">
Protected Sub myServerButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles myServerButton.Click
Response.Redirect("http://www.asp.net/")
End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="myClientButton" type="button" value="Press Me" onclick="return myClientButton_onclick()" />
<asp:Button ID="myServerButton" runat="server" style="display:none;" />
</form>
</body>
</html>
Explanation:
What I am doing here is adding a server-side button control (<asp:Button runat=”server” …>). I then make the button invisible by adding style=”display:none;”. In the button’s server-side Click event, I do whatever it is I want to do on the server.
In this example, I am clicking a standard client-side button (<input type=”button” …>) to fire off a server-side redirect, but this could just as easily be called by selecting an item in a DropDownList, typing text into a textbox, etc. Clicking the client button calls the JavaScript .click() event of the server-side button control.
The Next Step:
“What if I need to pass arguments from the client-side script to the server-side script?” Well, this is easily done by putting server-side HiddenField controls on the page. Use the JavaScript to set their values (document.getElementById(‘myHiddenField’).value = “Hello World”;) and then use C# or VB.NET to retrieve them on the server (Dim myVar as String = myHiddenField.Value).
In my next article, I will apply this concept to create a rather easy approach to the Ajax Multi-Stage Download Pattern. Check back soon!
Tested on: Internet Explorer 7, Netscape Browser 8, Firefox 2, Safari 3, Opera 9.
10 Comments »
Leave a Reply
-
Recent
- Highlighting a GridView Row When Clicking a CheckBox
- Determining a Browser’s Dimensions with Javascript
- Executing Server-side Code from JavaScript
- Wrapping ASP.NET AJAX TabContainer Tabs
- Handling Multiple Asynchronous Postbacks
- Disabling a Trigger Control During Asynchronous PostBack
- Maintain Scroll Position after Asynchronous Postback
- Selecting an AJAX AccordionPane by ID
- Easy SQL “If Record Exists, Update It. If Not, Insert It.”
- View Source Trick for Pages with Partial Rendering
- Controlling the ASP.NET Timer Control with JavaScript
- A Client-side Ajax Login for ASP.NET
-
Links
-
Archives
- January 2008 (3)
- December 2007 (4)
- November 2007 (6)
-
Categories
-
RSS
Entries RSS
Comments RSS
Thanx a lot
A tidy little hack… works like a dream!
this is very simple . thank you very much
Hi, i from Kuala Lumpur, Malaysia.
Thanks a lot cause this articles was helped me in my current project.
Thank you. You rule.
It’s Beautiful. Awsome.
Simply very smart. I loved the work around.
Wonderfull.
thanks a lot…it really worked.
thanks a lot. i was searching the technique.it does a lot