2012-05-23 147 views
0

所以我沒有做任何ASP.net一段時間,即時嘗試調用一些JavaScript驗證,這工作,然後我需要調用一個代碼隱藏事件。JavaScript調用服務器端事件

我認爲這會很容易,但它變成了一個正確的滋擾。

我想要做的就是檢查文本框是否爲空,如果是這樣,那麼一個警報和不運行任何服務方法,如果它不是空的,然後運行方法。

不介意更改代碼,(儘管必須繼續使用materpages和內容部分)。

<input type="submit" value="Update" onclick="validate()"/> 
<SCRIPT LANGAUGE="JavaScript"> 
     function validate() { 

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

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

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

       UpdateClient() //I dont work 
       } 
     </SCRIPT> 

有什麼想法? 謝謝

+0

如果你只是在驗證一個字段不是空的,爲什麼不使用ASP:RequiredFieldValidator? –

+0

客戶想要一個彈出式窗口,我知道.... –

回答

2

可以使Ajax來作出一個服務器頁面調用(aspx頁/ ashx的處理程序)來做到這一點。 這是你將如何與jQuery的做到這一點(如果你已經使用在你的項目)

function CallServerMethod() 
{ 
    $.post("yourserverpage.aspx", { name : "Scott" }, function(data){ 
     //now data variable has the result from server page. do whatver you 
     // want with that. May be an alert 
    alert(data); 
    }); 
} 

在你yourserverpage.aspx文件,你可以閱讀從請求參數名稱鍵值和做whatver服務器代碼要執行,用的Response.Write()方法

防爆返回的東西回來:Response.Write("user saved");

+0

良好的調用,但一個正確的疼痛必須使用(必須)使用Javascript,我知道我會用我自己的jQuery –

+0

@DW:你可以做同樣的事情純粹的JavaScript。看看Max的回答。 jQuery只是(**,但很棒**)庫已經有了這個代碼。所以我們通過使用jQuery庫來簡化。在場景後面,它是執行相同的JavaScript。 – Shyju

+0

jquery只是一個JavaScript庫。你是說你不允許使用第三方庫嗎? –

0

你在找什麼是AJAX。 更簡單的方法是使用jquery,它具有包裝xmlhttprequest(用於從javascript調用服務器方法的對象)的$ .get或$ .getJSON或$ .ajax方法。

另一個簡單的方法是查看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;    
} 

您將需要添加AA腳本管理器在您的page.aspx啓用頁面方法。

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

你可以用一個更簡潔的服務.svc替換頁面方法的東西。

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

然後設置驗證爲onChange事件。所以...... <input....onChange="validate();" />

很明顯,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); 
+0

順便說一句:這是**沒有** JQuery,我個人更喜歡,因爲更高的可預測性和稍高的速度,雖然這種差異是非常小的。我只是想看到代碼,以便我可以瞭解系統的實際工作情況,所以我知道,而不是僅僅知道如何在不知道自己的網站上發生了什麼的情況下建立網站(大概速度如此快)。 –

+0

哎呀......我剛剛看到......對我來說太愚蠢了。在函數內容的第一行中,「和」不匹配,如果你使用這個代碼,你必須改變它...... –

0

我一直在使用。阿賈克斯({...的方式來做到這一點。不過,我最近遇到了另一種更簡單的方法來實現這一點 - MSDN link

0

一個簡單的解決方案是讓你的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> 

然後在您的按鈕中單擊代碼隱藏事件做你想做的任何事情。

如果我理解你對,這似乎是最簡單的解決方案。