ASP.NET 手機掃描QR CORE，並記下掃描時間，當做打卡的巡檢記錄

2022-09-01

1779
0
Asp.NET

這個需求很有趣

學習了ASP.NET、JavaScript 、html5-qrcode

以下記錄

1-先新增aspx跟html的頁面，一定要有

要給html5-qrcode使用開相機畫面

2-在html呼叫html5-qrcode，來開啟相機掃描qr code

CODE如下，標準寫法

  ///dom docReady
            function docReady(fn) {
                // see if DOM is already available
                if (document.readyState === "complete"
                    || document.readyState === "interactive") {
                    // call on next available tick
                    setTimeout(fn, 1);
                } else {

                    document.addEventListener("DOMContentLoaded", fn);

                }
            }

            //dom docReady後，開啟相機掃QR CODE
            docReady(function () {

                var resultContainer = document.getElementById('qr-reader-results');
                var lastResult, countResults = 0;
                function onScanSuccess(decodedText, decodedResult) {
                    if (decodedText !== lastResult) {
                        ++countResults;
                        lastResult = decodedText;
                        // Handle on success condition with the decoded message.
                        //console.log(`Scan result ${decodedText}`, decodedResult);

                        //alert(decodedText);
                        var myTextcontent = decodedText;                      
                        //alert(myTextcontent);      

                        GetTAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT(myTextcontent);

                        document.getElementById('<%=myTextcontent.ClientID%>').value = decodedText;

                        html5QrcodeScanner.clear();
                    }
                }

                var html5QrcodeScanner = new Html5QrcodeScanner(
                    "qr-reader", { fps: 10, qrbox: 250 });
                html5QrcodeScanner.render(onScanSuccess);

                document.getElementById('<%=myTextcontent.ClientID%>').value = null;
            });

3-寫JavaScript 將到的qr code值，傳入後端c#的頁面

因為JS CALL C#時，要批C#宣告成static

PAGE LIFE不存在於static

所以在傳入C#，先在JS中取有QR CODE的值

  //JS GetTAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT
            function GetTAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT(myTextcontent ) { 
                //alert(myTextcontent);
                //把QR CODE的值傳入到C#的TAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT
                PageMethods.TAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT(myTextcontent,Success, Failure);
            }

            //JS執行成功Success
            function Success(result) {
                alert(result);
            }
            //JS執行失敗
            function Failure(error) {
                alert(error);
            }

4-寫WebMethod的function，接收JavaScript 傳過來的值，存入DB中

重點在WebMethod宣告

跟myTextcontent的傳入值

 /// <summary>
    /// 呼叫WebMethod的TAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT
    /// </summary>
    /// <param name="myTextcontent"></param>
    /// <returns></returns>
    [WebMethod]
    public static string TAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT(string myTextcontent)
    {
        string NOWTIMES = DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");
        STATICADDTKGAFFAIRSCHECKSPOOINT(myTextcontent, NOWTIMES);

        string MESSAGE = myTextcontent+" "+ NOWTIMES + "打卡成功";
        return MESSAGE;
    }

明細CODE如下:

HTML:

<%@ Page Title="" Language="C#" MasterPageFile="~/Master/MobileMasterPage.master" AutoEventWireup="true" CodeFile="Mobile_TEST3.aspx.cs" Inherits="CDS_WebPage_Mobile_Mobile_TEST3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <html>

    <head>

        <title>Html-Qrcode</title>
        <body>
            <div>
                <table>
                    <tr>
                        <td>
                            <div id="qr-reader" style="width: 500px"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label1" runat="server" Text="檢查點: "></asp:Label>
                            <asp:TextBox ID="myTextcontent" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button onclick="myFunction()">重拍</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label2" runat="server" Text="現在日期時間: "></asp:Label>
                            <asp:Label ID="Label3" runat="server" Text=""></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="Button1" runat="server" Text="打卡存檔" OnClick="Button1_Click" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="qr-reader-results"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label4" runat="server" Text="AA1"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                             <asp:Button ID="Button2" runat="server" Text="Get Name" OnClientClick='GetName();return false;' /> </div> 
                        </td>
                    </tr>
                </table>
            </div>


            <div>
                <%--<input type="text" id="myTextcontent" runat="server" value="">--%>
            </div>

            <div>
            </div>
            <div>
            </div>
        </body>

        <%-- 呼叫https://unpkg.com/html5-qrcode 來開啟手機相機 打卡 QR CODE --%>
        <%--<script src="https://unpkg.com/html5-qrcode"></script>--%>
        <script src="HTML5/html5-qrcode.min.js"></script>

        <script>
            function myFunction() {
                var resultContainer = document.getElementById('qr-reader-results');
                var lastResult, countResults = 0;
                function onScanSuccess(decodedText, decodedResult) {
                    if (decodedText !== lastResult) {
                        ++countResults;
                        lastResult = decodedText;
                        // Handle on success condition with the decoded message.
                        //console.log(`Scan result ${decodedText}`, decodedResult);

                        //alert(decodedText);
                        //呼叫JS的GetTAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT
                        GetTAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT();

                        //SET ASP.NET的myTextcontent值=QR CODE打卡點
                        document.getElementById('<%=myTextcontent.ClientID%>').value = decodedText;

                        html5QrcodeScanner.clear();
                    }
                }

                //拍照的畫面大小
                var html5QrcodeScanner = new Html5QrcodeScanner(
                    "qr-reader", { fps: 10, qrbox: 250 });
                html5QrcodeScanner.render(onScanSuccess);

                document.getElementById('<%=myTextcontent.ClientID%>').value = null;
            }

            ///dom docReady
            function docReady(fn) {
                // see if DOM is already available
                if (document.readyState === "complete"
                    || document.readyState === "interactive") {
                    // call on next available tick
                    setTimeout(fn, 1);
                } else {

                    document.addEventListener("DOMContentLoaded", fn);

                }
            }

            //dom docReady後，開啟相機掃QR CODE
            docReady(function () {

                var resultContainer = document.getElementById('qr-reader-results');
                var lastResult, countResults = 0;
                function onScanSuccess(decodedText, decodedResult) {
                    if (decodedText !== lastResult) {
                        ++countResults;
                        lastResult = decodedText;
                        // Handle on success condition with the decoded message.
                        //console.log(`Scan result ${decodedText}`, decodedResult);

                        //alert(decodedText);
                        var myTextcontent = decodedText;                      
                        //alert(myTextcontent);      

                        GetTAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT(myTextcontent);

                        document.getElementById('<%=myTextcontent.ClientID%>').value = decodedText;

                        html5QrcodeScanner.clear();
                    }
                }

                var html5QrcodeScanner = new Html5QrcodeScanner(
                    "qr-reader", { fps: 10, qrbox: 250 });
                html5QrcodeScanner.render(onScanSuccess);

                document.getElementById('<%=myTextcontent.ClientID%>').value = null;
            });

            //JS GetName
            function GetName() {
                PageMethods.Name(Success, Failure);
            }


            //JS GetTAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT
            function GetTAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT(myTextcontent ) { 
                //alert(myTextcontent);
                //把QR CODE的值傳入到C#的TAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT
                PageMethods.TAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT(myTextcontent,Success, Failure);
            }

            //JS執行成功Success
            function Success(result) {
                alert(result);
            }
            //JS執行失敗
            function Failure(error) {
                alert(error);
            } 
        </script>
    </head>
    </html>



