Chamando a função JavaScript do CodeBehind

150

Alguém pode fornecer bons exemplos de como chamar uma função JavaScript From CodeBehind e vice-versa?

ssmsnet
fonte
Aqui está um artigo detalhado codepedia.info/… usando com e sem o Ajax Update Panel
Satinder singh

Respostas:

206

Você pode tentar o seguinte:

Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","MyFunction()",true);
mutânico
fonte
41
Eu iria para o ScriptManager.RegisterStartupScript (Page, typeof (Page), "somekey", script, true); abordagem. Também funciona durante postagens parciais.
Rdmptn
10
1. Às vezes Page.ClientScript.RegisterClientScriptBlocké necessário, em vez disso, consulte esta postagem para obter informações . 2. Vale ressaltar que, para que MyFunction () funcione, MyFunction () deve ser definido antes das tags de formulário ou dentro delas, mas NÃO após a tag final </form> (caso contrário, ocorrerá um erro de objeto esperado ocorrer)
BornToCode
2
ScriptManager.RegisterStartupScript(this.Page, typeof(Page), "text", "openDep()", true);trabalho. this.GetType()lança um erro para mim.
SearchForKnowledge
2
Isso não funciona quando o código envolvido com um asp:UpdatePanele escrito em um evento de botão. O que faz com que a página seja postada.
Senura Dissanayake
52

C # para JavaScript: você pode registrar o bloco de scripts para executar na página da seguinte maneira:

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

substitua a alert()peça pelo nome da sua função.

Para chamar o método C # do JavaScript, você pode usar ScriptManagerou jQuery. Eu pessoalmente uso jQuery. Você precisa decorar o método que deseja chamar do JavaScript com WebMethodatributo. Para obter mais informações sobre como chamar o método C # (chamado PageMethod), jQueryconsulte a publicação de Dave Ward .

TheVillageIdiot
fonte
51

Chamando uma Função JavaScript do Código Atrás

Etapa 1 Adicione seu código Javascript

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

Etapa 2 Adicione 1 Gerenciador de scripts no seu formulário da web e adicione o botão 1 também

Etapa 3 Adicione este código ao evento de clique no botão

ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "Func()", true);
Orlando Herrera
fonte
Ao tentar fazer isso quando uma linha do GridView é clicada, ela funciona apenas quando usada ScriptManagercomo nesta resposta, não Page.ClientScriptcomo em outras respostas. Pode estar relacionado ao asp:UpdatePanelcomentário na resposta aceita.
Chris
16

Você não pode fazer isso diretamente. Nas WebForms padrão, o JavaScript é interpretado pelo navegador e C # pelo servidor. O que você pode fazer para chamar um método do servidor usando JavaScript é.

Como isso:

Passo 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 
    }

Etapa 2: Adicionando um ScriptManagernoPage

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

Etapa 3: Chamando o método usando JavaScript

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

Dê uma olhada neste link.

Para chamar uma função JavaScript do servidor, você pode usar RegisterStartupScript:

ClientScript.RegisterStartupScript(GetType(),"id","callMyJSFunction()",true);
Vismari
fonte
Onde você coloca a etapa um na hierarquia de arquivos do MVC 3?
25413 Rob
@Rob A GetProducts()função é apenas uma função de code-behind que residia em um controlador em um aplicativo MVC; portanto, as tags ficam no topo de qualquer função que você deseja colocar em um controlador que você pretenderia chamar de JavaScript .
vapcguy
15

Se você precisar enviar um valor como parâmetro.

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

Outra coisa que você pode fazer é criar uma variável de sessão que seja definida no código por trás e, em seguida, verificar o estado dessa variável e, em seguida, executar seu javascript. O bom é que isso permitirá que você execute seu script exatamente onde deseja, em vez de precisar descobrir se deseja que ele seja executado no DOM ou globalmente.

Algo assim: Código por trás:

Session["newuser"] = "false" 

Em javascript

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

Você não pode. O Codebehind está em execução no servidor enquanto o JavaScript está em execução no cliente.

No entanto, você pode adicionar <script type="text/javascript">someFunction();</script>à sua saída e, assim, fazer com que a função JS seja chamada quando o navegador estiver analisando sua marcação.

ThiefMaster
fonte
65
"Você não pode. Mas aqui está como você faz."
3
Eu não consideraria isso chamar um método a partir do código do servidor, pois você não tem uma maneira real de obter um valor de retorno ou especificar um retorno de chamada.
ThiefMaster
8
Ah, claro que você pode. Você pode chamar um postback do seu javascript ou AJAX de qualquer coisa. Pensei que era engraçado; Eu costumo fazer a mesma coisa - "Não, isso é impossível. Ninguém iria querer fazer isso se pudesse." alguns minutos depois, "aqui está como vamos fazer isso".
7

Você pode usar literal:

this.Controls.Add(new LiteralControl("<script type='text/javascript'>myFunction();</script>"));
Dilip Kumar Yadav
fonte
1
Mas isso não apenas adiciona um script à memória, mas também não o executa?
Fandango68
5

