2017年9月18日 星期一

[轉貼]jQuery與JSON的資料傳遞(網頁前段與後端的資料傳遞 - 序列化 Serialization) from kyleshen

今天在論壇上看見一則討論
點部落的另外一位網友 -- kyleshen 有兩篇文章很淺顯易懂(超連結在文章最後面),推薦給大家。

但在觀看這兩篇文章以前,可以從這些文章入門
========================================================================================
你不可不知的 JSON 基本介紹 ( from  AppleBOY )
   http://blog.wu-boy.com/2011/04/%E4%BD%A0%E4%B8%8D%E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A%84-json-%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9/
陳鍾誠老師的文章  http://ccc.nqu.edu.tw/wd.html#js:object


一圖解千言,看了立刻懂
    

===================================================
2014/5/14補充:
      VS 2013 Update 2推出以後,有提供 JSON file幫您做驗證,有助您撰寫JSON文檔
      詳見 http://blogs.msdn.com/b/webdev/archive/2014/05/12/announcing-new-web-features-in-visual-studio-2013-update-2-rtm.aspx


ASP.NET的朋友通常會用到 JSON.NET
JSON.NET 網站的首頁就有很簡單的範例,解釋這些事情:

(1).  Serialize JSON(我個人的註解:這就是組成、產生JSON格式的內容)

Product product = new Product();
product.Name = "Apple";
product.Expiry = new DateTime(2008, 12, 28);
product.Sizes = new string[] { "Small" };
 
string json = JsonConvert.SerializeObject(product);
//{
//  "Name": "Apple",
//  "Expiry": "2008-12-28T00:00:00",
//  "Sizes": [
//    "Small"
//  ]
//}

(2).  Deserialize JSON(我個人的註解:這就是讀取JSON格式的內容)
string json = @"{
  'Name': 'Bad Boys',
  'ReleaseDate': '1995-4-7T00:00:00',
  'Genres': [
    'Action',
    'Comedy'
  ]
}";

Movie m = JsonConvert.DeserializeObject(json);

string name = m.Name;
// Bad Boys

(3). LINQ to JSON(我個人的註解:如果資料量太大,您可以動手寫LINQ-to-SQL去查詢)

JArray array = new JArray();
array.Add("Manual text");
array.Add(new DateTime(2000, 5, 23));

JObject o = new JObject();
o["MyArray"] = array;

string json = o.ToString();
// {
//   "MyArray": [
//     "Manual text",
//     "2000-05-23T00:00:00"
//   ]
// }

(4). Validate JSON(我個人的註解:驗證JSON格式的內容,驗證後才能取用。XML格式也常常需要驗證,已符合Schema)

JsonSchema schema = JsonSchema.Parse(@"{
  'type': 'object',
  'properties': {
    'name': {'type':'string'},
    'hobbies': {'type': 'array'}
  }
}");

JObject person = JObject.Parse(@"{
  'name': 'James',
  'hobbies': ['.NET', 'LOLCATS']
}");

bool valid = person.IsValid(schema);
// true

JSON.NET的文件與範例都在這裡,相信您看了一次,就會知道怎麼用它
http://james.newtonking.com/json/help/index.html



完成上面的入門以後,相信後續的文章就能看得懂了。

微軟 msdn這個範例也很淺顯喔!
http://msdn.microsoft.com/zh-tw/library/hh923971(v=vs.85).aspx

點部落的另外一位網友 -- kyleshen 有兩篇文章
如何在前端傳遞JSON物件至後端接收


介紹如何從後端組出JSON物件,回傳至前端接收。

相關的文章可以參閱:


[入門] JSON.NET 入門  ( from johnny )


微軟MVP小歐也有撰寫序列化的三篇文章:

微軟 msdn文件 -- 序列化
http://msdn.microsoft.com/zh-tw/library/ms233843.aspx



除了上文提到的 JSON.NET之外
微軟自從 .NET 3.5起,也有推出 JavaScriptSerializer 類別

