CODEWITHSUNDEEP
javascriptc#jqueryasp.netpostback
user123456789
user123456789

Reputation: 2004

call function from code behind in javascript without postback

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?

Upvotes: 1

Views: 9516

Answers (2)

kapantzak
kapantzak

Reputation: 11750

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

Upvotes: 1

uhsl_m
uhsl_m

Reputation: 342

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

Upvotes: 1

Related Questions