此篇大概講解怎麼透過JavaScript與ASP.NET Web Services來傳遞資料，判斷是否有資料存在，而Ajax控制項的設定請自行設定摸索。
P.S說明已寫在程式碼註解中，只要您懂一點點JavaScript應該看得懂此篇的程式碼Default.aspx 如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.SPBackground
{
border: 1px solid #2F4F4F;
color: white;
background-color: #000000;
font-weight: bold;
cursor: not-allowed;
filter: Alpha(opacity=35);
}
.Login_P
{
margin-top: 5px;
margin-bottom: 5px;
}
</style>
<script type="text/javascript">
<!--
function Call_Login(Acc, Pass) {
//當執行完WebServices的Login函式時,將回傳值再傳給javascript的Check_Login函式
TWS.Login(Acc, Pass, Check_Login);
}
-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="LB_Login" CancelControlID="B_Canceled"
PopupDragHandleControlID="LBL_Title"
PopupControlID="Login_Panel" BackgroundCssClass="SPBackground"
DropShadow="True">
</ajaxToolkit:ModalPopupExtender>
<asp:LinkButton ID="LB_Login" runat="server" CausesValidation="False" >登入</asp:LinkButton><br />
</div>
<asp:Panel ID="Login_Panel" runat="server" ScrollBars="Auto" BackColor="WhiteSmoke" style="display: none" BorderColor="#0000C0" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Center">
<table cellpadding="0" cellspacing="0" width="210px">
<tr>
<td colspan="2">
<span style="color: #ffffff">
</span>
<asp:Label ID="LBL_Title" runat="server" BackColor="Blue" Font-Bold="True" ForeColor="White" Style="text-align: left" Text="登入" Width="100%"></asp:Label>
</td>
</tr>
<tr>
<td width="50px">
<p class="Login_P">
帳號：</p>
</td>
<td align="left">
<p class="Login_P">
<asp:TextBox ID="TB_A" runat="server" Width="150px"></asp:TextBox>
</p>
</td>
</tr>
<tr>
<td width="50px">
<p class="Login_P">
密碼：
</p>
</td>
<td align="left">
<p class="Login_P">
<asp:TextBox ID="TB_P" runat="server" TextMode="Password" Width="150px"></asp:TextBox>
</p>
</td>
</tr>
<tr>
<td width="50px">
</td>
<td align="right">
<input id="B_Login" type="button" runat="server" value="登入" />
<input id="B_Canceled" type="button" runat="server" value="取消" />
</td>
</tr>
</table>
</asp:Panel>
</form>
</body>
</html>
Default.aspx.vb 如下：
Imports System.Text '為了使用StringBuilder
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim js As New StringBuilder
js.Append("function Check_Login(CheckData) {")
js.Append("switch (CheckData) {")
js.Append("case 0:")
js.Append("alert('帳號密碼錯誤!!');break;")
js.Append("case 1:")
js.Append("$get('" & B_Login.ClientID & "').disabled=true;") '當登入成功時,透過javascript將登入按鈕設為不啟用
js.Append("alert('歡迎登入!!');")
js.Append("window.location.reload();break;")
js.Append("}}")
If Not Page.IsPostBack Then
'在B_Login按鈕中加入onclick,並將呼叫javascript的Call_Login函式,而$get等同於document.getElementById("TextBox1")
'因為有ScriptManager的關係才可以用$get簡化寫法
B_Login.Attributes("onclick") = "Call_Login($get('" & TB_A.ClientID & "').value,$get('" & TB_P.ClientID & "').value);"
End If
'ScriptManager.RegisterClientScriptBlock會再Html中插入javascript
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "", js.ToString, True)
'以下這行必須加入,否則無法在前端使用 TWS.Login
Me.ToolkitScriptManager1.Services.Add(New System.Web.UI.ServiceReference("TWS.asmx"))
End Sub
End Class
Step 1.在專案中按右鍵→加入新項目→點選：Web服務→加入
TWS.asmx 如下：
然後請執行看看結果，帳號為123、密碼為456
沒有留言:
張貼留言