call function from code behind in javascript without postback

Question

I have a list of customers that the user can choose from. When they select a customer, I need to load the contacts of that customer. I needed to call the function from JavaScript so I added a button:

<asp:Button ID="btnSample" runat="server" style="float:right;display:none" OnClick="btnSample_Click" />

and that button then gets triggered from my JavaScript function:

function OnGetCustomer(result){
                document.getElementById('lblCustID').innerHTML = result.ID;
                document.getElementById('lblCustName').innerHTML = result.Name; 
                document.getElementById("btnSample").click();
}

Code behind to load the contacts:

protected void btnSample_Click(object sender, EventArgs e)
    {
        RateSheet r = new RateSheet(ID, Company.Current.CompanyID);
        if (!string.IsNullOrEmpty(lblCustID.Text))
        {
            Customer c = new Customer(int.Parse(lblCustID.Text));

            bool e2 = false;
            foreach (Customer.CustomerContact cc in c.Contacts)
            {
                HtmlGenericControl li = new HtmlGenericControl("li");
                CheckBox cb = new CheckBox();
                cb.ID = "cbCustContact_" + cc.ID;
                cb.Checked = true;
                if (!string.IsNullOrEmpty(cc.Email))
                {
                    cb.Text = cc.Email;
                    cb.TextAlign = TextAlign.Right;
                    li.Controls.Add(cb);
                    ulCustContacts.Controls.Add(li);
                }
            }
        }
    }

I need the value from lblCustID to find the customer's contacts. The problem is the button causes postback and I lose the customer I selected so lblCustID always comes back as zero. How do I stop postback so I don't lose any values?

Add the customerid to hiddenfield so that it will be posted to the server when the postback happens and you can read it on the server side. — Esko
– Esko, Commented Jul 14, 2016 at 9:20

uhsl_m · Accepted Answer · 2016-07-14 09:27:08Z

1

Is lblCustID a label or an input? The only* controls in which changes are preserved in postback are inputs. You can use <asp:HiddenField /> or any <input runat="server" ... /> to send information for the code behind to work with.

*Along with other controls such as dropdownlists etc

edited Jul 14, 2016 at 9:27

answered Jul 14, 2016 at 9:21

uhsl_m

3424 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user123456789 Over a year ago

lblCustID is a label. So changing that to a HiddenField worked. But I am still losing my other labels like lblCustName because of the postback. Changing it to <input runat="server" type="text" id="lblCustName" /> makes it a textbox. Is there a way to set it to label so it is still preserved in postback?

uhsl_m Over a year ago

Are you changing those labels via javascript too? Either way, labels are not saved in the ASP viewstate (a hidden field asp uses to repopulate controls afterpostback). The way to do that would be to pair up each lable with a hidden control, then on page load, change the label text to the value in the hidden control

user123456789 Over a year ago

what do you mean changing the labels?

uhsl_m Over a year ago

Changing the label value with JS, it appears that you are. (I was too slow to edit my comment: The hidden field would mirror the labels text (via JS) and after postback, on page load you could change the label text to the value in the hidden field (again via JS))

kapantzak · Accepted Answer · 2016-07-14 09:31:58Z

You can use asynchronous call to achieve that:

Set AutoPostback="false" to prevent the button to cause postback onclick

<asp:Button ID="btnSample" runat="server" style="float:right" AutoPostback="false" />

Or just add a raw HTML button (ATTENTION: add a type="button" or this will cause a postback):

<button id="btnSample" type="button">Click</button>

Then add an event listener to this button and execute the ajax call:

$(document).on('click', '[id$=btnSample]', function() {
   ajax({
      url: 'path/to/handler',
      method: 'POST',
      data: { key: 'value', ... },
      success: function(data) {
         OnGetCustomer(data);
      },
      error: function() {
         console.log('Error on ajax call!');
      }
   });
});

NOTE: You have to move your cobebehind code into a generic handler to handle the ajax call and return the result

Collectives™ on Stack Overflow

call function from code behind in javascript without postback

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related