how to validate the request using onBegin in Ajax.Begin Form?
This code is not firing the StartValidation function. Why?
Because you seem to have subscribed to the click event of the submit button, which you absolutely don't need.
All you need is to reference the jquery.unobtrsuive-ajax.js script in order to AJAXify those Ajax.* helpers:
<html>
<head>
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquer.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script type="text/javascript">
function StartValidation() {
return true;
}
</script>
</head>
<body>
<div>
@using (Ajax.BeginForm("UploadRequestFile", "FileUpload", new AjaxOptions
{
HttpMethod = "POST",
OnBegin = "return StartValidation();"
}, new { id = "frmUp" }))
{
<input type="submit" name="Submit" value="Submit" />
}
</div>
</body>
</html>
You are undoubtefully noticing how I added a reference to the jquery.unobtrusive-ajax.min.js
script in order to make those Ajax.* helpers do what you expect them to do.
Another remark I have about your code is that you seem to be attempting to invoke an action named UploadRequestFile
on the FileUpload
controller. Given those names I can safely assume that you are attempting to upload a file to the server (it's just that you didn't show or mention that in your question). Let me tell you quickly, before you get upset, that you cannot upload files using AJAX. You could use some plugin such as Uploadify or BlueImp File Upload or if your client browsers support the HTML5 File API then you could rely on it.
Related videos on Youtube
Comments
-
Imad Alazani about 1 year
Question : This code is not firing the
StartValidation function
. Why?<html> <head> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#frmUp').find("input[type = 'submit']").click(function () { $('#frmUp').submit(); }); }); function StartValidation() { return true; } </script> </head> <body> <div> @using (Ajax.BeginForm("UploadRequestFile", "FileUpload", new AjaxOptions { HttpMethod = "POST", OnBegin = "return StartValidation();" }, new { id = "frmUp" })) { <input type="submit" name="Submit" value="Submit" /> } </div> </body> </html>
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>
-
Imad Alazani over 10 yearsThanks. It works. Short and to the point. I was also submitting the form. and
onBegin
says, whichever function is passed will be called before firing the request. May i know, Why my code could not work? Thanks again. -
Darin Dimitrov over 10 yearsYour code doesn't work because you didn't reference the jquery.unobtrsuive-ajax.js script to your page. And if you don't do that what do you think that the Ajax.BeginForm helper will do? Have you looked at the generated HTML? It's just a simple
<form>
tag. And you know what happens when you click on the submit button of a form? This form gets submitted to the server and the browser redirects away from the current page following the action attribute of this form. All javascript simply stops executing when you redirect away from the current page. -
Darin Dimitrov over 10 yearsIt's the jquery.unotrbsusive.js script that will analyze the HTML5 data-* attributes emitted by the Ajax.* helpers in the DOM and subscribe to the .submit event of this form and cancel the default action and send an AJAX request instead by serializing all form input fields and sending them to the server. The browser stays on the current page. It doesn't redirect away anymore to the
/FileUpload/UploadRequestFile
address anymore once you include this script. -
Imad Alazani over 10 yearscheck my updated question. this markup is generated without the unobtrusive reference as u mentioned.
-
Imad Alazani over 10 yearsDid you verify this html at ur end without unobtrusive reference ??
-
Darin Dimitrov over 10 yearsDo you see the markup? Do you see the
data-ajax-method
,data-ajax-begin
anddata-ajax
attributes? That's what the Ajax.BeginForm helper do. It emits those attributes. But those attributes mean absolutely nothing to the browser. It's thejquery.unobtrsuive-ajax.js
script that understands and interprets them. Without it, it's just a normal<form>
element to the browser. You know what a<form>
element is and how it works in HTML (without any javascript)?