MVC3: How to check recaptcha with Ajax or directly with JS? - c#

I would like to check the recaptcha control via Ajax.
$(document).ready(function () {
$('#submit').click(function () {
$.ajax({
url: '/Competition/CheckForm',
type: "POST",
data: ????,
success: function (data) {
alert(data);
return false;
},
error: function (jqXhr, textStatus, errorThrown) {
alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
return false;
}
});
});
});
My problem is, how i can transfer the recaptcha data to my ActionResult.
#ReCaptcha.GetHtml(publicKey: "publicKey")
Here is my ActionResult:
[HttpPost]
public ActionResult CheckForm(???)
{
if (ReCaptcha.Validate(privateKey: "privateKey"))
{
}
return Json();
}
Anyone have an idea how i can check the recaptcha with Ajax?
It's easy with PHP...there you have the possibility to check the data with a function ("recaptcha_check_answer" from "recaptchalib.php")
TIA!

Try subscribing to the submit event of the form in order to AJAXify it:
$(document).ready(function () {
$('#myForm').submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (data) {
alert(data);
},
error: function (jqXhr, textStatus, errorThrown) {
alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
}
});
return false;
});
});
But if you wanted to AJAX submit a given form when some element is clicked other than its submit button you could also do the following:
$(document).ready(function () {
$('#someButton').submit(function () {
var myForm = $('#myForm');
$.ajax({
url: myForm.attr('action'),
type: myForm.attr('method'),
data: myForm.serialize(),
success: function (data) {
alert(data);
},
error: function (jqXhr, textStatus, errorThrown) {
alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
}
});
return false;
});
});

Related

jqplot - pass variable via ajax to C# page

I am unable to retrieve values passed by $.ajax on my c# page.
I am using jqplot and I want to pass two pieces of information. One is stored in a hidden field called 'hidden_plateid' and the second piece of information is from a dropdown box called 'SampleNumberList'
This is the hidden field
<input type="text" name="hidden_plateID" id="hidden_plateID" hidden="hidden" runat="server" />
And this is the drop down box:
<select name="SampleNumberList" class="DropDownBox_editjob" id="SampleNumberList">
<option value="--SELECT--"></option>
<option value="001r">001r</option>
<option value="002r">002r</option>
</select>
I simply then say that everytime, someone selects from the dropdown box, to get and get the information from the db and plot the graph
$('#SampleNumberList').on('change', function (e) {
var ajaxDataRenderer = function (url, plot, options) {
var ret = null;
$.ajax({
data: {
PlateID2: options.PlateID,
SampleID2: options.SampleID,
},
async: false,
url: url,
dataType: "json",
success: function (data) {
alert(data);
ret = data;
},
error: function (xhr, err) {
alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
alert("responseText: " + xhr.responseText);
}
});
return ret
};
var jsonurl = "SpectraData.aspx";
var plot2 = $.jqplot('chartdiv', jsonurl, {
title: "AMIRA",
dataRenderer: ajaxDataRenderer,
dataRendererOptions: {
unusedOptionalUrl: jsonurl, PlateID: $('#hidden_plateID').val(), SampleID: $('#SampleNumberList').val()
}
});
});
I use Request.Querystring to try and retrieve the value in the c# file but so far, I get nothing
if (Request.QueryString["PlateID2"] != null)
{
PlateID = Request.QueryString["PlateID2"].ToString();
}
if (Request.QueryString["SampleID2"] != null)
{
SampleID = Request.QueryString["SampleID2"].ToString();
}
You are trying to retrieve values from a query string , yet you are passing the parameters as json.
In order to retrieve them as a query string params, you need to pass them along your url.
$.ajax({
async: false,
url: url + "?PlateID2=" + options.PlateID + "&SampleID2=" + options.SampleID + "",
dataType: "json",
success: function (data) {
alert(data);
ret = data;
},
error: function (xhr, err) {
alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
alert("responseText: " + xhr.responseText);
}
});
In reality, the right way to do this is to pass params as a json string and intercept in the code behind.
$.ajax({
url: url/Somemethod,
type: 'POST',
dataType: 'json',
data: "{'PlateID2':'" + options.PlateID + "','SampleID2':'" + options.SampleID + "'}",
success: function (data) {
alert(data);
ret = data;
},
error: function (xhr, err) {
alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
alert("responseText: " + xhr.responseText);
}
});
In your codebehind :
[WebMethod]
public static void Somemethod(string PlateID2,string SampleID2)
{
}

How to use ajax to call a boolean web method

