Use a Function That Returns Ajax to Ajax.BeginForm's onBegin - asp.net-mvc

Question

EDIT: To be more clear, I am looking to have onBegin call a function that returns a true or false value from an Ajax call. That false value needs to be able to trigger onBegin to abort the form submission, just as if I had returned a false value from a non ajax function.
I need to return a value of false to Ajax.BeginForm's onBegin, if certain conditions exist. This way I can prevent the form from submitting if certain database conditions exist.
However, in order to use the results of an Ajax Get, I would need to craft the function to use callbacks, which means that I cannot have the function used by onBegin return the ajax value. So how can I pass the result into onBegin?
Basically I have:
`Ajax.BeginForm(onBegin="checkIfMyConditionExists();"`}...
function checkIfMyConditionExists(){
$.get(checkConditionURL, function(data){
doSomething(data);
});
How can I get that data (which would be my true or false value) into onBegin?

Answer 1

What you are trying to accomplish without it being synchronous just is not going to happen. You WILL have to perform a synchronous check. Otherwise the check will be called but the form and other things will be submitted before the ajax call has time to say "Wait for me."
In your ajax call to the server you have to set async: false on a $.ajax call. This will make it to where it will expect some sort of result before running the next bit of code. Keep in mind that you wouldn't want to do $.get because there is no option to turn it off.
If you "don't want the UI to hang".... Put some sort of loading icon or text. It's a good practice for "ajax" stuff anyways...
Here is the code you could use :)
function checkIfMyConditionExists () {
$.ajax({
url: checkConditionURL,
async: false,
success: function (data) {
if (!data.success) {
return false;
}
// put your code to run something here!
}
});
}
It really doesn't need to be more complicated than that. Also something to keep in mind when implementing this...
Per the jQuery.ajax documentation:
As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().
Another way to accomplish this would be to do the following.
Use a standard button on the form. (not a submit)
<button id="TriggerButton">Submit</button>
Handle the click of that button. Do your check. Submit the form if it's success!
$(function () {
$("#TriggerButton").click(function (e) {
e.preventDefault();
$.ajax({
url: checkConditionURL,
success: function (data) {
if (!data.success) {
// ruh roh!
return false;
}
// submit le form!
$("#MyForm").trigger("submit");
}
});
});
});
With this method, you could remove the onBegin and it should do what you need it to do. :)

Answer 2

I modified your code with a solution that works:
Ajax.BeginForm(onBegin="return checkIfMyConditionExists();"}...
function checkIfMyConditionExists(){
$.ajax({
url: checkConditionURL,
data: data,
async: false,
success: function (data) {
return data.condition;
}
});
note the async: false option that allows you to wait until the call ends and get the results after that.

Answer 3

My Working code
JavaScript/JQuery
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript">
</script>
<script type="text/javascript">
function StartValidation() {
var result = AjaxCall();
return result;
}
function AjaxCall() {
var Istrue = false;
$.ajax({
url : "#Url.Action("Json", "FileUpload")",
contentType : "application/json; charset=utf-8",
dataType : "json",
type : "POST",
data : JSON.stringify({FirstName:'test', LastName:'test1'})
}).done(function() {
Istrue = true;
alert('ok')
})
.fail(function() {
Istrue = false;
alert('not ok');
});
return Istrue;
}
</script>
HTML
#using (Ajax.BeginForm("UploadRequestFile", "FileUpload", new AjaxOptions
{
HttpMethod = "POST",
OnBegin = "return StartValidation();"
}, new { id = "frmUp" }))
{
<input type="submit" name="Submit" value="Submit" />
}
Runtime MarkUp
<form method="post" id="frmUp" data-ajax-method="POST"
data-ajax-begin="return StartValidation();" data-ajax="true"
action="/fileupload/UploadRequestFile?Length=10">
<input type="submit" value="Submit" name="Submit">
</form>
Check the data-ajax-method, data-ajax-begin and data-ajax attributes. Ajax.BeginForm helper emits those attributes. Those attributes mean absolutely nothing to the browser. It's the jquery.unobtrsuive-ajax.js script that understands and interprets them. Without it. So, no need to perform the Submit explicitly.
Action Methods
[HttpPost]
public JsonResult Json(string FirstName, String LastName)
{
//Do the Validation Part here.
return Json(new { Success = true });
}
[HttpPost]
public ActionResult UploadRequestFile()
{
return View();
}