Calling Code-behind from Javascript

On the click of a button, I call a JavaScript function. After getting the value, I need to perform some stuff from the value obtained in the code-behind. How should I call code-behind?

My aspx:

function openWindow(page) {
  var getval = window.showModalDialog(page);
  document.getElementById("<%= TxtInput.ClientID %>").value = getval; 
  //After this I need to perform stuff 'Upload(TxtInput.value)' into database from the code-behind
}

The button calling the function is set up in the following manner:

<button class="doActionButton" id="btnSelectImage" runat="server" onclick="openWindow('../rcwksheet/popups/uploader.htm')">Select Image</button>

My desired code behind (VB):

Public Sub btnSaveImage_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSelectImage.ServerClick
  Dim inputFile As String = Me.TxtInput.Value
  //do more stuff here
End Sub

So:

1. Is there a way to call code-behind from the JavaScript?
2. Can I somehow use the “onclick” property of a button to first go to a JavaScript and then to the code-behind?
3. Trigger a code-behind call “onchange” of the TxtInput.Value?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

yes there is a way.

first, you can use javascript to submit the form after your return value is set in TxtInput.

function openWindow(page) {
  var getval = window.showModalDialog(page);
  document.getElementById("<%= TxtInput.ClientID %>").value = getval; 
  document.forms[0].submit();
}

then in your code behind, you can handle TxtInput‘s value in page load event.

protected void Page_Load(object sender, EventArgs e)
{
    if (Page.IsPostBack)
    {
        if (this.Input.Value != string.Empty)
        {
            this.Input.Value += "blah";
        }
    }
}

note: you may need Identifying control that caused postback

Method 2

You can put the server side code into a web service, make a service reference in an asp:ScriptManager on your aspx page and then you can call/execute the web service from javascript by calling:

WebServiceClassName.MethodName(javascriptvariable, doSomethingOnSuccess)

Here is a link on doing that:

http://msdn.microsoft.com/en-us/magazine/cc163499.aspx

Method 3

You can call the __doPostBack Event.

function openWindow(page) {
  var getval = window.showModalDialog(page);
  document.getElementById("<%= TxtInput.ClientID %>").value = getval; 
__doPostBack('btnSelectImage', getval);
}

And on the server side in your code behind, you can get the value:

In the PageLoad method:

if (Request.Form["__EVENTTARGET"] == "btnSelectImage")
{
    //get the argument passed
    string parameter = Request["__EVENTARGUMENT"];
    //fire event
    btnSaveImage_Click(this, new EventArgs());
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0