call C# function from HTML link

Question

I'm currently developing an ASP.NET C# website. On this website will be a GridView with some data in it, and you should be able to export this data (excel, whatever).

For the export i will use the code on this website.

When someone clicks the export link a popup will fire up like this:

The popup is made with avgrund and the "buttons" are HTML links.

$(function () {
        $('#exportlaces').avgrund({
            height: 80,
            width: 380,
            holderClass: 'container',
            showClose: true,
            showCloseText: 'x',
            closeByEscape: true,
            onBlurContainer: '#main-wrapper',
            template: '<div id="exportpopuptop"></div>' +
            '<div id="exportpopup">' +
            '<ul>' +
            '<li><a href="#">Excel</a></li>' +
            '<li><a href="#">HTML</a></li>' +
            '</ul>' +
            '</div>'
     });
});

I need now to fire up some C# code with the HTML links for the export. But how?

I tried something like this:

<a runat="server" OnServerClick="myFunction_Click">Excel</a>

But this doesn't work since I'm outside of the form tag. And only one form tag is allowed with runat="server".

I also tried to add ASP.NET buttons to the popup, but this didn't work either.

Is there a way to fire up a javascript function which will fire up C# ?

Thanks for your help.

EDIT

The code looks now like this

$(function () {
    $('#exportlaces').avgrund({
        height: 80,
        width: 380,
        holderClass: 'container',
        showClose: true,
        showCloseText: 'x',
        closeByEscape: true,
        onBlurContainer: '#main-wrapper',
        template: '<div id="exportpopuptop"></div>' +
        '<div id="exportpopup">' +
        '<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"> Excel</asp:LinkButton>' +
        '</div>'
    }).appendTo("#form1");
});

And the C# code behind like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace LACE
{
  public partial class Default : System.Web.UI.Page
  {

    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        // Your server side code goes here...
    }

  }
}

And I get the following error message:

Compiler Error Message: CS1061: 'ASP.default_aspx' does not contain a definition for 'LinkButton1_Click' and no extension method 'LinkButton1_Click' accepting a first argument of type 'ASP.default_aspx' could be found (are you missing a using directive or an assembly reference?)

Answer 1

You said the whole div is being put outside the form tag, so to get it inside the tag use -

http://api.jquery.com/appendTo/

$(function () {
        $('#exportlaces').avgrund({
            height: 80,
            width: 380,
            holderClass: 'container',
            showClose: true,
            showCloseText: 'x',
            closeByEscape: true,
            onBlurContainer: '#main-wrapper',
            template: '<div id="exportpopuptop"></div>' +
            '<div id="exportpopup">' +
            '<ul>' +
            '<li><a href="#">Excel</a></li>' +
            '<li><a href="#">HTML</a></li>' +
            '</ul>' +
            '</div>'
     }).appendTo("#form1"); // any jquery selector for the form will work
});

Also change your server side control to something like this...

<asp:LinkButton ID="" runat="server" OnClick=""></asp:LinkButton>

Remember to specify the ID. You can style it the way you want using CSS class. That would be the simple way out, otherwise if you want to call a C# function from JavaScript, you'll have to use jQuery AJAX

This is a basic tutorial I wrote for something making a jQuery ajax call, you can modify it to suit your needs.

Let me know if you have any further doubts.

EDIT #1 -

You added this -

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"> Excel</asp:LinkButton>

Now create the following function in the code behind file...

    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        // Your server side code goes here...
    }

EDIT #2- With reference to your updated question, It won't work because the server control has to be present on the when the controls of the page are being initialized.

I have an idea though that might work,

Set this as your jQuery function -

$(function () {
    $('#exportlaces').avgrund({
        height: 80,
        width: 380,
        holderClass: 'container',
        showClose: true,
        showCloseText: 'x',
        closeByEscape: true,
        onBlurContainer: '#main-wrapper',
        template: '<div id="exportpopuptop"></div>' +
        '<div id="exportpopup">' +        
        '</div>'
    }).appendTo("#form1");

    // Store a reference to the link and then remove the button from the page first.
    var lnkBtn = $("#<%=LinkButton1.ClientID%>");
    $(lnkBtn).remove();
    // Now add it to the 'exportpopup' div
    $("#exportpopup").append(lnkBtn);

});

Now in your aspx page define the control -

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"> Excel</asp:LinkButton>

Answer 2

I will suggest you to call a javascript function on the html button click and in that javascript function , you can call the server side function using ASP.Net AJAX ScriptManager.

The first thing you need to do is add a ASP.Net AJAX ScriptManager to the page and set itsEnablePageMethods property to true as shown below:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

Now you can call the page method (C#) methods as below from your javascript function :

PageMethods.GetCurrentTime(document.getElementById("<%=txtUserName.ClientID%>").value,   
  OnSuccess);

where the server side method is as follows:

[System.Web.Services.WebMethod]
public static string GetCurrentTime(string name)
{
return "Hello " + name + Environment.NewLine + "The current time is: "
    + DateTime.Now.ToString();
}

You can call this javascript function from your html control.

For detail and implementation you can refer to this link.

Answer 3

//have a look at the following working example, i just used button instead of Link, you can use link also just define onclick for it.

// Code behind method declared static

[WebMethod]
public static string GetSquare(String value)
{
  return value;
}

your button whose click this has to be done

<input type="button" id="button" value="Chnageurl" onclick="ajaxcall()" />

script for this

<script type="text/jscript">

function ajaxcall(e) {

        $.ajax({
        type: "POST",
        url: "Default.aspx/GetSquare",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ value: "somevalue" }),
        dataType: "json",
        success: function (value) {
        alert(value.d);
    },
   error: function () { alert("Ajax Error"); }
 });
};