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> </td>
</tr>
<tr>
<td>
birth</td>
<td>
<input id="Text3" type="date" /></td>
<td> </td>
</tr>
<tr>
<td>
<input id="Button1" type="submit" value="Subscripe" /></td>
<td> </td>
<td> </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;
}