如何从客户端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(); }