CODEWITHSUNDEEP
c#jqueryasp.netajaxevent-handling
Syspect
Syspect

Reputation: 921

How to make client side click event handler to request a server side method

In details: I load HTML code onto the page and upon click of an <a> link, I want this click event to be captured and handled by the code-behind.

Here is what I've got as client-side code:

$('a').click(function (e) {
        event.preventDefault();
        var data = { userName: $(this).attr("id") };
        var dataVal = JSON.stringify(data);

        $.ajax({
            type: "POST",
            url: "Default.aspx/loadNewPage",
            contentType: "application/json; charset=utf-8",
            data: dataVal,
            dataType: "json",
            success: function (id) {
            }
        });
    });

HTML:

<a href="#" id="kontakt">Go to Kontakt</a>

The problem is that the code-behind function is not called, but just the # is added to the url...

I'd much appreciate corrections on my code with code examples and maybe explanation on them.

UPDATE: tried with ASP page webmethods. Code-behind:

[WebMethod]
public string loadNewPage(string id)
{
    ltlContentCenter.Text = getPageCenter("kontakt");
    ltlContentSide.Text = getPageSide("kontakt");
    return "hello";
}

JS code:

function loadMe() {
        PageMethods.loadNewPage("kontakt", CallSuccess, CallError);
    }
    function CallSuccess(res) {
        alert(res);
    }
    function CallError() {
        alert('Error');
    }

the HTML:

    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="scpt" runat="server" EnablePageMethods="true" />
        <div id="parent">
        <div id="mainmenu">
            <asp:LinkButton ID="LinkButton1" Text="FORSIDEN" CommandArgument="forsiden" OnCommand="loadPage_Command"
                runat="server" />
            <br />
            <asp:LinkButton ID="LinkButton2" Text="PRODUKTER" CommandArgument="produkter" OnCommand="loadPage_Command"
                runat="server" />
            <br />
            <asp:LinkButton ID="linkPages" Text="SUPPORT" CommandArgument="media" OnCommand="loadPage_Command"
                runat="server" />
            <br />
            <asp:LinkButton ID="LinkButton3" Text="KONTAKT" CommandArgument="kontakt" OnCommand="loadPage_Command"
                runat="server" />
            <br />
            <asp:LinkButton ID="LinkButton4" Text="OM ABiX" CommandArgument="omabix" OnCommand="loadPage_Command"
                runat="server" />
            <br />
        </div>
        <div id="logo">
        </div>


        <asp:Literal ID="ltlContentCenter" runat="server" />
        <asp:Literal ID="ltlContentSide" runat="server" />
        <a href="#" onclick="loadMe()">Click Me, please.</a>
        </div>
    </form>
</body>

The browser console gives me error "PageMethods is not defined".

Upvotes: 0

Views: 1283

Answers (2)

iJade
iJade

Reputation: 23801

Ok..not a jquery way but more of c# way to access server side using client script..Try using page methods

First add a script manager on your aspx page

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scpt" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
</form>
</body>

Then go to your aspx.cs page and declare a function something like

[System.Web.Services.WebMethod]
public static string ValidateUser(string emailId, string password)
{
    //Your logic code
    return "hello from server side";
}

Then from your javascript call the c# method like

PageMethods.ValidateUser(email, password, CallSuccess_Login, CallFailed_Login);

And also in ur javascript create 2 call back functions CallSuccess_Login and CallFailed_Login

Hope it helps

Upvotes: 2

Bibhu
Bibhu

Reputation: 4081

Use can do like this :

$('a').click(function () {

        var data = { userName: $(this).attr("id") };
        var dataVal = JSON.stringify(data);

        $.ajax({
            type: "POST",
            url: "Default.aspx/loadNewPage",
            contentType: "application/json; charset=utf-8",
            data: dataVal,
            dataType: "json",
            success: function (id) {
                alert("loaded");
            }
        });
    });

[WebMethod]
public static void loadNewPage(int id)
{
  // do the loading of the new HTML, etc.  
}

You can know more about Jquery AJAX call over here.

Upvotes: 1

Related Questions