การเรียกใช้ฟังก์ชัน JavaScript จาก CodeBehind

บางคนสามารถให้ตัวอย่างที่ดีของการเรียกใช้ฟังก์ชัน JavaScript จาก CodeBehind และในทางกลับกันได้หรือไม่

คุณสามารถลองสิ่งนี้:

Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","MyFunction()",true);

C # ถึง JavaScript: คุณสามารถลงทะเบียนบล็อกสคริปต์เพื่อให้ทำงานบนหน้าเว็บดังต่อไปนี้:

ClientScript.RegisterStartupScript(GetType(),"hwa","alert('Hello World');",true);

เปลี่ยนชิ้นalert()ส่วนด้วยชื่อฟังก์ชั่นของคุณ

สำหรับการโทรวิธี C # จาก JavaScript คุณสามารถใช้หรือScriptManager ผมเองใช้jQuery jQueryคุณต้องตกแต่งวิธีการที่คุณต้องการโทรจาก JavaScript ด้วยWebMethodคุณสมบัติ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการโทร C # (เรียกว่าPageMethod) จากjQueryคุณสามารถดูโพสต์ของเดฟวอร์ด

การเรียกใช้ฟังก์ชัน JavaScript จากโค้ดด้านหลัง

ขั้นตอนที่ 1 เพิ่มรหัส Javascript ของคุณ

<script type="text/javascript" language="javascript">
    function Func() {
        alert("hello!")
    }
</script>

ขั้นตอนที่ 2 เพิ่ม 1 ตัวจัดการสคริปต์ใน webForm ของคุณและเพิ่มปุ่ม 1 ด้วย

ขั้นตอนที่ 3 เพิ่มรหัสนี้ในเหตุการณ์การคลิกปุ่มของคุณ

ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "Func()", true);

คุณไม่สามารถทำได้โดยตรง ใน WebForms มาตรฐาน JavaScript ถูกตีความโดยเบราว์เซอร์และ C # โดยเซิร์ฟเวอร์ สิ่งที่คุณสามารถทำได้เพื่อเรียกใช้เมธอดจากเซิร์ฟเวอร์โดยใช้ JavaScript คือ

• ใช้WebMethodเป็นattributeวิธีการกำหนดเป้าหมาย
• เพิ่มScriptManagerการตั้งค่าเป็นEnablePageMethodstrue
• เพิ่มรหัส JavaScript PageMethodsเพื่อเรียกวิธีผ่านวัตถุ

แบบนี้:

ขั้นตอนที่ 1

public partial class Products : System.Web.UI.Page 
{ 
    [System.Web.Services.WebMethod()] 
    [System.Web.Script.Services.ScriptMethod()] 
    public static List<Product> GetProducts(int cateogryID) 
    {
        // Put your logic here to get the Product list 
    }

ขั้นตอนที่ 2: การเพิ่มScriptManagerบนPage

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />

ขั้นตอนที่ 3: การเรียกใช้เมธอดโดยใช้ JavaScript

function GetProductsByCategoryID(categoryID)
{
    PageMethods.GetProducts(categoryID, OnGetProductsComplete);
}

ลองดูที่ลิงค์นี้

ในการเรียกใช้ฟังก์ชัน JavaScript จากเซิร์ฟเวอร์คุณสามารถใช้RegisterStartupScript:

ClientScript.RegisterStartupScript(GetType(),"id","callMyJSFunction()",true);

หากคุณต้องการส่งค่าเป็นพารามิเตอร์

string jsFunc = "myFunc(" + MyBackValue + ")";
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "myJsFn", jsFunc, true);

อีกสิ่งที่คุณสามารถทำได้คือสร้างตัวแปรเซสชันที่ได้รับการตั้งค่าในโค้ดด้านหลังแล้วตรวจสอบสถานะของตัวแปรนั้นแล้วเรียกใช้จาวาสคริปต์ของคุณ สิ่งที่ดีคือสิ่งนี้จะช่วยให้คุณเรียกใช้สคริปต์ของคุณได้ตรงจุดที่คุณต้องการแทนที่จะต้องคิดออกหากคุณต้องการให้มันรันใน DOM หรือทั่วโลก

บางสิ่งเช่นนี้: โค้ดที่อยู่เบื้องหลัง:

Session["newuser"] = "false" 

ในจาวาสคริปต์

var newuser = '<%=Session["newuser"]%>';
 if (newuser == "yes")
     startTutorial();  