O IIRC Code Behind é compilado no servidor e o javascript é interpretado no lado do cliente. Isso significa que não há vínculo direto entre os dois.

Por outro lado, o que você pode fazer é que o cliente e o servidor se comuniquem através de uma ferramenta bacana chamada AJAX. http://en.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML

Berry Ligtermoet
fonte
5

Experimente isto no Code Behind e funcionará 100%

Escreva esta linha de código no arquivo Code Behind

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

E esta é a página do formulário da web

<script type="text/javascript">
    function YourJavaScriptFunctionName() {
        alert("Test!")
    }
</script>
Chandan Kumar
fonte
4
ScriptManager.RegisterStartupScript(this, this.Page.GetType(),"updatePanel1Script", "javascript:ConfirmExecute()",true/>
Apps Tawale
fonte
8
Adicione um pouco de explicação
ketan
4

Exemplo de trabalho: _

<%@ 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>

Código por trás

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);
        }

    }
}

Possíveis armadilhas: -

  1. Código e HTML podem não estar no mesmo espaço para nome
  2. CodeBehind="History.aspx.cs" está apontando para a página errada
  3. Função JS está tendo algum erro
Hitesh Sahu
fonte
3

Tenho notado que muitas das respostas aqui estão sendo usadas ScriptManager.RegisterStartupScripte, se você quiser fazer isso, não é o caminho certo. O caminho certo é usar ScriptManager.RegisterScriptBlock([my list of args here]). O motivo é que você só deve usar o RegisterStartupScript quando a página carregar (daí o nome RegisterStartupScript).

No VB.NET:

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

em c #:

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

Claro, espero que seja desnecessário dizer que você precisa substituir key pelo seu identificador de chave e provavelmente deve mover tudo isso para uma sub / function / method e passar key e someJavascriptObject (se o seu método javascript exigir que seu arg seja um objeto javascript).

Documentos do MSDN:

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

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

usar sua função é suficiente

rei sádico
fonte
2
Você pode explicar sua resposta um pouco mais?
maxpaj
1
O que é esse parâmetro "JavaFunction"? Podemos adicionar alguma coisa? O que precisa ter nesse argumento?
Senura Dissanayake
1
@SenuraDissanayake É um título - sim, pode ser qualquer coisa e realmente não importa.
vapcguy
2

Foi assim que eu fiz.

A marcação HTML mostrando um controle de rótulo e botão é a seguinte.

<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>

A função JavaScript está aqui.

<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>

O código para trás para acionar a função JavaScript está aqui.

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

isso funciona para mim

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

Como não consegui encontrar uma solução com código atrasado, que inclui tentar o ClientScripteScriptManager como mutanic e Orlando Herrera disse nesta questão (ambos de alguma forma falhou), vou oferecer uma solução front-end que utiliza cliques de botão para outros se eles estão na mesma posição que eu. Isso funcionou para mim:

Marcação HTML:

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

JavaScript:

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

Estou simplesmente usando um botão ASP.NET que utiliza a OnClientClickpropriedade, que aciona funções de script do lado do cliente, que é JavaScript. As principais coisas a serem observadas aqui são os usos da returnpalavra - chave na chamada da função e na própria função. Eu li documentos que não usam, returnmas ainda assim clicam no botão para funcionar - de alguma forma, não funcionou para mim. A return false;instrução na função especifica que um postback NÃO deve acontecer. Você também pode usar essa declaração na OnClientClickpropriedade:OnClientClick="myFunction() return false;"

Max Voisard
fonte
0

Eu usei o ScriptManager no Code Behind e funcionou bem.

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

Se você estiver usando o UpdatePanel no ASP Frontend. Em seguida, digite o nome UpdatePanel e 'nome da função' definido com as tags de script.

Ravi Agrawal
fonte
0

Obrigado "Liko", basta adicionar um comentário à sua resposta.

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

Adicionadas aspas simples ( ') à variável, caso contrário, será exibida uma mensagem de erro:

string jsFunc = "myFunc('" + MyBackValue + "')";
Stephen
fonte
-1

Você não pode chamar uma função Javascript do CodeBehind, porque o arquivo CodeBehind contém o código que executa o lado do servidor no servidor web. O código Javascript é executado no navegador da Web no lado do cliente.

Charlie Kilian
fonte
1
Você não pode chamar uma função javascript diretamente como em myCoolJavascriptFunction (javascriptFunctionArgs); no servidor, mas você pode chamar uma função javascript a partir do código exibido em uma página WebForms.
Cr1pto
concordado com cloudstrifebro
Khurram Ishaque 11/07/19
-1

Você pode expor os métodos C # nas páginas de código atrás para serem chamados via JavaScript usando o atributo ScriptMethod .

Você não pode chamar JavaScript de um CodeBehind - esse código existe apenas no cliente.

Josh Kodroff
fonte