Как вызвать код позади серверного метода из функции JavaScript на стороне клиента?

Question

У меня есть функция JavaScript для события нажатия кнопки HTML на странице ASPX. И метод сервера в его коде за страницей. Теперь я хочу вызывать метод сервера из функции JavaScript с некоторыми параметрами, только когда пользователь нажимает кнопку HTML.

Пожалуйста, не меняйте этот сценарий, а также не используйте какие-либо элементы управления asp.net на странице aspx при ответе. Потому что только 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

Да, вы можете создать веб-метод, например ..

[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 как postbacktrigger ...

RegisterPostbackTrigger(idOfButton)

Answer 6

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

Аякс - это путь. Самый простой (и, вероятно, лучший) подход - это jQuery ajax ()

В итоге вы напишите что-то вроде этого:

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

Answer 8

На мой взгляд, решение, предложенное пользователем 1965719, действительно элегантно.В моем проекте все объекты, входящие в содержащий 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
    }
}

Answer 9

Попробуйте создать новый сервис и позвонить ему. Обработка может быть выполнена там и возвращена обратно.

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