If you don't want to do it on page load but you want it to be driven by code behind (C#) you'll need to use AJAX.
Using JQuery this is easily accomplished by doing something like the following (this is my generic 'perform this action on this controller' in ASP.NET MVC):
<script type="text/javascript">
function execute(controller, action) {
$.ajax({
type: 'get',
url: ('/' + controller + '/' + action),
dataType: 'text'
}).done(function (data, textStatus, jqXHR) {
$('#response').html(data).slideDown();
}).fail(function (jqXHR, textStatus, errorThrown) {
$('#response').html(jqXHR.responseText).slideDown();
});
}
</script>
You can expand this out to pass whatever data you need to whatever URL you need such as:
<script type="text/javascript">
function execute(controller, action, username, password) {
$.ajax({
type: 'get',
url: ('/' + controller + '/' + action),
dataType: 'text',
data: ('username='+username+'&password='+password)
}).done(function (data, textStatus, jqXHR) {
$('#response').html(data).slideDown();
}).fail(function (jqXHR, textStatus, errorThrown) {
$('#response').html(jqXHR.responseText).slideDown();
});
}
</script>
On the server side you just return the string of what you want the response to say, such as "Success! You've been logged in!" and then the element id'ed "response" will have its inner HTML swapped out with that response, and then will be slid open:
<div id="response" style="display:none"></div>
Be aware that the .fail() event will push out the entire error page you would throw if you don't just return a string on a thrown exception. .fail() will trigger if the HTTP status code from the server is not 200 (OK).
If you're using ASP.NET MVC your C# code can look like this:
namespace MySite.Controllers
{
public class SomeController : Controller
{
public string Login(string username, string password){
// Process login
return "You've been logged in!";
}
}
}
If you're using Webforms:
//On Page_Load() call a function if it's an AJAX Login
// such as
if(Request["ajax"] == "login"){
AjaxLogin(Request["username"], Request["password"]);
}
private void AjaxLogin(string username, string password){
// Process login
Response.Write("Ajax login complete!");
Response.End(); // Don't send anything else and stop processing request.
}
Then to call it simply pass the variables to your function:
<a onclick="execute('MyController', 'Login', 'UserName', 'MyPass')">Login!</a>
Obviously this assume you have the data you need to process a login request before they enter it, which would be a little self defeating so you can extend out a specific function using JQuery to grab form element content such as:
<input type="text" name="username" id="username" />
<input type="text" name="password" id="password" />
Then in your function add:
<script type="text/javascript">
function login(controller, action) {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
$.ajax({
type: 'get',
url: ('/' + controller + '/' + action),
dataType: 'text',
data: ('username='+username+'&password='+password)
}).done(function (data, textStatus, jqXHR) {
$('#response').html(data).slideDown();
}).fail(function (jqXHR, textStatus, errorThrown) {
$('#response').html(jqXHR.responseText).slideDown();
});
}
</script>