</asp:Content>

CS:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Dynamic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Security.AntiXss;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Drawing;
using System.IO;
using System.Net;
using System.Text;

using System.Web.Services;

public partial class CDS_WebPage_Mobile_Mobile_TEST3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        //頁面開啟時，顯示目前的時間
        Label3.Text = DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");

        if (!IsPostBack)
        {

        }
    }

    #region FUNCTION

    
    /// <summary>
    /// 手動新增打卡記錄
    /// </summary>
    /// <param name="CHECKSPOINT"></param>
    /// <param name="CHECKSTIME"></param>
    public void ADDTKGAFFAIRSCHECKSPOOINT(string CHECKSPOINT, string CHECKSTIME)
    {
        string connectionString = ConfigurationManager.ConnectionStrings["connectionstring"].ToString();
        Ede.Uof.Utility.Data.DatabaseHelper m_db = new Ede.Uof.Utility.Data.DatabaseHelper(connectionString);

        string cmdTxt = @"  
                       INSERT INTO [DB].[dbo].[CHECKSPOOINT]
                        ([CHECKSPOINT],[CHECKSTIME])
                        VALUES
                        (@CHECKSPOINT,@CHECKSTIME)
                            ";


        m_db.AddParameter("@CHECKSPOINT", CHECKSPOINT);
        m_db.AddParameter("@CHECKSTIME", CHECKSTIME);


        m_db.ExecuteNonQuery(cmdTxt);

        Label4.Text = CHECKSPOINT+" "+ CHECKSTIME+ " 完成" +"";
    }

    /// <summary>
    /// 宣告static給WebMethod用
    /// 在到qrcode後，就自動打卡記錄
    /// </summary>
    /// <param name="CHECKSPOINT"></param>
    /// <param name="CHECKSTIME"></param>
    public static void STATICADDTKGAFFAIRSCHECKSPOOINT(string CHECKSPOINT, string CHECKSTIME)
    {
        string connectionString = ConfigurationManager.ConnectionStrings["connectionstring"].ToString();
        Ede.Uof.Utility.Data.DatabaseHelper m_db = new Ede.Uof.Utility.Data.DatabaseHelper(connectionString);

        string cmdTxt = @"  
                       INSERT INTO [DB].[dbo].[CHECKSPOOINT]
                        ([CHECKSPOINT],[CHECKSTIME])
                        VALUES
                        (@CHECKSPOINT,@CHECKSTIME)
                            ";


        m_db.AddParameter("@CHECKSPOINT", CHECKSPOINT);
        m_db.AddParameter("@CHECKSTIME", CHECKSTIME);


        m_db.ExecuteNonQuery(cmdTxt);
        
    }


    [WebMethod]
    public static string Name()
    {
        string MESSAGE = "OK";
        return MESSAGE;
    }
    /// <summary>
    /// 呼叫WebMethod的TAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT
    /// </summary>
    /// <param name="myTextcontent"></param>
    /// <returns></returns>
    [WebMethod]
    public static string TAKEPIC_ADDTKGAFFAIRSCHECKSPOOINT(string myTextcontent)
    {
        string NOWTIMES = DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");
        STATICADDTKGAFFAIRSCHECKSPOOINT(myTextcontent, NOWTIMES);

        string MESSAGE = myTextcontent+" "+ NOWTIMES + "打卡成功";
        return MESSAGE;
    }
    #endregion

    #region BUTTON

    /// <summary>
    /// 手動打卡
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected  void Button1_Click(object sender, EventArgs e)
    {
        string CHECKSPOINT = myTextcontent.Text.ToString();

        Label3.Text = DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");
        string CHECKSTIME = Label3.Text.ToString();

        ADDTKGAFFAIRSCHECKSPOOINT(CHECKSPOINT, CHECKSTIME);       
    }
    #endregion
}

自我LV~

回首頁

自我LV1

自我LV~

ASP.NET 手機掃描QR CORE，並記下掃描時間，當做打卡的巡檢記錄

about me

系列文章

標籤雲