Home > database >  call asp.net web forms code behind using ajax
call asp.net web forms code behind using ajax

Time:11-08

I am working on this example scenario using ASP.NET web forms technology and jquery ajax: on change event on input text element, there is ajax request must send to function in code behind in asp.net page (Login.aspx/GetDoublicate) to check if email is exist in database or not and return true or false. my code:

        <form id="form1" runat="server">
<div>

    <table style="width:100%;" dir="rtl">
        <tr>
            <td class="auto-style1">user name</td>
            <td class="auto-style1">
                <input id="Text1" type="text" /></td>
            <td class="auto-style1"></td>
        </tr>
        <tr>
            <td class="auto-style1">password</td>
            <td class="auto-style1">
                <input id="Password1" type="password" /></td>
            <td class="auto-style1"></td>
        </tr>
        <tr>
            <td class="auto-style1">
                confirm password</td>
            <td class="auto-style1">
                <input id="Password2" type="password" /></td>
            <td class="auto-style1"></td>
        </tr>
        <tr>
            <td>
                email</td>
            <td>
                <input id="Text2" runat="server" type="email" /></td>
  
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>
                birth</td>
            <td>
                <input id="Text3" type="date" /></td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>
                <input id="Button1" type="submit" value="Subscripe" /></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

</div>
            </form>
    
    




<div id="fffg">

</div>

ajax request code

 <script>


        $(document).ready(function () {
            $('#Text2').change(function () {

                $.ajax({
                    type: "GET",
                    url: "Login.aspx/GetDoublicate",
                    'data': {"email":$('#Text2').val() },
                    //contentType: "application/json; charset=utf-8",
                    dataType: "text",
                    success: function (response) {
                        console.log(response);
                    }
                });
                

            })

        })
        

    </script>

Login.aspx page code behind:

  public bool GetDoublicate()
        {


            SqlConnection con = new SqlConnection(connectionString);
            con.Open();
            string sqltext = "select id from CoAuthor where email='"   Request.Params["email"]   "'";
            SqlCommand cmd = new SqlCommand(sqltext, con);
            string x = cmd.ExecuteScalar().ToString();
                      con.Close();
            if (string.IsNullOrEmpty(x))
            {
                return true;
            }
            else return false;




        }

after that I get this: result

and after log the response using console I get my page whole elements printed not only true or false that is meaning the function I need not called successfully.

I tried to use WebMethod decorate but same fail result noting that I need to get data from DB which static method can't do that.

I tried to use update panel and put hidden ASP button inside thus when (change event occurs on Text2 ) I clicked the hidden button using jquery .click method but also I can't get any result.

thanks in advance for all.

CodePudding user response:

After hours of trying and research I found the solution and here are my full code:

 $(document).ready(function () {
        $('#Text2').change(function () {
            var ema = $('#Text2').val();
            $.ajax({
                type: "POST",
                url: "Login.aspx/GetDoublicate",
                // data: '{"email":' $('#Text2').val()  ',}',
                data: JSON.stringify({ "email":ema }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    //   console.log(response.d);
                    if(response.d == true)
                    { alert("doublicate email discovered"); }
                else {alert("Ok, go on")};
                }
                ,
                error: function (xhr, err) { alert("readyState: "   xhr.readyState   "\nstatus: "   xhr.status   "\nresponseText: "   xhr.responseText); }

            });
            

        })

    })

noting that jSon parameters must be same name of function called parameter.

here asp code: [WebMethod] public static bool GetDoublicate(string email) {

        SqlConnection con = new SqlConnection(connectionString);
        con.Open();
        string sqltext = "select id from CoAuthor where email='"   email   "'";
        SqlCommand cmd = new SqlCommand(sqltext, con);
        SqlDataReader dr= cmd.ExecuteReader();
        while (dr.Read())
        {
            return true;
        }
        con.Close();
        return false;
        



    }
  • Related