System.Web.Script.Serialization 命名空間包含可用來對 Managed 型別進行 JavaScript Object Notation (JSON) 序列化和還原序列化的類別。 它也提供了自訂序列化行為的擴充性功能。

類別說明
公用類別JavaScriptConverter為自訂型別轉換子提供抽象基底類別。
公用類別JavaScriptSerializer為具有 AJAX 能力的應用程式提供序列化和還原序列化功能。
公用類別JavaScriptTypeResolver提供實作自訂型別解析程式的抽象基底類別。
公用類別ScriptIgnoreAttribute指定 JavaScriptSerializer 不會將公用屬性或公用欄位序列化。 此類別無法被繼承。
公用類別SimpleTypeResolver提供 Managed 型別的型別解析程式。

[轉貼] ASP.NET -- Web Service (.asmx) & JSON

ASP.NET Web Service (.asmx) 要傳回 JSON格式
大力推薦這一篇 Web Service in ASP.NET (Return JSON and XML)
文章裡面使用了 JavaScriptSerializer類別 (命名空間: System.Web.Script.Serialization)

以前沒做過,但臨時被要求 ASP.NET Web Service 要傳回 JSON格式
找到網路上兩篇好文章,為自己做筆記。

如果您寫過 Web Service的話
直接看程式碼就會做了,淺顯易懂。只有很細微的修改:

點選圖片可連回原文出處....

文章裡面使用了 JavaScriptSerializer類別 (命名空間:  System.Web.Script.Serialization)


如果您的(Client端)要用 jQuery來接收
     對方(Server端)的 Web Service ( 傳回 JSON格式)

另外也有幾篇好文章,也推薦給大家:
(這一篇是用 ASP.NET 2.0做的,但跟上面介紹的方法雷同。)

 
 
******************************************************************************************
如果語法轉換有問題,可以參閱
******************************************************************************************

本網站以前的相關文章:
      有些朋友在開啟網站或專案時,選用 .NET 4.5.x (VS 2013) or .NET 4.6 (VS 2015)
      加入新項目時,找不到 Web Service (.asmx) ?????

      您可以改為「開啟」 .NET 4.0 or 4.5 (VS 2012)的網站或專案,就能在其中加入「Web Service (.asmx)」
      ASP.NET的 Web Service or WCF Service只是一個沒有「畫面」的 ASP.NET網頁...... 不要把它想得太難啦  :-)

Web Service入門 #2,呼叫現成的Web Service 給我的程式來用



[入門範例] ASP.NET Web Service (asmx) 與 jQuery AJAX

[轉貼]jQuery與JSON的資料傳遞(網頁前段與後端的資料傳遞 - 序列化 Serialization) from kyleshen


分享,讓知識更加偉大
謝謝每一位樂於分享的前輩  :-)



 
 
我將思想傳授他人, 他人之所得,亦無損於我之所有;
猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson
寫信給我--  mis2000lab (at) yahoo.com.台灣  或是  school (at) mis2000lab.net
................   facebook社團   https://www.facebook.com/mis2000lab   ......................
................   Google+   https://plus.google.com/100202398389206570368/posts ........
................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ
請看我們的「售後服務」範圍(嚴格認定)

會員登入 與 FormsAuthentication (Web.Config裡面的 authentication mode="Forms")

會員登入 與 FormsAuthentication (Web.Config裡面的 )

用 Web.Config 鎖死後台管理區 需要權限的檔案,必須通過帳號、密碼才能登入(看得見)
本範例源自微軟MSDN的範例(予以簡化)


這是一個很老的方法(從.NET 2.0就有了)
topcat寫的最詳細,學習ASP.NET 2.0會員機制三部曲 www.dotblogs.com.tw/topcat/archive/2009/08/03/9821.aspx

我比較單刀直入,一個可用的範例PO出來就會做了
先看執行畫面:
      

      


