How to Call JavaScript Functions from CodeBehind and Vice Versa?

Call JavaScript functions from code-behind

Question:

How to efficiently call JavaScript functions from code-behind and vice versa?

Answer:

To call a JavaScript function from the code-behind, use the following method:

<code class="language-csharp">Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "MyFunction()", true);</code>

This code dynamically registers a JavaScript function that will be called during page load. "MyFunction" is the name of the JavaScript function to be called.

To call code-behind methods from JavaScript, you can use web services or AJAX technology:

WebMethod

<code class="language-csharp">[WebMethod]
public string ExecuteSomething(string input) {
    // 要执行的操作代码
    return "Result from CodeBehind"; // 返回结果
}</code>

In JavaScript:

<code class="language-javascript">PageMethods.ExecuteSomething('myInput', OnSuccess, OnFailure);

function OnSuccess(result) {
    // 使用结果
    console.log(result);
}

function OnFailure(error) {
    // 处理错误
    console.error(error);
}</code>

AJAX

<code class="language-javascript">function CallCodeBehind() {
    $.ajax({
        url: "CodeBehindPage.aspx/ExecuteSomething",
        type: "POST",
        data: JSON.stringify({ input: "myInput" }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            // 使用结果
            console.log(data.d); // d 属性包含服务器返回的结果
        },
        error: function (xhr, status, error) {
            // 处理错误
            console.error(error);
        }
    });
}</code>

Using these technologies, you can interact seamlessly between server-side code-behind and client-side JavaScript. Note that the AJAX examples have been updated to more modern and robust handling of JSON, including error handling. The WebMethod sample also adds explicit error handling and result return.

The above is the detailed content of How to Call JavaScript Functions from CodeBehind and Vice Versa?. For more information, please follow other related articles on the PHP Chinese website!