c# - Raise Server side button click event from javascript in ajax call

Question

I have a submit button on a page.

<asp:Button ID="btnSubmit" runat="server" Text="Save Test" OnClick="btnSubmit_Click"
                                        OnClientClick="return ValidateSaveTest(this);" />

On Javascript, ValidateSaveTest function is called which validates all the fields.

function ValidateSaveTest(Sender) {

            //do some validation, if fails return false from here. else move forward

        var parameters = {};
        parameters["parametersName"] = $("#" + hidTestId).val();

        var succeededAjaxFn = function(result) {
            if (result== true) {
                var isNewVersion = confirm("Confirmation message");
                if(isNewVersion)
                {
                        //Raise server side button click event. Dont call click side event anymore.
                        $("#" + "<%=btnSubmit.ClientID %>").click();
                }
                return false;
            }

        }
        var failedAjaxFn = function(result) { return false; }

            //jquery ajax call
        CallWebMethod("../Service.asmx", "IsTestUsed", parameters, succeededAjaxFn, failedAjaxFn);

        //async call, always return false hence no postback from here.
        //Need waiting unless ajax response is obtained.
        return false;
    }

I need to raise server side button click event from javascript once ajax response is received.

Answer 1

You can get the required JavaScript code from the ClientScriptManager's GetPostBackEventReference method:

Returns a string that can be used in a client event to cause postback to the server.

This is normally used for writing the onclick attributes on controls like the <asp:linkButton>, but you can use it in your jQuery callback as well:

var succeededAjaxFn = function(result) {
  //Raise server side button click event. Dont call click side event anymore.
  <%= Page.ClientScript.GetPostBackEventReference(btnSubmit, String.Empty) %>;
}

The <%= %> block above will write out the following JavaScript for you:

__doPostBack('btnSubmit','')

Which in turn will post back the form to the server in such a way that ASP.NET thinks the button was clicked, and so the server-side btnSubmit_Click is triggered.

Notice that using this method, you can pass in a C# reference to the actual control. You don't need to worry about its client ID, or the correct name and arguments of the __doPostback() JavaScript function. All that is taken care of by the ClientScriptManager when you call this method.