คุณไม่สามารถ. Codebehind กำลังทำงานบนเซิร์ฟเวอร์ในขณะที่จาวาสคริปต์ทำงานบนไคลเอนต์

อย่างไรก็ตามคุณสามารถเพิ่มลง<script type="text/javascript">someFunction();</script>ในเอาต์พุตของคุณและทำให้ฟังก์ชัน JS ถูกเรียกเมื่อเบราว์เซอร์วิเคราะห์มาร์กอัพของคุณ

คุณสามารถใช้ตัวอักษร:

this.Controls.Add(new LiteralControl("<script type='text/javascript'>myFunction();</script>"));

IIRC Code Behind ถูกคอมไพล์เซิร์ฟเวอร์และจาวาสคริปต์ถูกตีความฝั่งไคลเอ็นต์ ซึ่งหมายความว่าไม่มีการเชื่อมโยงโดยตรงระหว่างสอง

สิ่งที่คุณสามารถทำได้คือให้ลูกค้าและเซิร์ฟเวอร์สื่อสารผ่านเครื่องมือที่เรียกว่า AJAX http://en.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML

ลองสิ่งนี้ใน Code Behind และจะได้ผล 100%

เขียนบรรทัดของโค้ดนี้ลงในไฟล์ Code Behind

string script = "window.onload = function() { YourJavaScriptFunctionName(); };";
ClientScript.RegisterStartupScript(this.GetType(), "YourJavaScriptFunctionName", script, true);

และนี่คือหน้าเว็บฟอร์ม

<script type="text/javascript">
    function YourJavaScriptFunctionName() {
        alert("Test!")
    }
</script>

ScriptManager.RegisterStartupScript(this, this.Page.GetType(),"updatePanel1Script", "javascript:ConfirmExecute()",true/>

ตัวอย่างการทำงาน: _

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage2.Master" AutoEventWireup="true" CodeBehind="History.aspx.cs" Inherits="NAMESPACE_Web.History1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>


 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

        <script type="text/javascript">

            function helloFromCodeBehind() {
                alert("hello!")
            }


        </script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

 <div id="container"  ></div>

</asp:Content>

รหัสเบื้องหลัง

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace NAMESPACE_Web
{
    public partial class History1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            ScriptManager.RegisterStartupScript(this, GetType(), "displayalertmessage", "helloFromCodeBehind()", true);
        }

    }
}

ข้อผิดพลาดที่เป็นไปได้: -

1. รหัสและ HTML อาจไม่อยู่ในเนมสเปซเดียวกัน
2. CodeBehind="History.aspx.cs" กำลังชี้ไปที่หน้าผิด
3. ฟังก์ชัน JS กำลังมีข้อผิดพลาด

ฉันสังเกตเห็นคำตอบมากมายที่นี่ใช้อยู่ScriptManager.RegisterStartupScriptและหากคุณกำลังจะทำเช่นนั้นนั่นไม่ใช่วิธีที่ถูกต้องที่จะทำ ScriptManager.RegisterScriptBlock([my list of args here])วิธีที่ถูกต้องคือการใช้งาน เหตุผลที่เป็นคือคุณควรจะใช้ RegisterStartupScript เมื่อหน้าของคุณโหลด (ดังนั้นชื่อ RegisterStartupScript)

ใน VB.NET:

ScriptManager.RegisterClientScriptBlock(Page, GetType(String), "myScriptName" + key, $"myFunctionName({someJavascriptObject})", True)

ใน C #:

ScriptManager.RegisterClientScriptBlock(Page, typeof(string), "myScriptName" + key, $"myFunctionName({someJavascriptObject})", true);

แน่นอนฉันหวังว่ามันจะไปโดยไม่บอกว่าคุณต้องแทนที่กุญแจด้วยตัวระบุคีย์ของคุณและอาจจะย้ายทั้งหมดนี้เป็น sub / function / method และส่งผ่านคีย์และ someJavascriptObject (ถ้าวิธี javascript ของคุณต้องการให้ arg ของคุณเป็น วัตถุจาวาสคริปต์)

เอกสาร MSDN:

https://msdn.microsoft.com/en-us/library/bb338357(v=vs.110).aspx

ScriptManager.RegisterStartupScript(Page, GetType(), "JavaFunction", "AlertError();", true);

การใช้ฟังก์ชั่นของคุณก็เพียงพอแล้ว

นี่คือวิธีที่ฉันทำ

