如何從客戶端 JavaScript function 調用服務器方法背后的代碼？

Question

我有一個 JavaScript function 用於 ASPX 頁面中的 HTML 按鈕單擊事件。 並且在其代碼背后的頁面中有一個服務器方法。 現在我想從 JavaScript function 調用服務器方法，僅當用戶單擊 HTML 按鈕時才使用一些參數。

請不要更改此方案，也不要在回復時在 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    
}

Answer 1

是的，您可以制作 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>

Answer 2

在我的項目中，我們通常這樣調用服務器端方法：

在 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)
{

}

Answer 3

如果您不想使用 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

Answer 4

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

Answer 5

我必須將我的 buttonid 注冊為回發觸發器...

RegisterPostbackTrigger(idOfButton)

Answer 6

在我看來，user1965719 提出的解決方案確實很優雅。 在我的項目中，進入包含 div 的所有對象都是動態創建的，因此添加額外的隱藏按鈕是輕而易舉的事：

asp代碼：

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

Answer 7

Ajax 是通往 go 的方式。 最簡單（可能也是最好）的方法是jQuery ajax()

你最終會寫出這樣的東西：

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

Answer 8

嘗試創建一個新服務並調用它。 處理可以在那里完成，然后返回。

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 9

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