对服务器端事件的JavaScript调用

所以我已经有一段时间没有做任何ASP.net了，我试图调用一些javascript验证，这很有效，然后我需要调用一个代码隐藏事件

我原以为这会很容易，但结果却成了一件令人讨厌的事

我所要做的就是检查文本框是否为空，如果为空，则发出警报并不运行任何服务端方法，如果不为空，则运行方法

不介意更改代码（尽管必须继续使用页面和内容部分）

函数验证（）{
var jname=document.getElementById（'MainContent\u txtname'）。值；
if（jname==null）{
警报（“请输入名称”）；
}
否则{
CallServerMethod（）；
}
}
函数CallServerMethod（）{
UpdateClient（）//我不工作
}

有什么想法吗？

---

谢谢

这个网站上有大量关于这个主题的信息

---

这是一个很好的开始：

您可以使用Ajax调用服务器页面（一个aspx页面/.ashx处理程序）来实现这一点。 这就是使用jQuery的方法（如果您已经在项目中使用了它）

在

yourserverpage.aspx

文件中，您可以从请求参数中读取名称键值，执行希望执行的服务器代码，并使用Response.Write（）方法返回某些内容

---

例如：

Response.Write（“用户保存”）
您需要的是ajax。
更简单的方法是使用jquery，它有一个$.get或$.getJSON或$.ajax方法包装xmlhttprequest（用于从javascript调用服务器方法的对象）

另一个简单的方法是研究WebMethod。您需要为服务器端方法设置
[WebMethod]
属性，向aspx页面添加脚本管理器，然后使用PageMethods.MyServerMethod调用服务器方法

$.ajax({
    type: "POST",
    url: "mypage.aspx/ServerMethodName",    
    data: '{"id":"' + $("#divID").text() + '"}',        
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (returnValueFromServerMethod) {
        if(returnValueFromServerMethod.d != "")
            //do something great

    }
});

[WebMethod]
public static string ServerMethodName(string id)
{
    HttpContext.Current.Session["ID"] = id;            
}

您需要在page.aspx中添加脚本管理器以启用页面方法

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">                    
</asp:ScriptManager>



您可以使用更干净的service.svc替换页面方法

function validate(){
    var jname = document.getElementById("MainContent_txtname').value;

    if(jname.length == 0){
        alert("Empty text field");
    }else{
        CallServerMethod(jname);
    }
}
function CallServerMethod(param){
    var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //we have an xmlhttp object
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            var response = xmlhttp.responseText;
            UpdateClient(response);         
        }
    }
    xmlhttp.open("GET","server_page.php?jname="+param,true);
    xmlhttp.send();
}
function UpdateClient(response){
    alert("Server responded with response: "+response);
}

然后将validate设置为onChange事件。所以….

显然，server_page.php也可以是server_page.asp或其他任何东西，参数只是GET请求中编码的URL。您也可以使用post请求发送它，但这需要更多的工作

//in the last part of CallServerMethod(),
//replace the last 2 lines with:
xmlhttp.open("POST","server_page.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length",param.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(param);

我一直在使用.ajax（{…方法来实现这一点。然而，我最近发现了一种替代的更简单的方法来实现这一点-
一个简单的解决方案是让javascript单击一个隐藏的按钮

<SCRIPT LANGAUGE="JavaScript">
   function validate() {

       var jname = document.getElementById('MainContent_txtname').value;

       if (jname == null) {
           alert("Please Enter Name");

       }
       else {
           CallServerMethod();
       }
    }
   function CallServerMethod() {

            document.getElementById('<%#btnRefresh.ClientID %>').click(); 
            }
   </SCRIPT>


函数验证（）{
var jname=document.getElementById（'MainContent\u txtname'）。值；
if（jname==null）{
警报（“请输入名称”）；
}
否则{
CallServerMethod（）；
}
}
函数CallServerMethod（）{
document.getElementById（“”）。单击（）；
}

然后在codebehind中的按钮单击事件中，执行您希望它执行的任何操作

如果我理解正确，这似乎是最简单的解决方案。
如果你所做的只是验证字段是否为空，为什么不使用ASP:RequiredFieldValidator？我知道，客户想要一个弹出窗口……很好的呼叫，但我必须使用正确的密码（必须）使用Javascript，我知道我会使用jquerymyself@D-W：你可以用纯javascript做同样的事情。看看Max的答案。jQuery很简单（但很棒）库中已经有了这段代码。所以我们正在使用jQuery库进行速记。在幕后执行的是同一个javascript。jQuery只是一个javascript库。你是说你不允许使用第三方库吗？顺便说一句：这是没有jQuery的，我个人更喜欢，因为它具有更高的可预测性和更高的可用性更高的速度，虽然这种差异非常小。我只是喜欢看代码，这样我就可以了解系统的实际工作原理，所以我知道，而不是只知道如何（以同样快的速度）建立一个网站，而不知道我自己的网站上发生了什么。哎呀…我只是看到…我太蠢了。在函数的第1行内容“和‘不匹配。如果您使用此代码，您必须更改此代码…”。。。
//in the last part of CallServerMethod(),
//replace the last 2 lines with:
xmlhttp.open("POST","server_page.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length",param.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(param);

<SCRIPT LANGAUGE="JavaScript">
   function validate() {

       var jname = document.getElementById('MainContent_txtname').value;

       if (jname == null) {
           alert("Please Enter Name");

       }
       else {
           CallServerMethod();
       }
    }
   function CallServerMethod() {

            document.getElementById('<%#btnRefresh.ClientID %>').click(); 
            }
   </SCRIPT>