如何从客户端JavaScript函数调用服务器方法背后的代码?

我在ASPX页面中有一个HTMLbutton点击事件的JavaScript函数。 而在其代码页面中的一个服务器方法。 现在我只想在用户点击HTMLbutton的时候,用一些参数从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 } 

是的,你可以做一个networking方法,如..

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

在我的项目中,我们通常这样调用服务器端方法:

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

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

阿贾克斯是要走的路。 最简单的(也许是最好的)方法是jQuery ajax()

你最终会写这样的东西:

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

我必须注册我的buttonid作为postbacktrigger …

 RegisterPostbackTrigger(idOfButton) 
 // 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 } 

尝试创build一个新的服务,并调用它。 处理可以在那里完成,然后返回。

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

在我看来,user1965719提出的解决scheme真的很高雅。 在我的项目中,所有进入包含div的对象都是dynamic创build的,所以添加额外的隐藏button是一件轻而易举的事情:

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

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