V80204B -將前端 Array/table/Object 欄位值,傳送至後端處理 -JSON – 將目前 checkboxgroup欄位值(Array),傳送至後端,並處理

 目的: V80204B – 將目前 checkboxgroup欄位值(Array),傳送至後端,並處理

處理說明: 1>若非基本型態(string/int/)的欄位值(Array/table/Object),要傳至後端, 

                       均需先轉成 JSON string型態 ,才可當成np的參數值,傳送至後端

                        *.js                         

                        var Tmp_JSONStr = JSON.stringify(Ext.getCmp('chkboxgrp2').getValue()["rb"]);

                        np["ASN_ARY_JSONStr"]=Tmp_JSONStr;

                  2> 後端接收時,必需先將 JSON string 型態, 再還回原型態(Array/table/Object)

                        *.cs

                        string Tmp_ASN_ARY_JSONStr = nvc["ASN_ARY_JSONStr"];  

                        JArray Tmp_ASN_ARY =      

                     (JArray)JsonConvert.DeserializeObject(Tmp_ASN_ARY_JSONStr, (typeof(JArray)));  

1>*.js
var selectedValues = Ext.getCmp('chkboxgrp2').items;
console.log(selectedValues);
var Tmp_ASNAry = []; //var Tmp_Obj={};
//chkboxgrp2 均設為 true
for (var i = 0; i < selectedValues.length; i++) {
    selectedValues.items[i].setValue(true);
};
var np = {};
//取得 chkboxgrp2 的勾選欄位值
//將 Array 轉成 JSON字串, 以便傳至後端

    var Tmp_JSONStr = JSON.stringify(Ext.getCmp('chkboxgrp2').getValue()["rb"]);

    np["ASN_ARY_JSONStr"]=Tmp_JSONStr;

    console.log("np['ASN_ARY_JSONStr']: ", np["ASN_ARY_JSONStr"]);

2>*.cs    

  string Tmp_ASN_ARY_JSONStr = nvc["ASN_ARY_JSONStr"]; 

  JArray Tmp_ASN_ARY = (JArray)JsonConvert.DeserializeObject(Tmp_ASN_ARY_JSONStr, (typeof(JArray)));

 string Tmp_ASN_ARY_STR = string.Join(",", Tmp_ASN_ARY);

// "A012,B025" -->  'A012','B025'

 Tmp_ASN_ARY_STR = myfunc.AddQuoteStr(Tmp_ASN_ARY_STR); 

