嬰兒爬行

先建立一個Database,並建立Table(Members)

CREATE TABLE [dbo].[Members] (
    [Id]       INT           IDENTITY (1, 1) NOT NULL,
    [name]     NVARCHAR (50) NOT NULL,
    [password] NVARCHAR (50) NOT NULL,
    [email]    NVARCHAR (50) NOT NULL,
    [tel]      NVARCHAR (50) NOT NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC)
);

設定Web.config

    <connectionStrings>
        <add name="DatabaseConnectionString1" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\Database.mdf;
             Integrated Security=True" providerName="System.Data.SqlClient" />
    </connectionStrings>

建立一個web service(.asmx),並建立一組Method(InsertMember)

<%@ WebService Language="C#" Class="WebService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
using System.Web.Configuration;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
// [System.Web.Script.Services.ScriptService]
public class WebService  : System.Web.Services.WebService {

    
    [WebMethod]
    public void InsertMember(string Name, string Password, string Email, string Tel)
    {
        SqlConnection cn = new SqlConnection(
             WebConfigurationManager.ConnectionStrings["DatabaseConnectionString1"].ConnectionString);

        SqlCommand cmd = new SqlCommand(
            "insert into Members values(@Name,@Password,@Email,@Tel)", cn);

        cmd.Parameters.AddWithValue("@Name", Name);
        cmd.Parameters.AddWithValue("@Password", Password);
        cmd.Parameters.AddWithValue("@Email", Email);
        cmd.Parameters.AddWithValue("@Tel", Tel);

        cn.Open();
        cmd.ExecuteNonQuery();
        cn.Close();
    }
}

確認web service是否建立成功

輸入數值

至Database確認是否有資料

Register.aspx的程式碼區段,呼叫Method(InsertMember)及接收輸入的字串

    <script src="Scripts/jquery-2.2.3.min.js"></script>
    <script>
        $(function () {
            $("#Button1").click(showHandler);
        });

        function showHandler() {
            $.ajax({
                type: "POST",
                url: "WebService.asmx/InsertMember",
                data: { Name: $("#TextBox1").val(), Password: $("#TextBox2").val(), Email: $("#TextBox3").val(), Tel: $("#TextBox4").val() },
                success: function () {
                    alert("存檔成功");
                }
            });
        }

    </script>

Register.aspx的body部分

 <div>
                  <h1>會員管理</h1>
        <h2>註冊</h2>
    
        <br />
        帳號：<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
        <br />
        <br />
        密碼：<asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True"></asp:TextBox>
        <br />
        <br />
        Email：<asp:TextBox ID="TextBox3" runat="server" AutoPostBack="True"></asp:TextBox>
        <br />
        <br />
        電話：<asp:TextBox  ID="TextBox4" runat="server"></asp:TextBox>
    
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Save" OnClientClick="myfunction(); return false;" />
    
    </div>