Execute client & server side code with one click?

Question

i am not sure if my design have flaw but would like to know what others have to say, i am in a situation where i am trying to acheive two things in one click.

using : asp.net web form

i have a web form with few textbox and a gridview control and a button.

if i click on the button i am executing two things

1) asynchronously get data from server to client (working great) and able to display the data in the textboxes.

2) same click i want to bind the gridview.

<asp:Content ID="Content2" ContentPlaceHolderID="cphMaster" runat="server">
     <asp:Label runat="server" ID='Label1' >Id:</asp:Label>

        <asp:TextBox ID="txtId" runat='server'></asp:TextBox>

        <asp:Button ID="btnSubmit" OnClientClick="LoadDataById();" runat="server" Text="Submit" 
         onclick="btnSubmit_Click" />
        <br />
         <br />
        <asp:TextBox ID="txtName" runat='server'></asp:TextBox> <br />
        <asp:TextBox ID="txtPurpose" runat='server'></asp:TextBox>    <br />
     <br />

     <asp:GridView ID="GridView1" runat="server">
     </asp:GridView>
</asp:Content>

server side

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            GridView1.DataSource = laodData(int.Parse(txtId.Text));
            GridView1.DataBind();
        }

Jquery:

function LoadVisitBasicByVisitId() {


    ContactServiceProxy.invoke({ serviceMethod: "GetDataById",
        data: { request: request },
        callback: function(response) {

           processCompletedContactStore(response);
        },
        error: function(xhr, errorMsg, thrown) {
            postErrorAndUnBlockUI(xhr, errorMsg, thrown);
        }
    });
    return false;
} 

recap:

1) jquery script execute asynchronously to get data from server to client and display in the textboxes
2) server side code to bind the gridview.

PROBLEM:

if i have onClientClick="return LoadDataById(); then it executes ONLY ajax code and does not execute server side

but if have onClientClick="LoadDataById(); then it executes client and server but textbox value wipeout. (the textbox value popuplate through ajax)

Answer 1

if your jquery function would return true, your server side code would process. Returning false prevents the page from posting back to the server.

also, set your onClientClick="return LoadDataById();"

Answer 2

I've developed something in past with this way of think and as I remember, i have no troubles with this.

but if you return false in jqeury, postback will not happen.