web-dev-qa-db-ja.com

クライアント側のJavaScript関数からサーバーメソッドの背後にあるコードを呼び出す方法

ASPXページのHTMLボタンクリックイベント用のJavaScript関数があります。また、コードビハインドページのサーバーメソッド。ここで、ユーザーがHTMLボタンをクリックしたときにのみ、いくつかのパラメーターを使用してJavaScript関数からサーバーメソッドを呼び出します。

このシナリオを変更しないでください。また、返信中にaspxページでasp.netコンソールを使用しないでください。 HTMLコントロールのみが許可されているためです。誰でもこれで私を助けることができますか？前もって感謝します。熱心に答えを待っています。

コードは次のとおりです。

マークアップのコード：

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

コードビハインド：

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

はい、次のようなWebメソッドを作成できます。

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

そして、次のようなJavaScriptで呼び出します。

PageMethods.SetName(parameterValueIfAny, onSuccessMethod,onFailMethod);

これも必要です：

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

私のプロジェクトでは、通常、次のようにサーバー側のメソッドを呼び出します。

javaScriptで：

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

サーバー側の制御：

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

C＃：

protected void Upload_Click(object sender, EventArgs e)
{

}
24
user1965719

あなたがajaxを使用したくない場合

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

またはページ方式を使用

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

これを確認してください： http://blogs.Microsoft.co.il/blogs/gilf/archive/2008/10/04/asp-net-ajax-pagemethods.aspx

6
Pranay Rana

Buttonidをポストバックトリガーとして登録する必要がありました...

RegisterPostbackTrigger(idOfButton)
1
rainhider

Ajaxが道です。最も簡単な（そしておそらく最良の）アプローチは jQuery ajax（） です。

あなたはこのようなものを書くことになります：

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

JSコード：

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

HTMLコード：

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

コードビハインド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

私の意見では、user1965719によって提案されたソリューションは本当にエレガントです。私のプロジェクトでは、含むdivに入るすべてのオブジェクトが動的に作成されるため、追加の非表示ボタンを追加するのは簡単です。

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＃コードビハインド：

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

新しいサービスを作成して呼び出してみてください。処理はそこで行われ、返されます。

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