JQuery Ajax function call issue

Question

I just started learning how to use jquery ajax in normal web forms in asp.net. However i am stuck. I do not know what exactly is the issue. When i click the button on the form, it does not work the first time however sometimes it works only when clicked the second time. and then stops working(Does not display the alert message in the success function ).It does not work even if i rebuild the project. No error is displayed in the console as well. Please help me.

Below is my code The employee class

public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Country { get; set; }
        public int Salary { get; set; }
        public int DeptId { get; set; }
    }

The department class

public class Department
    {
        public int DeptId { get; set; }
        public string Name { get; set; }
    }

The test.aspx code

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">
    $(document).ready(function () {
        $('#Button1').click(function() {
            var Name = $("#txtName").val();
            var Gender = $("#ddlGender").val();
            var Country = $("#txtCountry").val();
            var Salary = $("#txtSalary").val();
            var DeptId = $("#ddlDept").val();
            var employee = {
                "Name": Name,
                "Gender": Gender,
                "Country": Country,
                "Salary": Salary,
                "DeptId": DeptId
            }
            $.ajax({
                context: this,
                type: "POST",
                url: "test.aspx/GetResultFromDB",
                data: JSON.stringify({ employee: employee }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache:false,
                success: OnSuccess,
                failure: function (response) {
                    alert("In Error");
                    alert(response.d);
                }
            });
        });
        function OnSuccess(response) {
            alert("In succcess");
            alert(response.d);
            console.log(response.d);
        }
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div>
                <table>
            <tr>
                <td>Name</td>
                <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Country</td>
                <td><asp:TextBox ID="txtCountry" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Gender</td>
                <td><asp:DropDownList ID="ddlGender" runat="server">
                    <asp:ListItem Text="Select" Value="0"></asp:ListItem>
                    <asp:ListItem Text="Male" Value="Male"></asp:ListItem>
                    <asp:ListItem Text="Female" Value="Female"></asp:ListItem>
                    </asp:DropDownList></td>
            </tr>
            <tr>
                <td>Salary</td>
                <td>
                    <asp:TextBox ID="txtSalary" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Department</td>
                <td><asp:DropDownList ID="ddlDept" runat="server"></asp:DropDownList></td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button ID="Button1" runat="server" Text="Button"/>
                </td>
            </tr>
        </table>
            </div>
        </div>
    </form>
</body>
</html>

The code in the code behind file

 [System.Web.Services.WebMethod]
    public static string GetResultFromDB(Employee employee)
    {
        SqlConnection con = EmpDeptDataLayer.GetDBConnection();
        SqlCommand cmd = new SqlCommand("spAddEmployee", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.Add(new SqlParameter("@Name", employee.Name));
        cmd.Parameters.Add(new SqlParameter("@Country", employee.Country));
        cmd.Parameters.Add(new SqlParameter("@Gender", employee.Gender));
        cmd.Parameters.Add(new SqlParameter("@Salary", employee.Salary));
        cmd.Parameters.Add(new SqlParameter("@DeptId", employee.DeptId));
        cmd.Parameters.Add(new SqlParameter("@Result", SqlDbType.VarChar, 50)).Direction = ParameterDirection.Output;
        con.Open();
        int count = cmd.ExecuteNonQuery();
        con.Close();
        string Result = "";
        if (count > 0)
        {
             Result = cmd.Parameters["@Result"].Value.ToString();
        }
        else
        {
            Result = "Error!! Something went wrong";
        }
        return Result.ToString();
    }

Please let me know where i am going wrong. Any help will be really appreciated.

Answer 1

The code is fine and it is working for me.

In your App_Start folder, within your RouteConfig....

Comment out the following line or change it's RedirectMode:

//settings.AutoRedirectMode = RedirectMode.Permanent;

JQuery Ajax function call issue

Question

1 answers

solution1
0 2016-11-17 14:17:05

JQuery Ajax function call issue

Question

1 answers

solution1 0 2016-11-17 14:17:05

solution1
0 2016-11-17 14:17:05