PS:

       1>將checkboxgroup2 的項目均設為 勾選(checked)
                 {
                    xtype: 'checkboxgroup',
                    id: 'chkboxgrp1',            // columns: 3,

                    columns: [.35, .35, .35],
                    items: [
                               { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
                               { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },
                               { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
                             ]
                  },



}, //end of 待挑選機號

                  2>將checkboxgroup2的項目傳送至後端處理                       

V120402 - 將後端的多筆資料,加入前端畫面的dataset - dt2JSON , JSON, JSONAA

目的:  由後端取得多筆資料,加入現有畫面的 datastore

處理說明: 1>後端如何將datatable 的資料包成 JSON的格式, 傳至前端,並解碼
                  2>前端如何解碼 JSON 的格式

1>*.cs  myfunc.cs  - 宣告 dt2JSON 函式 , 傳回 datatable T1 的  JSON格式

       using Newtonsoft.Json;

        public static string dt2JSON(DataTable dt)

        {

            string JsonString = string.Empty;

            if (dt.Rows.Count > 0)

            {

                JsonString = JsonConvert.SerializeObject(dt);

            }

            return JsonString;

        }

2>*.cs  V120402, 取得 ds , 並將 ds.Tables["T1"] 轉換成 JSON格式字串, 傳回 前端

[HttpPost]

public HttpResponseMessage get_sub_Data1()

        {

            var c = HttpContext.Current;

            NameValueCollection nvc = c.Request.Form;

            string Tmp_BRP = nvc["sub_BRP"];

            string Tmp_TMNO = nvc["sub_TMNO"];

            OracleCommand cmd = new OracleCommand();

            string Tmp_Sql1 = "";  //for 日期起迄

            string Tmp_Sql = "  SELECT                              

                                                    RNK,TMNO,TMNOXX,DOCNO,SHT,REV,DOCTLE,STLCT,VOL,

                                                    BRDAY_,REMARK_,STAT,NATIXX,LGTPXX "

                                        + "  FROM   ( SELECT  dense_rank()  over(order by  TMNO) as RNK,"

                                        + "    TMNO,TMNOXX,DOCNO,SHT,REV,DOCTLE,STLCT,

                                                  VOL,10 as BRDAY_,'  ' as  REMARK_,STAT,  "

                                                                      + "     NATIXX,LGTPXX "

                                                        + "   FROM     AMM_TMDWG "

                                                       + "   WHERE  1=1 ";

            //panel11

            //條碼編號 

            if (!myfunc.checkisnull(Tmp_TMNO))

            {

                Tmp_Sql = Tmp_Sql + " AND    TMNO=  " + myfunc.AA(Tmp_TMNO);

            };

            Tmp_Sql = Tmp_Sql + ")";

            cmd.CommandText = Tmp_Sql;

            string countSql = " SELECT COUNT(*) as total FROM (" + Tmp_Sql + ")";

            DataSet ds = getDataTable(cmd, countSql);

            int Tmp_TOTAL = int.Parse(ds.Tables["T1C"].Rows[0]["TOTAL"].ToString());

            string Tmp_STAT = "";

            string Tmp_Str = "";

            if (Tmp_TOTAL > 0)

            {

                Tmp_STAT = ds.Tables["T1"].Rows[0]["STAT"].ToString();

                if (Tmp_STAT == "A")

                {

                    Tmp_Str = "目前條碼編號(" + Tmp_TMNO + ")的文件已借出/已刪除, 不可借閱";

                }

            }

            //新增  CaluField 欄位  - [管制現況]            

            getKeyCode("STAT", ref ds);

            //取得最新版期, 版別

            //自訂  CaluField 欄位  - [最新版期(VNDTXY_)] [最新版別(VNTPXD_)]

            ds.Tables["T1"].Columns.Add("VNDTXY_", typeof(object));

            ds.Tables["T1"].Columns.Add("VNTPXD_", typeof(object));

            string Tmp_Val = "";  //欄位值 以 ; 分隔

            string Tmp_NATIXX = "", Tmp_LGTPXX = "", Tmp_TMNOXX = "";

            string Tmp_VNDTXY_ = "", Tmp_VNTPXD_ = "";

            OracleConnection conn = new OracleConnection(DBService.ConnectionString(DBLINK));

            OracleCommand cmd1 = new OracleCommand();

            OracleDataReader reader;

            var response = this.Request.CreateResponse();

            string Tmp_dt2JSON;

            string Tmp_RtnMsg = "";

            try

            {

                conn.Open();

                conn.ClientInfo = User.Identity.Name;

                conn.ModuleName = BaseSYS + "_" + BaseMODID;

                conn.ActionName = ActionName;

                cmd1.Connection = conn;

                foreach (DataRow row in ds.Tables["T1"].Rows)

                {

                    Tmp_NATIXX = row["NATIXX"].ToString();

                    Tmp_LGTPXX = row["LGTPXX"].ToString();

                    Tmp_TMNOXX = row["TMNOXX"].ToString();

                    Tmp_VNDTXY_ = "";

                    Tmp_VNTPXD_ = "";

                    if (Tmp_NATIXX.Length > 0)

                    {

                        //自訂 SQL , 取得 CaluField 欄位值 

                        Tmp_Sql = " SELECT ITEMXY,VNDTXY, VNTPXD "

                                       + "  FROM  TM_XY@TLS_245 "

                                       + " WHERE  OWN_DEP='L'  "

                                       + "  AND       NATIXX=" + myfunc.AA(Tmp_NATIXX)

                                       + "  AND       LGTPXX=" + myfunc.AA(Tmp_LGTPXX)

                                       + "  AND      TMNOXX=" + myfunc.AA(Tmp_TMNOXX)

                                       + "   ORDER  BY ITEMXY DESC ";

                        cmd1.CommandText = Tmp_Sql;

                        reader = cmd1.ExecuteReader();

                        //只取最大版期 & 版別

                        if (reader.Read())

                        {

                            Tmp_VNDTXY_ = Tmp_VNDTXY_ + String.Format("{0:yyyy/MM/dd}", DateTime.Parse(reader["VNDTXY"].ToString())) + ",";

                            Tmp_VNTPXD_ = Tmp_VNTPXD_ + reader["VNTPXD"].ToString() + ",";

                        }  // end of  while 

                        if (Tmp_VNDTXY_.Length > 0)

                            Tmp_VNDTXY_ = Tmp_VNDTXY_.Substring(0, Tmp_VNDTXY_.Length - 1);

                        if (Tmp_VNTPXD_.Length > 0)

                            Tmp_VNTPXD_ = Tmp_VNTPXD_.Substring(0, Tmp_VNTPXD_.Length - 1);

                        row["VNDTXY_"] = Tmp_VNDTXY_;

                        row["VNTPXD_"] = Tmp_VNTPXD_;

                    }  // end of   if (Tmp_NATIXX.Length > 0)

                }  // end of  foreach (DataRow row in ds.Tables["T1"].Rows)

                   //如何將  ds 的 T1包成 JSON格式, 傳回前遄                

                Tmp_dt2JSON = myfunc.dt2JSON(ds.Tables["T1"]);

                Tmp_RtnMsg = Tmp_dt2JSON;

                

                Tmp_Str = "{success: true,Rtn_Msg:" + myfunc.AA(Tmp_RtnMsg) + ","

                    + " }";

                response.Content = new StringContent(Tmp_Str);    // 回應內容

                return response;

            } // end of try

            catch (Exception e)

                {

                var Tmp_ErrMsg = myfunc.Get1ORA(e.Message);

                Tmp_RtnMsg = "取得[條碼編號]的資料失敗 (get_sub_data1) !!  <br> "

                                         + Tmp_ErrMsg;

//JSON 傳回字串 {"sucess": false, "Rtn_Msg" : "錯誤訊息"  },  以 myfunc.JSONAA 包含   \"

Tmp_Str = "{"+myfunc.JSONAA("success")+": false ,"+myfunc.JSONAA("failure")+": true , "

                        + myfunc.JSONAA("Rtn_Msg")+":"+myfunc.JSONAA(Tmp_RtnMsg) + "}";

                response.Content = new StringContent(Tmp_Str);    // 回應內容

                return response;

            }

            finally

            {

                conn.Close();

            }

            //return ds;

            

        }// end of get_sub_Data1();

3>*.js  , 將 Ext.Ajax 的傳回值(JSON 字串), 轉換成 JSON Object(Ext.decode(JSONString))

               var Tmp_recs = Ext.decode(Tmp_Obj["Rtn_Msg"]);

               console.log("Tmp_recs:", Tmp_recs);

               console.log("Tmp_recs.length:", Tmp_recs.length);

               var Tmp_rec;

               for (i = 0; i < Tmp_recs.length; i++) {

                     Tmp_rec = Tmp_recs[i];

                     console.log("1 Tmp_rec:", Tmp_rec);

                     console.log("Tmp_rec:", Tmp_rec);

                      Ext.getCmp("sub_Grid").store.add(Tmp_rec);

               } // for (i=0;i<)

    

store , json , 主機取得資料 以 JSON 格式傳回前端

 var store1 = Ext.create('Ext.data.Store', {

        id: 'store1',

        pageSize: 10,

        fields: par_Fields,

        autoLoad: true,

        proxy: {

            type: 'ajax',

            url: '../api/myAPI/SQLOPEN',

            extraParams: np,

            getMethod: function () { return 'POST'; },            

            async: false,

            reader: {                      // reader: The Ext.data.reader.Reader to use to decode the server's response or data read from client. 

                type: 'json',            //The JSON Reader is used by a Proxy to read a server response that is sent back in JSON format

  root: 'T1',              //The name of the property which contains the data items corresponding to the Model(s) for which this Reader is configured. For JSON reader it's a property name (or a dot-separated list of property names if the root is nested).

               totalProperty: 'T1C[0].TOTAL'   //Name of the property from which to retrieve the total number of records in the dataset.

//T1C必需有 TOTAL 欄位   

            }

            }

        }

    })

   

