Cómo llamar a código detrás método de servidor desde un lado del cliente JavaScript función?

Question

estoy teniendo una función de JavaScript para un evento de clic de botón HTML en la página ASPX. Y un método de servidor en su código detrás de la página. Ahora quiero llamar al método del servidor de la función JavaScript con algunos parámetros sólo cuando el botón se hace clic en HTML por el usuario.

Por favor, no cambiar este escenario y también no utilizar ningún contols ASP.NET en la página aspx al responder. Porque solo se permiten controles HTML. Puede alguien ayudarme con esto ?. Gracias por adelantado. Esperando ansiosamente las respuestas.

Aquí está el código,

Código en el marcado:

<script language="javascript" type="text/javascript"> 
    function btnAccept_onclick() {   
     var name;    
     name = document.getElementById('txtName').value; 

     // Call Server side method SetName() by passing this parameter 'name' 
</script> 

<input type="button" id="btnAccept" value="Accept" onclick="return btnAccept_onclick()" /> 

de código subyacente:

public void SetName(string name) 
{ 
    // Code for some functionality  
} 

Answer 1

Si no desea utilizar ajax de

Code behind 

void myBtn_Click(Object sender,EventArgs e) 
{ 
    //SetName(name); your code 
} 


.aspx file 

<script language="javascript" type="text/javascript"> 
    function btnAccept_onclick() {   
     var name;    
     name = document.getElementById('txtName').value; 
     document.getElementById('callserver').click(); 
     // Call Server side method SetName() by passing this parameter 'name' 
</script> 


<div style="dispaly:none;"> 
    <input type="button" id="callserver" value="Accept" click="myBtn_Click" runat="server" /> 
</div> 
<input type="button" id="btnAccept" value="Accept" onclick="return btnAccept_onclick()" /> 

o usa el método de la página

.cs file 
[ScriptMethod, WebMethod] 

    public static string docall() 
    { 
     return "Hello"; 
    } 

.aspx file 

<script type="text/javascript"> 
     function btnAccept_onclic() { 
      PageMethods.docall(onSuccess, onFailure); 
     } 

    function onSuccess(result) { 
      alert(result); 
     } 


     function onFailure(error) { 
      alert(error); 
     } 

</script> 

cheque esto: http://blogs.microsoft.co.il/blogs/gilf/archive/2008/10/04/asp-net-ajax-pagemethods.aspx

Answer 2

Sí, se puede hacer un método web como ..

[WebMethod] 
public static String SetName(string name) 
{ 
    return "Your String" 
} 

Y entonces lo llaman en JavaScript como,

PageMethods.SetName(parameterValueIfAny, onSuccessMethod,onFailMethod); 

Este es también se requiere:

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

Answer 3

Ajax es el camino a seguir. El (y probablemente el mejor) enfoque más sencillo es jQuery ajax()

Usted va a terminar de escribir algo como esto:

$.ajax({ 
    url: "test.html", 
    context: document.body, 
    success: function(){ 
    // do something when done 
    } 
}); 

Answer 4

// include jquery.js 
//javascript function 
var a1="aaa"; 
var b1="bbb"; 
         **pagename/methodname**  *parameters* 
CallServerFunction("Default.aspx/FunPubGetTasks", "{a:'" + a1+ "',b:'" + b1+ "'}", 
      function(result) 
      { 

      } 
); 
function CallServerFunction(StrPriUrl,ObjPriData,CallBackFunction) 
{ 

    $.ajax({ 
     type: "post", 
     url: StrPriUrl, 
     contentType: "application/json; charset=utf-8", 
     data: ObjPriData, 
     dataType: "json", 
     success: function(result) 
     { 
      if(CallBackFunction!=null && typeof CallBackFunction !='undefined') 
      { 
       CallBackFunction(result); 
      } 

     }, 
     error: function(result) 
     { 
      alert('error occured'); 
      alert(result.responseText); 
      window.location.href="FrmError.aspx?Exception="+result.responseText; 
     }, 
     async: true 
    }); 
} 

//page name is Default.aspx & FunPubGetTasks method 
///your code behind function 
    [System.Web.Services.WebMethod()] 
     public static object FunPubGetTasks(string a, string b) 
     { 
      //return Ienumerable or array 
     } 

Answer 5

intente crear un nuevo servicio y llamarlo. El procesamiento se puede hacer allí y regresar.

http://code.msdn.microsoft.com/windowsazure/WCF-Azure-AJAX-Calculator-4cf3099e

function makeCall(operation){ 
    var n1 = document.getElementById("num1").value; 
    var n2 = document.getElementById("num2").value; 
if(n1 && n2){ 

     // Instantiate a service proxy 
     var proxy = new Service(); 

     // Call correct operation on vf cproxy  
     switch(operation){ 

      case "gridOne": 
       proxy.Calculate(AjaxService.Operation.getWeather, n1, n2, 
onSuccess, onFail, null); 

****HTML CODE**** 
<p>Major City: <input type="text" id="num1" onclick="return num1_onclick()" 
/></p> 
<p>Country: <input type="text" id="num2" onclick="return num2_onclick()" 
/></p> 
<input id="btnDivide" type="button" onclick="return makeCall('gridOne');" 

Answer 6

tuve que registrar mi buttonid como postbacktrigger ...

RegisterPostbackTrigger(idOfButton) 

Answer 7

En mis proyectos, que se suele llamar el método del lado del servidor como esto:

en JavaScript: control lateral

document.getElementById("UploadButton").click(); 

Servidor:

<asp:Button runat="server" ID="UploadButton" Text="" style="display:none;" OnClick="UploadButton_Click" /> 

C#:

protected void Upload_Click(object sender, EventArgs e) 
{ 

} 

Answer 8

En mi opinión, la solución propuesta por user1965719 es realmente elegante. En mi proyecto, todos los objetos que entran a la div que contiene se crea de forma dinámica, por lo que añadir el botón extra oculto es una brisa:

código aspx:

<asp:Button runat="server" id="btnResponse1" Text="" 
    style="display: none; width:100%; height:100%" 
    OnClick="btnResponses_Clicked" /> 

    <div class="circlebuttontext" id="calendarButtonText">Calendar</div> 
</div>  

C# código detrás:

protected void btnResponses_Clicked(object sender, EventArgs e) 
{ 
    if(sender == btnResponse1) 
    { 
     //Your code behind logic for that button goes here 
    } 
} 

Answer 9

Código JS:

<script type="text/javascript"> 
     function ShowCurrentTime(name) { 
     PageMethods.GetCurrentTime(name, OnSuccess); 
     } 
     function OnSuccess(response, userContext, methodName) { 
      alert(response); 
     } 
</script> 

HTML Code:

<asp:ImageButton ID="IMGBTN001" runat="server" ImageUrl="Images/ico/labaniat.png" 
class="img-responsive em-img-lazy" OnClientClick="ShowCurrentTime('01')" /> 

código subyacente de C#

[System.Web.Services.WebMethod] 
public static string GetCurrentTime(string name) 
{ 
    return "Hello " + name + Environment.NewLine + "The Current Time is: " 
      + DateTime.Now.ToString(); 
}