自定义Javascript Ajax for ASP.NET

我已经编写了一些基本的Javascript函数，并想学习如何使用这个JS代码在C＃4.0 / ASP.net项目中启用异步回发。

例如，我有一个脚本，单击时会增加一个数字。 再次单击时，数字会递减。 我基本上从数据库中加载数字，然后隐藏一个并在点击时显示另一个带有相应的递减数字。 这不是复杂的javascript; 这是一个简单的例子。 现在，当我单击按钮时，我想将此递增/递减调用发送回服务器以更新数据库的编号。

我意识到我可以使用AJAX Control Toolkit的切换按钮完成类似于此示例的操作。 但是，我想知道如何使用我的OWN javascript来创建AJAXfunction。

如何使用C＃和我的自定义Javascript代码完成此操作？

我并不反对使用ASP.net AJAX库，我只是不想使用现成的控件。 我想学习创建自己的AJAXfunction的过程。 我认为我将不得不使用asp:UpdatePanel ，但我不知道如何从客户端调用C＃函数。

我的javascript不是jQuery，事实上我想要与jQuery无关，直到我了解更多关于javascript和这个过程。

Answer 1

没有UpdatePanel的简单：

首先，为项目添加一个通用处理程序（.ashx）。 这将充当我们的Http端点。 我们的javascript会调用它。 我们可以（也可能应该）使用Web服务端点，但这需要处理响应并使示例复杂化。 处理程序返回纯文本。

 <%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; public class Handler : IHttpHandler { // We'll use a static var as our "database". // Feel free to add real database calls to the increment // and decrement actions below. static int TheNumber = 0; public void ProcessRequest(HttpContext context) { string action = context.Request.QueryString["action"]; if (!string.IsNullOrEmpty(action)) { if (action == "increment") TheNumber++; //database update and fetch goes here else if (action == "decrement") TheNumber--; //database update and fetch goes here } context.Response.ContentType = "text/plain"; context.Response.Write(TheNumber); } public bool IsReusable { get { return false; } } } 

接下来，创建您的网页并添加异步javascript。

 <%@ Page Language="C#"%>      
 
 The Number: 0 
 
     
 
   

最后的流程是：

• 网页用户单击调整我们的javascript的递增或递减按钮
• 我们的javascript在查询字符串中向Handler.ashx发送带有所需操作的请求
• Handler.ashx读取查询字符串，递增或递减其静态变量，并返回该值
• 我们的回调接收值并更新我们的UI。

Answer 2

如果您使用UpdatePanel则通过对__doPostBack的JavaScript调用非常简单。 见这里的例子 。

Answer 3

看看有关AJAX的本教程http://www.w3schools.com/Ajax/Default.Asp

它将概述使用JAX使用AJAX获取GET和POST数据。

希望这可以帮助。

Answer 4

这是一个关于如何将ASP.NET C＃与自定义Javascript代码合并的链接。

http://msdn.microsoft.com/en-us/library/bb386450.aspx

它还包含一个示例VS 2010项目： http ： //go.microsoft.com/fwlink/？LinkId = 185646

这里通常是这里发生的事情：

在AjaxIScriptControl解决方案中：

SampleTextBox.cs – 负责在页面上呈现脚本控件; 和客户端javascript代码（js文件）的附件

SampleTextBox.js – 负责客户端function并通过原型生成Javascript控制对象

笔记：

• 此示例利用现有ASP.NET的内置控件（您注意到SampleTextBoxinheritance了Textbox和IScriptControl），但如果inheritanceScriptControl类，则可以呈现任何类型的HTML控件。

• 此解决方案还选择在两个项目中分离脚本控制代码和网站代码，但您可以轻松地将其合并为一个。

• 您可以轻松利用JS文件中的另一个Javascript库

根据我的经验，如果要为您的网站创建可重复使用的控件，这是将服务器端代码与客户端相结合的更优雅方式之一。 您利用服务器端function进行初始渲染，同时通过Javascript提供客户端function。

Answer 5

如果您将C＃函数创建为WCF REST服务或旧式脚本服务 ，则可以使用基本的XmlHttpRequest（无需jQuery或UpdatePanels）轻松地从JavaScript调用服务方法。

这是我放在一起的快速jsFiddle： http ： //jsfiddle.net/ndVeS/

此示例有两个文本框; 在第一个中输入一个值，单击该按钮，然后将该值传递给服务（回显服务）并在回调中返回。 JavaScript代码获取该值并使用它填充第二个文本框。

您可以像这样定义C＃WCF RESTful服务：

 [ServiceContract] public class EchoService : IEchoService { [WebGet(UriTemplate="EchoMe?val={theValue}, ResponseFormat=WebMessageFormat.Json)] public string EchoMe(string theValue) { return theValue; } } 

如果以这种方式处理您的调用，您可以将您的服务逻辑与您的演示文稿（ASPX文件）分开，这样可以更轻松地进行测试，您还可以将构建UI的人员与构建业务function的人员分开。

我不得不承认，在谈到这一点时，我更像是一个jQuery人，但我认为这是一个很好的练习，可以弄清楚XmlHttpRequest是如何工作的。 它让你欣赏jQuery（或类似的框架）提供的东西。

以下是XmlHttpRequest对象及其使用方法的概述： http ： //www.jibbering.com/2002/4/httprequest.html

我希望这有帮助。

Answer 6

 function GetXmlHttpObject(handler) { var objXMLHttp = null if (window.XMLHttpRequest) { objXMLHttp = new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp; 

}

function GetDropDown（）{

 function stateChanged(StatesUpdated) { if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") { document.getElementById('updateplace').innerHTML = xmlHttp.responseText; //"updateplace" is you div id which will hold the new data or new page if (navigator.appName != "Microsoft Internet Explorer") { } } else { //alert(xmlHttp.status); } } xmlHttp = GetXmlHttpObject() if (xmlHttp == null) { alert("Browser does not support HTTP Request"); return; } url = "xyz.aspx" //this might be sent to any post data url = url + "&sid=" + Math.random(); xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET", url, true); xmlHttp.send(null); 

}

使用上面的代码，您可以将数据发送到任何.cs文件，您也可以在其中更改数据并将其加载到将在update div中加载的新页面中，并且该方法应重定向到新的aspx文件。

我希望你有逻辑:)

如果您有任何疑问，请联系我@ [e-mail]

Answer 7

我知道你正在做的不是MVC，但是看一下ASP.NET网站的MVC部分，你会发现很多AJAX调用的例子–MVC不会使用那些可怕的脚本创建。 NET对象。 大多数人可能会使用jQuery – 这是一个开源的JavaScript库，可以插入任何Web应用程序并提供一些非常好的function。

Answer 8

也许你在寻找这个：

function ajaxscript（）{$ .ajax（{type：“POST”，url：| url / methodName |，data：| variable_name |，contentType：“application / json; charset = utf-8”，dataType：“json”，成功：|一些javascript在这里|，错误：|一些javascript在这里|}）;