I want to use an ajax call to check if Boolean is true or false.
here is my web method:
[WebMethod]
public Boolean Login(string uname, string password)
{
if (ValidateUser(uname, password))
{
FormsAuthentication.Authenticate(uname, password);
return true;
}
return false;
}
and here is my ajax call but its not working
$(document).ready(function () {
$('#btnLogin').click(function () {
var username = "test"
var password = "1234"
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "wsLogin.asmx/Login",
data: "{uname: '" + username + "'" + ",pwd: '" + password + "' }",
dataType: "Json",
success: function (success) {
alert("Boolean True");
},
error: function (error) {
alert("Boolean False");
}
});
});
});
I am trying to create a login so I am using a Boolean to check if the user is authenticated
Unfortunately ajax seems to .toString() the answer so what was a boolean becomes a "True" or "False" if you return a Json data structure instead like
return Json(new { Error = true, ErrorMessages = new []{e.Message} });
the values will be truly boolean.
I had the same problem.
I realised that the error: function (error) {} never gets called, even when my webmethod returned false.
What's actually happening is that as long as the webmethod does not produce any errors itself (like exceptions), then the error function will never fire! The webmethod will always be a 'success'!
So place your true/false logic inside the success function:
$(document).ready(function () {
$('#btnLogin').click(function () {
var username = "test"
var password = "1234"
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "wsLogin.asmx/Login",
data: "{uname: '" + username + "'" + ",pwd: '" + password + "' }",
dataType: "Json",
success: function (result) {
if(result == "true")
alert("Boolean True");
else
alert("Boolean False");
},
error: function (error) {
error = error; //do nothing
}
});
});
});
try this:
$(document).ready(function () {
$('#btnLogin').click(function () {
var username = "test"
var password = "1234"
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "wsLogin.asmx/Login",
data: "{uname: '" + username + "'" + ",pwd: '" + password + "' }",
dataType: "Json",
success: function (data) {
if(data)
alert("Boolean True");
else
alert("Boolean False");
},
error: function (error) {
alert("Error");
}
});
});
});

How to bind asp.net grid view using jquery

I am trying to bind data into grid view using jquery. data is succesfully loaded in "result" but can not apply this data in grid view
My Script:
$(document).ready(function() {
$.ajax({
url: '../_AJAX/ajaxCall-InterestSubsidy.aspx',
data: { 'MODE': 'BindGrid' },
type: 'POST',
dataType: 'json',
success: function(result) {
var reslk = result;
$.each(result.Table1, function(index, res) {
$(".GridView1").append("<table><tr><td>" + res.StateId +
"</td><td>" + res.StateName +
"</td></tr></table>");
});
},
error: function(e) {
}
});
});
My grid view:
<asp:GridView ID="GridView1" runat="server" CssClass="GridView1">
</asp:GridView>
try this
$.map(result.d, function (item) {
$(".GridView1").append("<tr><td>" + item.StateId +
"</td><td>" + item.StateName +
"</td></tr>");
});
or
$.map(result.Table1, function (index, res) {
$(".GridView1").append("<tr><td>" + res.StateId +
"</td><td>" + res.StateName +
"</td></tr>");
});

jQuery UI autocomplete error via Web Service/JSON response

I've been trying to get this to work for a few hours now but can't see where I'm going wrong.
I've been checking Firebug for the server response and it retrieves the json data via .asmx web service fine. The only error i have to go off is the one in firebug that's triggered when 2 or more characters are typed in:
TypeError: c.settings[d].call is not a function
jQuery Code Snippet:
$(document).ready(function () {
$("#<%= txtCustomer.ClientID %>").autocomplete({
minLength: 2,
async: true,
source: function(request, response) {
$.ajax({
url: "../Services/AJAXHandler.asmx/GetCustomers",
data: "{'filter':'" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function(item) {
return {
label: item.customerName
};
}));
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
var errorMessage = "Ajax error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + XMLHttpRequest.statusText + " : " + XMLHttpRequest.status;
if (XMLHttpRequest.status != "0" || errorThrown != "abort")
{
alert(errorMessage);
}
}
});
}
});
If anybody could point me in the right direction that would be brilliant.

Passing parameter to controller function from jQuery function '$.ajax'

I am using ASPNET MVC 2.0. I'm trying to pass a value from View to Controller function using jquery function .ajax. My jquery function is:
$(document).ready(function() {
$("#Search").click(function(event) {
var searchString = $("#TraderSearch").val();
$.ajax({
type: 'POST',
url: '/Build/SearchTrader',
data: "{strData : '" + searchString + "' }",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(ResultList) {
var contents = "";
var count = 0;
$(ResultList).each(function() {
contents = contents + '<tr><td>' + ResultList[count].Name + '</td><td>' + ResultList[count].Value +
'</td><td><a class="edit"><img src="../../html/images/Edit.gif" width="14" height="14" alt="edit" /></a></td></tr>';
count = count + 1;
});
$("#SerachResultList").append(contents);
alert("{strData : '" + searchString + "' }");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Error: " + textStatus + "\n" + errorThrown);
}
});
});
});
And my Controller function is as follows:
public ActionResult SearchTrader(string strData)
{
//Function to search DB based on the string passed
return Json(lstDictObject);
}
My problem is that, I am not able to get the value in my controller. I'm getting strData as 'null'. I think there is somme mistake in the way i'm trying to pass the value? Can anyone correct me?
Thanks in Advance,
Vipin Menon
try this:
data: "strData = " + searchstring
I believe the following should work:
data: { strData: searchstring }
Quotes caused the same issue in the script I just tested.
You also need to check the spelling on your "#SerachResultList" if this is your actual code.

Categories