Function not defined error while using asp.net ajax

i am trying to call a web service through asp.net ajax by the following code

namespace MCTS70515AJAX
{
public static class HR
{
    public static int GetEmployeeCount(string department)
    {
        int count = 0;
        switch (department)
        {
            case "Sales":
                count = 10;
                break;
            case "Engineering":
                count = 28;
                break;
            case "Marketing":
                count = 44;
                break;
            case "HR":
                count = 7;
                break;
            default:
                break;
        }
        return count;
    }
}

this is the aspx page i am rendering
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AJAX2.aspx.cs" 

Inherits="MCTS70515AJAX.AJAX2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <title></title>

</head>
<body>

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="HRSer.asmx" />
            </Services>
            <Scripts>

            </Scripts>
        </asp:ScriptManager>


        <div>
            <select id="Departments" size="5">
                <option value="Engineering">Engineering</option>
                <option value="HR">Human Resources</option>
                <option value="Sales">Sales</option>
                <option value="Marketing">Marketing</option>

            </select>

        </div>
        <br />
        <div>
            <span id="employeeResults"></span>
            <span id="loading" style="display: none;">&nbsp;&nbsp;Loading ... 

            </span>

        </div>

    </form>
     <script type="text/javascript">

    var departments = null;
    Sys.Application.add_load(page_load);
    Sys.Application.add_unload(page_unload);
    function page_load(sender, e) {
        departments = $get("Departments");
        $addHandler(departments, "change", departments_onchange);
    }
    function page_unload(sender, e) {
        $removeHandler(departments, "change", departments_onchange);
    }
    function departments_onchange(sender, e) {
        $get("employeeResults").innerHTML = ""; $get("loading").style.display = "block";
        var selectedValue = departments.value;
        HRService.Getcount(selectedValue, onSuccess);
    }
    function onSuccess(result) {
        $get("loading").style.display = "none";
        $get("employeeResults").innerHTML = "Employee count: " + result;
    }


                </script>

</body>
</html>

this is the web service i am calling
namespace MCTS70515AJAX
{

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class HRService : System.Web.Services.WebService
{
    [ScriptMethod]
    [WebMethod]
    public int Getcount(string department)
    {
        return HR.GetEmployeeCount(department);
    }
}

}
the page renders fine but whenever i change the list item value, it shows JavaScript runtime error: ‘HRService’ is undefined. why is this.

Sorry for such a long post ….

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can can try PageMethods, just add the using and the [WebMethod]

using System.Web.Services;

public static class HR
    {
        [WebMethod]
        public static int GetEmployeeCount(string department)
        {
            int count = 0;
            ...
            return count;
        }
    }

In your aspx modify your scriptManager like this
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

then you can call the method in the JS this way
function myJS_method() {
    var departments = $get("Departments"); // your string value
    PageMethods.GetEmployeeCount(departments , onSucess, onError);
    function onSucess(result) {
        // your code when it is OK
        // result is the return value of your C# method
    }
    function onError(result) { alert('Error' + result); }
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x