JSON 的完整語法 - JSON函式 - store2JSON

一.JSON stands for JavaScript Object Notation

JSON 的完整語法如下：

JSON = null

    or true or false
    or JSONNumber
    or JSONString
    or JSONObject
    or JSONArray

JSONNumber = - PositiveNumber
          or PositiveNumber
PositiveNumber = DecimalNumber
              or DecimalNumber . Digits
              or DecimalNumber . Digits ExponentPart
              or DecimalNumber ExponentPart
DecimalNumber = 0
             or OneToNine Digits
ExponentPart = e Exponent
            or E Exponent
Exponent = Digits
        or + Digits
        or - Digits
Digits = Digit
      or Digits Digit
Digit = 0 through 9
OneToNine = 1 through 9

JSONString = ""
          or " StringCharacters "
StringCharacters = StringCharacter
                or StringCharacters StringCharacter
StringCharacter = any character
                  except " or \ or U+0000 through U+001F
               or EscapeSequence
EscapeSequence = \" or \/ or \\ or \b or \f or \n or \r or \t
              or \u HexDigit HexDigit HexDigit HexDigit
HexDigit = 0 through 9
        or A through F
        or a through f

JSONObject = { }
          or { Members }
Members = JSONString : JSON
       or Members , JSONString : JSON

