Call ajax function after code behind validation ASP.NET-CodePudding

Suppose I have a form:

<form id="submitForm" runat="server">
    <input type="text" id="name" name="name">
    <input type="text" id="lastname" name="lastname">
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>

Ajax:

    $.ajax({
        type: 'POST',
        url: postUrl,
        data: $form.serialize(),
        success: function (data) {
               ...
        },
        error: function (err) {
               ...  
        }
    });

ASP.NET

protected void Button1_Click(object sender, EventArgs e)
{
    //validations here
}

which calls an ajax function when it's submitted. Now, I want it to make an ajax request only after backend validation. But in my case it makes the ajax request first, which shouldn't happen.

Any idea how to approach this one?

CodePudding user response：

When the browser posts the form to the server to handle the button click event, the page doesn’t really exist anymore, so having client code depend on the result of a postback is impractical. Is there a reason why you need to handle the validation separately from the POST handler? If not, you could either have the POST handler do the validation and skip the next step if necessary. Alternatively, the button click handler could do whatever the POST handler does after determining that the data is valid. If you need to keep them in two separate calls, making the validation into something that could be called with AJAX would allow the client to make one AJAX call to do the validation, and then decide whether to make the second call based on its response.

CodePudding user response：

Sure you can do this.

You have a plain jane button click. It runs some server side code. That server side code does your validation, walks the dog, does whatever.

If at the end of of that server side code button, you THEN want some javascript code to run?

Sure, on the last line (or based on some validation if/then block), you can decide to call/run/have a js function run, and that js function can then walk the dog, play a game of checkers, and of course do your ajax call.

So, say this button and a js function (to run AFTER the button behind code runs).

        <asp:Button ID="Button1" runat="server"
            Text="run server side code,then client side" Width="385px"
        OnClick="Button1_Click" />


        <script>
            function myjava() {

                // code here to walk the dog

                $.ajax({
                    type: "POST",
                    url: "testajax.aspx/GetHello",
                    contentType: "application/json; charset=utf-8",
                    data: {},
                    dataType: "json",
                    success: function (data) {
                        $('#myLabel').text(data.d);
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            }
        </script>

So, code behind:

    protected void Button1_Click(object sender, EventArgs e)
    {
        // code does whatever, - sets some validation flag

        bool ValidateOK = true;   // our fake validation result

        if (ValidateOK)
        {
            // run the js code - code which will do a ajax call
            ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(),"MyPopEdit", "myjava()",true);
        }
    }

So, you click on the button, code behind runs, does validation, and if ok, then you will run a client side routine called myjava(). And myjava can walk the dog, do whatever, and ALSO of course do the ajax call or whatever.