มาร์กอัป HTML แสดงป้ายกำกับและปุ่มควบคุมมีดังนี้

<body> 
  <form id="form1" runat="server"> 
  <div> 
    <asp:Label ID="lblJavaScript" runat="server" Text=""></asp:Label> 
    <asp:Button ID="btnShowDialogue" runat="server" Text="Show Dialogue" /> 
  </div> 
  </form> 
</body>

ฟังก์ชัน JavaScript อยู่ที่นี่

<head runat="server"> 
  <title>Calling javascript function from code behind example</title> 
  <script type="text/javascript"> 
    function showDialogue() { 
      alert("this dialogue has been invoked through codebehind."); 
    } 
  </script> 
</head>

โค้ดด้านหลังเพื่อเรียกใช้ฟังก์ชัน JavaScript ได้ที่นี่

lblJavaScript.Text = "<script type='text/javascript'>showDialogue();</script>";

มันใช้งานได้สำหรับฉัน

object Json_Object=maintainerService.Convert_To_JSON(Jobitem);
ScriptManager.RegisterClientScriptBlock(this,GetType(), "Javascript", "SelectedJobsMaintainer("+Json_Object+"); ",true);

เนื่องจากฉันไม่พบวิธีแก้ปัญหาที่ใช้รหัสด้านหลังซึ่งรวมถึงการลองClientScriptและScriptManagerชอบ mutanic และ Orlando Herrera กล่าวในคำถามนี้ (พวกเขาทั้งสองล้มเหลว) ฉันจะเสนอโซลูชันส่วนหน้าที่ใช้การคลิกปุ่มกับผู้อื่นหาก พวกเขาอยู่ในตำแหน่งเดียวกันกับฉัน สิ่งนี้ใช้ได้กับฉัน:

HTML Markup:

<asp:button ID="myButton" runat="server" Text="Submit" OnClientClick="return myFunction();"></asp:button>

JavaScript:

function myFunction() {
    // Your JavaScript code
    return false;
}

ฉันเพียงแค่ใช้ปุ่ม ASP.NET ซึ่งใช้OnClientClickคุณสมบัติซึ่งยิงฟังก์ชันการเขียนสคริปต์ฝั่งไคลเอ็นต์ซึ่งเป็น JavaScript สิ่งสำคัญที่ควรทราบที่นี่คือการใช้returnคำสำคัญในการเรียกใช้ฟังก์ชันและในฟังก์ชันเอง ฉันอ่านเอกสารที่ไม่ได้ใช้returnแต่ยังได้รับการคลิกปุ่มเพื่อใช้งาน - อย่างใดมันไม่ทำงานสำหรับฉัน return false;คำสั่งในการทำงานระบุ postback ไม่ควรเกิดขึ้น คุณสามารถใช้คำสั่งนั้นในOnClientClickคุณสมบัติ:OnClientClick="myFunction() return false;"

ฉันใช้ ScriptManager ใน Code Behind และใช้งานได้ดี

ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "CallMyFunction", "confirm()", true);

หากคุณใช้ UpdatePanel ใน ASP Frontend จากนั้นป้อนชื่อ UpdatePanel และ 'ชื่อฟังก์ชัน' ที่กำหนดด้วยแท็กสคริปต์

ขอบคุณ "Liko" เพียงแค่เพิ่มความคิดเห็นในคำตอบของเขา

string jsFunc = "myFunc(" + MyBackValue + ")";
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "myJsFn", jsFunc, true);

เพิ่มเครื่องหมายคำพูดเดี่ยว ( ') ให้กับตัวแปรมิฉะนั้นจะมีข้อความแสดงข้อผิดพลาด:

string jsFunc = "myFunc('" + MyBackValue + "')";

คุณไม่สามารถเรียกฟังก์ชัน Javascript จาก CodeBehind ได้เนื่องจากไฟล์ CodeBehind มีรหัสที่ประมวลผลด้านเซิร์ฟเวอร์บนเว็บเซิร์ฟเวอร์ รหัส Javascript ทำงานในเว็บเบราว์เซอร์ในฝั่งไคลเอ็นต์

คุณสามารถสัมผัส C # วิธีการบนหน้า codebehind จะเป็น callable ผ่าน JavaScript โดยใช้แอตทริบิวต์ ScriptMethod

คุณไม่สามารถเรียกจาวาสคริปต์จาก CodeBehind ได้รหัสนั้นมีอยู่บนไคลเอนต์เท่านั้น