您要改的地方,就是下面這幾個重點。檔案 Session_Login.aspx
有心研究的朋友,微軟MSDN網站查一下,都有!
   protected void Button1_Click(object sender, EventArgs e)
    {
        if (TextBox1.Text == "123" && TextBox2.Text == "123")
        {    //基本上,底下這段幾乎是照抄!就能運作!       
            String groups = "Admin";   //群組(角色)。可以自己寫字串,也可以從資料庫裡面抓取您設定的數值。
            //Create the ticket, and add the groups.登入成功後,是否用Cookie記錄?
            bool isCookiePersistent = CheckBox1.Checked;
            //輸入參數: 使用 Cookie 名稱、版本、目錄路徑、核發日期、到期日期、永續性和使用者定義的資料
            // 此 Cookie 路徑設定為在Web.Config組態檔中建立的預設值,也就是  path="/"。
            FormsAuthenticationTicket authTicket = new FormsAuthenticationTicket(1, TextBox1.TextDateTime.Now, DateTime.Now.AddMinutes(60), isCookiePersistent, groups);   
            //-- 每個參數的用意 ---------------------------------------------------------------------------------------------
            //--  version  類型:System.Int32  票證(ticket)的版本號碼。
            //--  name  類型:System.String  與票證相關的使用者名稱。
            //--  issueDate  類型:System.DateTime  核發此票證時的本機日期和時間。
            //--  expiration  類型:System.DateTime  票證到期的本機日期和時間。
            //--  isPersistent  類型:System.Boolean  如果票證將存放於持續性 Cookie 中 (跨瀏覽器工作階段儲存),則為 true,否則為 false。 
            //           如果票證是存放於 URL 中,則忽略這個值。 
            //--  userData  類型:System.String  要與票證一起存放的使用者特定資料。
            //Encrypt the ticket. 加密,以策安全!
            String encryptedTicket = FormsAuthentication.Encrypt(authTicket);
            //底下的就是寫Cookie而已,請看 上集 第十六章「狀態管理
            HttpCookie authCookie = new HttpCookie(FormsAuthentication.FormsCookieName, encryptedTicket);
            if (true == isCookiePersistent)
                authCookie.Expires = authTicket.Expiration;    // cookie過期日
            //Add the cookie to the outgoing cookies collection.
            Response.Cookies.Add(authCookie);
            //通過身份驗證的人,才能看見原本的網頁,例如Hello.aspx。
            //通過驗證後,自動回到(導向)原本想看的網頁。
            Response.Redirect(FormsAuthentication.GetRedirectUrl(TextBox1.Text, false));
        }
        else        {
            Response.Write("

登入失敗(帳號或密碼錯誤)

");
        }
    }
註解:  程式中用到的 FormsAuthentication ,請看 
................................................................................................................................................

Web.Config檔案裡面需要一些設定:
也因為 Web.Config檔鎖定了所有檔案,只要您想直接開啟(觀看)網頁,就會「被導向」登入畫面 ( 檔案 Session_Login.aspx )
帳號、密碼都正確後,才能看到這些「後台管理區」的網頁。
這樣的功能,您可以用本文範例來做(用 Web.Config 鎖死這些需要權限的檔案)
也可以自己寫,其實不會太困難喔,如下圖。
 
範例下載 --  https://onedrive.live.com/?id=6F7F668080F24B20%21115&cid=6F7F668080F24B20
檔名:WebSite3_Easy_Login_FormsAuthentication.rar  (C#)
      WebSite3_Easy_Login_FormsAuthentication_VB.rar  (VB)

動手先玩一下,知道他運作的流程。
然後再來審閱程式裡面的邏輯、參數的用法。

這個範例是從微軟MSDN範例裡面,簡化而來。特此感謝。
如果您要下載上面這個 Windows AD來作會員登入 範例,可以參閱我以前的文章:

      ASP.NET透過AD進行驗證 #4 -- 會員登入、會員專屬網頁 / Login AD Account


相關範例可以參考   topcat撰寫的 -- [範例]ASP.NET使用Session驗證練習範例