JSONArray = [ ]
         or [ ArrayElements ]
ArrayElements = JSON
             or ArrayElements , JSON

二.JSON函式用法
A common use of JSON is to exchange data to/from a web server.
When sending data to a web server, the data has to be a string.
Convert a JavaScript object into a string with JSON.stringify()

Ex:1

const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj)

Ex2: 畫面的 store 轉成 JSON String

function mySub1_OkBtn_click() {                

        //0 > 將目前畫面的store資料, 存成 np(多筆資料) 當參數, 傳給 處理 url

        console.log("0 mySub1_OkBtn_click - 列印包裝標籤.確定");

        var Tmp_sub_store = Ext.getCmp('sub_Grid').store;

        var cur_rec;

        var Tmp_SAPNO, Tmp_PN, Tmp_QTY, Tmp_EOCND, Tmp_RMK;

        var Tmp_data_JSON = "";  //將store資料轉成 JSON 的字串

        var Tmp_sub_np = {};        

        let Tmp_DataAry1 = [];

        var Tmp_Str="";

        for (i = 0; i < Tmp_sub_store.getCount(); i++) {

            cur_rec = Tmp_sub_store.getAt(i);

            console.log(Tmp_Str + "cur_rec:", cur_rec);

            Tmp_DataAry1.push(cur_rec.data);            

        }

        console.log("Tmp_DataAry1:", Tmp_DataAry1);        

        let Tmp_DataString1 = JSON.stringify(Tmp_DataAry1);

        console.log("Tmp_DataString1:", Tmp_DataString1);

        var Tmp_CHKDT = Ext.getCmp("sub_DT").getValue();

        console.log("Tmp_CHKDT:", Tmp_CHKDT);

        var np = {};

        np = {

            DataString1: Tmp_DataString1,  //將子畫面的資料(store)轉成 JSON字串

            CHKDT: Tmp_CHKDT,

        };        

        Ext.getCmp('mySubForm').submit({

            //Ext.Ajax.request({

            url: '../../api/V120502API/DoPRNLIST',

            method: 'POST',

            async: false,

            standardSubmit: true, // 非 Ajax 的方式  //若要傳送檔案至前端, standardSubmit必需設為 true  

            params: np,

        });