how to validate the request using onBegin in Ajax.Begin Form?

16,740

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.

Share:
16,740

Related videos on Youtube

Imad Alazani
Author by

Imad Alazani

at Chipotle!

Updated on September 15, 2022

Comments

  • Imad Alazani
    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
    Imad Alazani over 10 years
    Thanks. 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
    Darin Dimitrov over 10 years
    Your 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
    Darin Dimitrov over 10 years
    It'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
    Imad Alazani over 10 years
    check my updated question. this markup is generated without the unobtrusive reference as u mentioned.
  • Imad Alazani
    Imad Alazani over 10 years
    Did you verify this html at ur end without unobtrusive reference ??
  • Darin Dimitrov
    Darin Dimitrov over 10 years
    Do you see the markup? Do you see the data-ajax-method, data-ajax-begin and data-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 the jquery.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)?