web-dev-qa-db-fra.com

Comment appeler du code derrière la méthode serveur à partir d'une fonction JavaScript côté client?

Je vais avoir une fonction JavaScript pour un événement de clic de bouton HTML dans la page ASPX. Et une méthode de serveur dans son code derrière la page. Maintenant, je veux appeler la méthode serveur à partir de la fonction JavaScript avec certains paramètres uniquement lorsque l'utilisateur clique sur le bouton HTML. 

Ne changez pas ce scénario et n'utilisez aucun contrôle asp.net dans la page aspx lors de la réponse. Parce que seuls les contrôles HTML sont autorisés. Quelqu'un peut-il m'aider à ce sujet? Merci d'avance. Attend avec impatience les réponses.

Voici le code,

Code dans le balisage:

<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()" />

Code-behind:

public void SetName(string name)
{
    // Code for some functionality    
}
c#javascript.netasp.net
35
A. Sam John Christopher

Oui, vous pouvez créer une méthode Web telle que ..

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

Et puis appelez-le en JavaScript comme,

PageMethods.SetName(parameterValueIfAny, onSuccessMethod,onFailMethod);

Ceci est également requis:

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

Dans mes projets, nous appelons généralement la méthode côté serveur comme ceci:

en JavaScript:

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

Contrôle côté serveur:

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

C #:

protected void Upload_Click(object sender, EventArgs e)
{

}
24
user1965719

Si vous ne voulez pas utiliser ajax que

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()" />

ou utiliser la méthode de la page

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

vérifier ceci: http://blogs.Microsoft.co.il/blogs/gilf/archive/2008/10/04/asp-net-ajax-pagemethods.aspx

6
Pranay Rana

Je devais enregistrer mon bouton en tant que postbacktrigger ...

RegisterPostbackTrigger(idOfButton)
1
rainhider

Ajax est la voie à suivre. La méthode la plus simple (et probablement la meilleure) est jQuery ajax ()

Vous finirez par écrire quelque chose comme ceci:

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    // do something when done
  }
});
1
Bazzz
// 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   
        }
1
Sai Sherlekar

Code JS:

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

Code HTML:

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

Code Derrière C #

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

A mon avis, la solution proposée par user1965719 est vraiment élégante. Dans mon projet, tous les objets entrant dans la div qui les contient sont créés dynamiquement. L'ajout du bouton caché supplémentaire est donc un jeu d'enfant:

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

Code C # derrière:

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

Essayez de créer un nouveau service et de l'appeler. Le traitement peut être effectué sur place et renvoyé.

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');"
0
Tequila