C# ASP.NET的自定义Javascript Ajax

C# ASP.NET的自定义Javascript Ajax,c#,javascript,C#,Javascript,我已经编写了一些基本的Javascript函数,并想学习如何使用此JS代码在C#4.0/ASP.net项目中启用异步回发 例如,我有一个脚本,在单击时递增一个数字。再次单击时,数字将递减。我基本上是从数据库中加载数字,然后隐藏一个,然后单击显示另一个带有相应递减数字的数字。这不是复杂的javascript;这是一个简单的例子。现在,当我单击按钮时,我想将这个递增/递减调用发送回服务器,以更新数据库的编号 我意识到我可以使用AJAX控件工具包的切换按钮完成类似于本例的事情。一、 但是,我想知道如何

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

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

我意识到我可以使用AJAX控件工具包的切换按钮完成类似于本例的事情。一、 但是,我想知道如何使用我自己的javascript创建AJAX功能

如何使用C#和自定义Javascript代码实现这一点

我并不反对使用ASP.net AJAX库,我只是不想使用现成的控件。我想学习创建自己的AJAX功能的过程。我假设我必须使用
asp:UpdatePanel
,但我不知道如何从客户端调用C#函数


我的javascript不是jQuery,事实上,在我进一步了解javascript和这个过程之前,我不想与jQuery有任何关系。

如果您使用
更新面板
,只需调用
\u doPostBack
的javascript即可。请参阅。

了解有关AJAX的本教程

它将向您概述如何使用Javascript使用AJAX获取和发布数据


希望这能有所帮助。

这里有一个链接,介绍如何将ASP.NET C#与自定义Javascript代码结合起来

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

此处还包含一个VS 2010项目示例:

下面是这里发生的一般情况:

AjaxIScriptControl解决方案中:

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

SampleTextBox.js-负责客户端功能,并通过原型生成Javascript控制对象

注意事项:

  • 此示例利用了现有的 ASP.NET的内置控件(您可以 注意SampleTextBox继承了Textbox 和IScriptControl)但您可以 如果需要,呈现任何类型的HTML控件 您继承了ScriptControl类 相反

  • 这个解决方案也选择了分离 脚本控制代码和网站 在两个项目中编写代码,但您可以 很容易把它做成一个

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

根据我到目前为止的经验,如果您要为您的网站创建可重用的控件,那么这是将服务器端代码与客户端代码结合起来的一种更优雅的方式。您可以利用服务器端的功能进行初始渲染,同时通过Javascript提供客户端功能。

如果您将C#函数创建为或更早的样式,那么您可以使用基本的XmlHttpRequest(无需jQuery或UpdatePanel)从Javascript轻松调用服务方法

<%@ Page Language="C#"%>
<html>
<head runat="server">    
    <script type="text/javascript">
    // An XMLHttpRequest object is required to make HTTP requests.
    // Try a couple instantiation strategies to handle different
    // browser implementations.
    function createXMLHttpRequest() {
        try { return new XMLHttpRequest(); } catch (e) { }
        try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { }
        try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { }
        alert("XMLHttpRequest not supported");
        return null;
    }

    function callHandler(action) {
        var xmlHttpReq = createXMLHttpRequest();
        // We're interested in an asychronous request so we define a 
        // callback function to be called when the request is complete.
        xmlHttpReq.onreadystatechange = function () {
            if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)
                document.getElementById("<%= lbl.ClientID%>").innerHTML 
                    = xmlHttpReq.responseText;
        }
        xmlHttpReq.open("GET", "Handler.ashx?action=" + action, true);
        xmlHttpReq.send(null);
    }  
    </script>
</head>
<body>
    <form id="Form1" runat="server">
    <div>
    The Number:&nbsp;<Label runat="server" id="lbl">0</Label>
    </div>
    <div>
        <asp:Button ID="Button1" runat="server" Text="Increment" 
            OnClientClick="callHandler('increment');return false;" />
        &nbsp;
        <asp:Button ID="Button2" runat="server" Text="Decrement" 
            OnClientClick="callHandler('decrement');return false;" />
    </div>
    </form>
</body>
</html>
下面是我总结的一个简单的JSFIDE:

此示例有两个文本框;在第一个中输入一个值,单击按钮,然后将该值传递给服务(echo服务)并在回调中返回。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的人员与构建业务功能的人员的职责分开

我必须承认,在这个问题上,我更喜欢jQuery,但我认为这是一个很好的练习,可以了解XmlHttpRequest在幕后是如何工作的。它使您了解jQuery(或类似框架)提供的功能

下面是对XmlHttpRequest对象以及如何使用它的一个很好的概述:

我希望这有帮助

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

函数GetDropDown(){

}

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

我希望你明白逻辑:)


如果您有任何疑问,请联系我@sankalpa。sam@gmail.com

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

也许你正在寻找:

函数ajaxscript(){ $.ajax({ 类型:“POST”, url:| url/methodName |, 数据:|变量|名称|, contentType:“应用程序/json;字符集=utf-8”, 数据类型:“json”, 成功:|这里有一些javascript |, 错误:|这里有一些javascript|
});

简单无需更新面板:

首先,向您的项目(.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; } }
}

使用制度;
使用System.Web;
公共类处理程序:IHttpHandler
{
//我们将使用静态变量作为“数据库”。
//可以随意向增量中添加真实的数据库调用
//以及下面的减量操作。
静态int-TheNumber=0;
公共void ProcessRequest(HttpContext上下文)
{       
字符串操作=con