using external js to call aspx.cs function (on button click)

Question

I am trying to call an aspx.cs function using an external javascript when a button is clicked on.

Here is the aspx

<head runat="server">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<%= ResolveUrl ("~/Scripts/lookup.js") %>"></script>
</head>
<body>

        <section class="webdesigntuts-workshop">
            <asp:ScriptManager ID='ScriptManager1' runat='server' EnablePageMethods='true' />
    <form id="form1" runat="server">            
        <asp:TextBox type="search" name="search" id="sform" placeholder="What are you looking for?" runat="server" />       
         <asp:TextBox type="search" name="hdnText" id="hdnText" runat="server" />

        <button id="Button1"  runat="server" onclientclick="lookup();return false;">Search</button>
    </form>
</section>

</body>

Here is my javascript lookup.js which is placed in the Scripts folder.

function Signup() {
    var query = document.getElementById('<%=sform.ClientID %>').value;


    PageMethods.lookupfromjs_Click(query);

    function onSucess(result) {
        alert(result);
    }

    function onError(result) {
        alert('Cannot process your request at the moment, please try later.');
    }
}

here is the aspx.cs function.

protected void lookupfromjs_Click(String query)
        {

            if (!String.IsNullOrEmpty(query))
            {
                hdnText.Text = "query= " + query + " look up number " + lookup_no++;

                // sform.Text= "You are looking up the term " + query;

            }
        }

There are no errors as such in VS or in browser. But my breakpoints in browser dont seem to kick in. The java script is loaded correctly by the browser. However on button click nothing seems to happen.

Any help would be appreciated.

What is this? 'protected void lookupfromjs_Click(String query) — Farzin Kanzi
– Farzin Kanzi, Commented Jan 23, 2017 at 23:53
AFAIK the method in aspx.cs needs to be static and also marked with [System.Web.Services.WebMethod]. Did you already try this? — Kolichikov
– Kolichikov, Commented Jan 24, 2017 at 0:01

user1429080 · Accepted Answer · 2017-01-24 12:23:51Z

If you are working with .aspx files, you are using the webforms framework. If you use webforms, then the normal thing to do here would be to have an <asp:Button runat="server" ...></asp:Button> with an event handler in the code behind page. If you want to avoid postbacks then you are using the wrong framework.

That said, there are of course cases where a post back is unnecessarily heavy, and you just want to run a tiny code snippet on the server. Page methods can then be used.

In order for a method in the code behind to be usable as a page method, the method must:

Be decorated with the [WebMethod] attribute - System.Web.Services.WebMethod
Be declared public static

Note that a page method is not able to work with controls on the page. A page method is called using an ajax request. There is not full page generation going on. Any updates to the page that is using the page method must be done using javascript after the method returns.

There are at least a few different apparent errors in your code:

You call lookup(); return false; yet the javascript method is called Signup
You have this: <%=sform.ClientID %> in your lookup.js file. But that file is brought in using a <script ... ></script> tag, which is a separate request by the browser, handled by a static handler. So the <%=sform.ClientID %> will not be resolved.
Your so called web method is not correctly defined, and it tries to work with controls in the page as if it was a post back event handler.
Etc

Working sample (works for me):

Web form:

<head runat="server">
    <title></title>
    <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/lookup.js") %>"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"
            EnablePageMethods="true">
        </asp:ScriptManager>
        <asp:TextBox type="search" name="search" ID="sform" placeholder="What are you looking for?" runat="server" />
        <asp:TextBox type="search" name="hdnText" ID="hdnText" runat="server" />
        <button id="Button1" onclick="Signup('<%= sform.ClientID %>', '<%= hdnText.ClientID %>');">Search</button>
    </form>
</body>

JavaScript:

function Signup(sformId, hdnId) {
    var query = document.getElementById(sformId).value;
    var res = PageMethods.lookupfromjs_Click(query, onSucess, onError);
    function onSucess(result) {
        document.getElementById(hdnId).value = result;
        alert(result);

    }
    function onError(result) {
        alert('Cannot process your request at the moment, please try later.');
    }
}

Page method:

[System.Web.Services.WebMethod]
public static string lookupfromjs_Click(String query)
{
    return "query was " + HttpUtility.UrlEncode(query);
}

Collectives™ on Stack Overflow

using external js to call aspx.cs function (on button click)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related