Jquery Ajax取值和綁定寫入資料庫

標籤：

 

1、解決IE相容性顯示問題

<meta http-equiv="X-UA-Compatible" content="IE=edge,11" />

2、綁定Jquery，取 ”工號“ 對應的控制項ID   #DetailsView1_txtStaffNo,執行input寫入方法，當工號輸入到6位長度執行Ajax方法調用資料取回 ”姓名“，

返回的值綁定回 #DetailsView1_txtStaffName 和 #txt_staffname_hidden兩個地方。

<script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>    <script language="javascript" type="text/javascript">        $(document).ready(function () {            $(‘#DetailsView1_txtStaffNo‘).on(‘input‘, function () {                var staffno = $(this).val();                var stringStaffName;                if (staffno.length == 6) {                    $.ajax({                        type: "POST",                        url: "Sign.ashx",                        data: { staffNo: staffno }, //要傳遞的資料                         success: function (response) {                            if (response == "isNotExist") {                                alert("姓名和工號不存在，請重新輸入，謝謝！");                            }                            else if (response == "isNotMatc6hInt") {                                alert("工號不允許為非數字，且只能6位工號，請重新輸入，謝謝！");                            }                            else {                                $(‘#DetailsView1_txtStaffName‘).val(response);                                $(‘#txt_staffname_hidden‘).val(response);                            }                        }                    });                }            });        });        </script>

3、Ajax方法：

<%@ WebHandler Language="C#" Class="Sign" %>using System;using System.Web;using System.Data;using System.Data.SqlClient;using System.Text.RegularExpressions;public class Sign : IHttpHandler {        public void ProcessRequest (HttpContext context) {        String strStaffNo = context.Request.Params["staffNo"];        SQLHelper sqlhelper = new SQLHelper();        String strStaffName = "";        try        {            if (strStaffNo !=null && strStaffNo !="")            {                bool b = Regex.IsMatch(strStaffNo.Trim(), "^\\d{6}$");                if (!b)                {                    context.Response.Write("isNotMatc6hInt");                    return;                }                System.Web.UI.WebControls.SqlDataSource sql = new System.Web.UI.WebControls.SqlDataSource();                sql.DataSourceMode = System.Web.UI.WebControls.SqlDataSourceMode.DataSet;                DataSet ResultSet = new DataSet();                // SELECT [StaffNo], [ChineseName] FROM [VHMS_StaffNameSection]  where staffno = ‘123456‘ and ( ChineseName = N‘黃‘ or EnglishName = ‘HUANG‘)                ResultSet = sqlhelper.RunQuery_getStaffName("SELECT [StaffNo], [ChineseName] FROM [StaffNameSection]  where staffno = ‘" + strStaffNo.Trim() + "‘");                if (ResultSet.Tables[0].Rows.Count == 0)                {                    context.Response.Write("isNotExist");                    return;                }                else                {                    strStaffName = ResultSet.Tables[0].Rows[0]["ChineseName"].ToString();                    context.Response.Write(strStaffName);                }            }            else            {                context.Response.Write("isNotMatc6hInt");                return;            }        }        catch (Exception ex)        {            throw ex;        }    }     public bool IsReusable {        get {            return false;        }    }}

4、SQLHelper方法：

using System;using System.Collections.Generic;using System.Web;using System.Data;using System.Data.SqlClient;using System.Configuration;/// <summary>///SQLHelper 的摘要說明/// </summary>public class SQLHelper{    public DataSet RunQuery_getStaffName(string QueryString)    {        System.Data.SqlClient.SqlConnection DBConnection = null;        DBConnection = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["webConnectionString_Dept"].ToString());        DBConnection.Open();        SqlDataAdapter DBAdapter = default(SqlDataAdapter);        DataSet ResultsDataSet = new DataSet();        try        {            DBAdapter = new SqlDataAdapter(QueryString, DBConnection);            DBAdapter.Fill(ResultsDataSet);            DBConnection.Close();        }        catch (Exception ex)        {            if (DBConnection.State == ConnectionState.Open)            {                DBConnection.Close();            }        }        return ResultsDataSet;    }}

<connectionStrings><add name="webConnectionString_Dept" connectionString="Data Source=資料庫伺服器;Initial Catalog=庫名;Persist Security Info=True;User ID=使用者名稱;Password=密碼"
 providerName="System.Data.SqlClient" /></connectionStrings>

5、資料寫入方法：

    protected void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e)    {        Response.Write("<script languge=‘javascript‘>alert(‘成功提交,謝謝！‘);window.location.href=‘index.html‘</script>");    }    protected void DetailsView1_ItemInserting(object sender, DetailsViewInsertEventArgs e)    {        string staffName = this.txt_staffname_hidden.Value.Trim();                TextBox txtStaffNo = (TextBox)this.DetailsView1.FindControl("txtStaffNo");        TextBox txtStaffName = (TextBox)this.DetailsView1.FindControl("txtStaffName");        //txtStaffName.Text = staffName;        lblstringStaffName.Text = staffName;    }

 

Jquery Ajax取值和綁定寫入資料庫