顯示具有 前端 標籤的文章。 顯示所有文章
顯示具有 前端 標籤的文章。 顯示所有文章

2022年8月12日 星期五

[ASP.NET Core MVC]前端特效 jQueryUI 與 檢視畫面的結合


購買本課程(前端特效)請洽 九比一網站 https://www.9vs1.com/go/?i=0a429d1af743

購買完整MVC課程(超過115小時),限時六折優惠
免費加贈兩萬元「.NET Core升級課程」,請直接來信洽詢
(太便宜!太划算,不能公開)

mis2000lab (at) yahoo.com.tw ; school (at) mis2000lab.net



[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm

https://www.dotblogs.com.tw/mis2000lab/2023/01/30/mis2000lab_MVC_onlineLearning2023

[ASP.NET Core MVC]第一天 免費課程 3小時完整試聽

https://www.dotblogs.com.tw/mis2000lab/2023/01/30/AspNetCore_MVC_First_Day_Free_20230130

從最早的 75小時MVC課程,目前已經延伸到 115小時,也包含了 .NET Core

.NET Core 6 MVC線上教學 - MIS2000Lab 課程大綱 與 試聽

https://dotblogs.com.tw/mis2000lab/2021/07/18/NET_MVC_Online_Free_Learning_mis2000lab 

購買完整MVC課程(超過115小時),限時六折優惠並免費加贈兩萬元「.NET Core升級課程」,請直接來信洽詢

(太便宜!太划算,不能公開) mis2000lab (at) yahoo.com.tw ; school (at) mis2000lab.net



2019年8月13日 星期二

ASP.NET 教學 - 前端特效輕鬆學 - 只要「複製+貼上」就能學 (9.9小時)


課程介紹   (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart)


零基礎輕鬆上手

Unity 2D Tang course
不需任何基礎就能輕鬆學會網頁特效,你也做得到!就算您沒有學過 JavaScript、jQuery、CSS,只要會「複製、貼上」就能套用各種網頁特效,讓初學者從零開始無痛入門。
課程中老師也會分享他的「自學」密技,教您知道如何閱讀原廠網站的說明,就能套用這些網頁特效。只要學會這個方法,往後自學也能直接上手!

同時學習後端程式

本課程的所有特效,均提供 ASP.NET 兩種後端程式(Web Form 與 MVC)搭配解說。讓您在學習「前端網頁特效」的同時,也順便學會了 ASP.NET 兩種後端程式!


課程內容    

Bootstrap
Unity 2D Tang course
最熱門的 RWD 網頁特效,可以讓網頁瞬間偵測觀賞者的螢幕大小,自動排版並提供最佳解析度與瀏覽體驗。包含:Carousel、旋轉木馬、輪播(動態投影片)、三段式圖文呈現的樣版等等。

jQueryUI
Unity 2D Tang course
針對撰寫 HTML 表單(Form)的前端網頁提供各種變化,例如:日曆(datepick)以挑選日期取代文字輸入,避免日期格式錯誤。手風琴特效(Accordion)最適合手機螢幕的觀賞與點選。頁籤(Tabs)在各大網站的首頁。這些皆是必備特效,不得不學!


fancyBox
Unity 2D Tang course
Unity 2D Tang course
以圖層(Layout)、燈箱的特效來展示多媒體圖片、影片。是如今每個網站必備且不可缺少的效果。


CKeditor
Unity 2D Tang course
讓您的網頁在輸入長篇文章時,就能直接套用 HTML 效果,如同在網頁上安裝了 DreamWeaver 網頁編輯器一樣,而且是直接在瀏覽器上面執行。


Google Chart
Unity 2D Tang course
Unity 2D Tang course

無所不能的網頁圖表產生器,除了基本的長條圖、圓餅圖、折線圖之外,Google Map 的地圖呈現更是一絕,使用 Google Chart 來繪製網頁圖表,不僅能提升自己網站的效能,繁多的圖表種類更是可以讓人挑到手軟!


學員上課後會學到什麼或能做什麼

  • 了解「直接套用」特效以後,跟原本的網頁有何不同。
  • 後續可以銜接前端技術或是CSS課程。
  • UI畫面走「後端」技術搭配資料庫。
  • 有別於其他課程,需要學會CSS與前端技術,才能寫出作品。
  • 「無須基礎、直接套用」也能做出各種網頁效果。

學員上課前需具備哪些軟、硬體設備或常識

  • 會使用瀏覽器觀看網頁、會複製程式碼並貼上。直接「套用」就能學起,立即看見成果。
  • 基礎的 HTML網頁能力。
  • Visual Studio 2015、2017 或後續新版,請下載社群版(Community版)。
  • 建議使用 Windows 作業系統。因為 Visual Studio Code 與 Visual Studio for Mac 與教學畫面仍有許多差異。

課程適合對象

  • 需要撰寫網頁系統(網頁的前端設計師)、或對於網頁開發有興趣者。
  • 對網頁前端有興趣,卻無任何基礎者。


Unity 2D Tang course

最後也提供範例,讓您把 ASP.NET 後端程式(Web Form 與 MVC)與前端網頁特效結合在一起。讓您在本課程中一併學會前、後端整合的基礎能力!

課程特色

  • 以實作優先:減少理論說明,大量練習範例,講求從做中學。
  • 錯誤學習法:透過錯誤的範例從中學習,並找出自己的盲點。

學員見證

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm

https://www.dotblogs.com.tw/mis2000lab/2023/01/30/mis2000lab_MVC_onlineLearning2023

[ASP.NET Core MVC]第一天 免費課程 3小時完整試聽

https://www.dotblogs.com.tw/mis2000lab/2023/01/30/AspNetCore_MVC_First_Day_Free_20230130

從最早的 75小時MVC課程,目前已經延伸到 115小時,也包含了 .NET Core

.NET Core 6 MVC線上教學 - MIS2000Lab 課程大綱 與 試聽

https://dotblogs.com.tw/mis2000lab/2021/07/18/NET_MVC_Online_Free_Learning_mis2000lab 

購買完整MVC課程(一百小時),限時六折優惠並免費加贈兩萬元「.NET Core升級課程」,請直接來信洽詢

(太便宜!太划算,不能公開) mis2000lab (at) yahoo.com.tw ; school (at) mis2000lab.net


課程綱要


前端特效 與 ASP.NET (MVC & Web Form) [上集]
1-1 jQuery UI
  • jQuery UI介紹與成果展示
  • ASP.NET MVC入門,產生一個新增的(輸入)表單
  • MVC搭配 jQuery UI ( 1. DatePicker 日曆)。引用jQuery的錯誤與排除。
  • jQuery UI搭配CSS自訂樣式(Themes、配色與外觀)
  • 搭配 jQuery UI ( 2. Accordion 手風琴)
  • 搭配 jQuery UI ( 3. Tabs 頁籤)
  • Web Form快速入門,前端與後端的區別。
  • 搭配 jQuery UI ( 1. DatePicker 日曆)
  • 搭配 jQuery UI ( 2. Accordion 手風琴)
  • 搭配 jQuery UI ( 3. Tabs 頁籤)
1-2 RWD & Bootstrap
  • 下載與安裝Bootstrap
  • 從官方網站的「Example」學起
  • Start-Template,初學者樣版(Index_RWD_Template動作與檢視)
  • Zero-Template,基本款,Bootstrap共用樣版(Index_RWD_ZeroTemplate動作與檢視)
  • 使用ASP.NET MVC內建的範本,做成RWD效果。
  • 簡介MVC內建的Layout Page -共用 _Layout.cshtml。(Index_RWD_MvcDefault動作與檢視)
  • Carousel,旋轉木馬,輪播(動態投影片)#1(Index_RWD_Carousel動作與檢視)
  • 原廠提供的Carousel效果,不太滿意。如何修正?(Index_RWD_Carousel2動作與檢視)
  • 三段式圖文相框(圖片的圓形外框)(Index_RWD_Carousel3動作與檢視)
  • 50-50%圖文排版(Index_RWD_Carousel3動作與檢視)
  • RWD(自適應、響應式網頁設計)說明與示範
  • 下載與安裝Bootstrap (4.1.2版)
  • Start-Template,初學者樣版
  • Zero-Template,基本款,Bootstrap共用樣版
  • Carousel,旋轉木馬,輪播(動態投影片)#1(檔名WebForm_RWD_Carousel)
  • 原廠提供的Carousel效果,不太滿意。如何修正?(檔名WebForm_RWD_Carousel2)
  • 三段式圖文相框(圖片的圓形外框)(檔名WebForm_RWD_Carousel3)
  • 50-50%圖文排版(檔名WebForm_RWD_Carousel3)

 

前端特效 與 ASP.NET (MVC & Web Form) [下集]


1-3 CKeditor(線上的網頁編輯器)
  • 介紹 CKeditor。安裝與設定。
  • 以ASP.NET MVC為例。
  • 以 ASP.NET (Web Form)為例。
  • 「HTML輸入」可能的危害,如何驗證? 介紹XSS攻擊與防範
  • 「以ASP.NET MVC為例。
  • 「以ASP.NET (Web Form)為例。
1-4 fancyBox,燈箱、圖層效果
  • 介紹 fancyBox(v2.1.7版、v3.x版)
  • 以ASP.NET MVC為例。
  • 以ASP.NET (Web Form)為例。
1-5 Google Chart,網頁圖表之王
  • 介紹 Google Chart(v2.1.7版、v3.x版)
  • 以ASP.NET MVC為例。
  • 以ASP.NET (Web Form)為例。
1-6 ASP.NET(後端)如何與前端(JavaScript)結合?
  • 介紹 Google Chart(v2.1.7版、v3.x版)
  • 以ASP.NET MVC為例,介紹四種寫法與JavaScriptResult。
  • 以ASP.NET (Web Form)為例。

ASP.NET 教學 - 前端特效輕鬆學 (9.9小時) 

優惠連結 https://9vs1.com/go/?i=323a87a3f716


2018年7月26日 星期四

CKeditor 5 搭配 ASP.NET MVC 或 Web Form

CKeditor 5 搭配 ASP.NET MVC 或 Web Form

CKeditor來到了第五版,好久沒注意,進步很快
https://ckeditor.com/ckeditor-5/


花樣更多,也更漂亮了
但在設定上也有些改變


CKeditor 5 搭配 ASP.NET MVC 或 Web Form
只要簡單的 "複製"  "貼上"就能完成


原廠說明,快速設定  https://docs.ckeditor.com/ckeditor5/latest/builds/guides/quick-start.html


(1) 您要先下載他的套件,裡面大多是CSS與JS檔


(2) ASP.NET MVC

不管您使用 @Html.TextBox、@Html.TextBoxFor 或是 @Html.EiditorFor ....
作法都一樣。


@Html.EditorFor(model => model.輸入方塊的ID)

<script src="https://cdn.ckeditor.com/ckeditor5/11.0.1/classic/ckeditor.js">
</script>

<script>
    ClassicEditor
        .create( document.querySelector( '#輸入方塊的ID' ) )
        .catch( error => {
            console.error( error );
        } );
</script>



============================================

(3) ASP.NET (Web Form)

以前有專屬的DLL檔 for .NET可以下載,並且「加入參考」
我也找不到地方下載了(幸好我手邊還留有v 3.6.6.2版)



新版本似乎改了
所以沒有以前的寫法
<
CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"
                BasePath="~\ckeditor專屬的目錄\" Width="720" Height="450">


但是,改版以後.................

好處就是跟 MVC的作法一模一樣
作法統一了!


<asp:TextBox ID="輸入方塊的ID" runat="server" TextMode="MultiLine">
</asp:TextBox>

<script src="https://cdn.ckeditor.com/ckeditor5/11.0.1/classic/ckeditor.js">
</script>

<script>
    ClassicEditor
        .create( document.querySelector( '#輸入方塊的ID' ) )
        .catch( error => {
            console.error( error );
        } );
</script>



記得,要啟用 ValidateRequestMode="Enabled"

不然的話,為了安全起見,較新版本的Web Form會阻擋
(預設狀況下,不讓您填寫HTML標籤,防止 XSS攻擊)


============================================


針對常用的前端套件、前端特效
例如 jQueryUI / CKeditor / RWD(Bootstrap) / fancyBox / Google Chart這幾個主題


我設計了一份入門課程(線上影片教學)
只要您會「複製、貼上」,就能立即「套用」這些特效到您的網頁裡面。



我相信:從 動手實作 開始,這是最快的學習方式

一旦您 "看得懂" 哪些段落是您需要的,
"複製、貼上" 就能使用


就會做出興趣!

後續您可以買書、上課,更深入的探索這些前端技術

走出第一步,最難。我來陪著您走!
我讓初學者、從零開始 的 「第一步」  極 簡 化!


第一段的課程,大約兩個小時,免費讓您觀賞
歡迎來信跟我登記  mis2000lab (at) yahoo.com.tw; school (at) mis2000lab.net

錄製完成、影片上架後,我會主動跟您通報影片網址,
謝謝您   :-)



********************************************
這份課程,也收錄在 ASP.NET MVC課程裡面,當成「第八天」的教材

    所以,參與 MVC /  Web Form線上教學的朋友門,
    可以免費獲得完整的課程(四小時以上的教學)

ASP.NET MVC 線上課程 -- http://mis2000lab.pixnet.net/blog/post/35141956

ASP.NET Web Form 線上課程 -- http://mis2000lab.pixnet.net/blog/post/34657405

~~隨時來信,都有驚人優惠~~
********************************************


2016年12月21日 星期三

一個範例搞清楚 "前端"與 "後端" -- 以jQuery UI搭配 ASP.NET控制項(Button)為例

透過jQuery UI的一個特效,來說明「前端」、「後端(ASP.NET控制項)」
jQuery UI的 Add Class特效   (本範例提供 YouTube教學影片)


這裡有一個簡單的 jQuery UI範例(效果),
但是,您務必親自動手做,並且親眼看見 & 觀察運作成果,才能學到東西


當您按下畫面上的 "HTML按鈕"
畫面上的文字會跑一段動畫。

如果您把這個 "HTML按鈕" 改成 ASP.NET控制項
會有什麼結果?

YouTube影片,請看:https://youtu.be/IlmD07Fi_cU

範例如下:
=========================================================
這是第一個錯誤範例,不會運作。
=========================================================

按下 ASP.NET的按鈕以後,畫面不會動?沒有特效??
想想看???????

其實,您按下這個ASP.NET的按鈕
畫面特效有運作
只是他還沒運作完成.......ASP.NET的 PostBack讓畫面閃了一下、回傳,又恢復到原狀
所以您看起來:這個特效不會動

想想其中的運作
您或許可以瞭解「前端技術」、「後端技術」的不同
    前端 --- 例如: JavaScript / jQuery.....這些東西只要在「瀏覽器」上就可以運作 " 不 "需要經過 Web Server翻譯
    後端 --- 例如:ASP.NET後置程式碼、PHP、JSP、ASP等等,這些程式碼「必須」需要經過 Web Server翻譯,才能把結果  ...  送給瀏覽器呈現


好的!我們來跑第二個錯誤範例
想想看,試著想想看...............

遇見錯誤,
試著.......解釋、瞭解這個錯誤
就能學到很多東西


如果您需要複製上面的程式碼,可以到此參考:
http://mis2000lab.pixnet.net/blog/post/34529751-%E4%B8%80%E5%80%8B%E7%AF%84%E4%BE%8B%E6%90%9E%E6%B8%85%E6%A5%9A%20%22%E5%89%8D%E7%AB%AF%22%E8%88%87%20%22%E5%BE%8C%E7%AB%AF%22%20--%20%E4%BB%A5jQuery%20UI%E6%90%AD%E9%85%8D%20ASP.NET%E6%8E%A7%E5%88%B6%E9%A0%85(Button)%E7%82%BA%E4%BE%8B

 
 
我將思想傳授他人, 他人之所得,亦無損於我之所有;
猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----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

)沿用上面 jQuery UI的,一模一樣。https://jqueryui.com/addClass/




jQuery UI與 ASP.NET控制項的搭配


<!-- **************************



文字變化區。Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.











   

   
=========================================================
按下 ASP.NET的按鈕以後,畫面不會動?沒有特效??
想想看???????
其實,您按下這個ASP.NET的按鈕
畫面特效有運作
只是他還沒運作完成.......ASP.NET的 PostBack讓畫面閃了一下、回傳,又恢復到原狀
所以您看起來:這個特效不會動
想想其中的運作
您或許可以瞭解「前端技術」、「後端技術」的不同
    前端 --- 例如: JavaScript / jQuery.....這些東西只要在「瀏覽器」上就可以運作 " 不 "需要經過 Web Server翻譯
    後端 --- 例如:ASP.NET後置程式碼、PHP、JSP、ASP等等,這些程式碼「必須」需要經過 Web Server翻譯,才能把結果  ...  送給瀏覽器呈現
好的!我們來跑第二個錯誤範例
=========================================================


HTML表頭()沿用上面 jQuery UI的,一模一樣。https://jqueryui.com/addClass/




jQuery UI與 ASP.NET控制項的搭配





文字變化區。Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.













    
想想看,試著想想看...............
遇見錯誤,
試著.......解釋、瞭解這個錯誤
就能學到很多東西
  
我將思想傳授他人, 他人之所得,亦無損於我之所有;
猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----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
-->

網頁繪製圖表 Google Charts with JavaScript(3).... ADO.NET取得圖表原始資料

前兩篇文章介紹 Google Chart,並且把 "前端"程式 (JavScript) 改寫到ASP.NET (Web Form)後置程式碼

這兩篇文章的內容,都有 YouTube教學影片的簡介
藉此也讓各位看到「實際操作、(影片)教學」會比自己慢慢K書、看文件、K程式碼有效率多了。

黯然銷魂 之 網頁繪製圖表 Google Charts with JavaScript....好強、好簡單啊!太好用了,以後用不到怎麼辦?

http://mis2000lab.blogspot.tw/2016/12/google-charts-with-javascript-1.html

 
 
 
一旦把 "前端"程式 (JavScript) 轉移到「後置程式碼」之後
   (請善用上面第二篇文章介紹的ClientScriptManager類別),就是我們動手腳的好時機
 
「組合字串」、「字串相連」,一直以來都是資料庫程式、網頁程式擅長的作法
   (但也因為動態地「組字串」造成 SQL Injection資料隱碼攻擊、XSS攻擊....等等缺失)
 
請透過「參數」的寫法來避免,詳見以下文章說明:
http://www.dotblogs.com.tw/mis2000lab/archive/2014/08/29/ado.net_parameter_sql_injection_20140829.aspx
 
http://www.dotblogs.com.tw/mis2000lab/archive/2014/11/04/microsoft_anti-xss_v43.aspx
 
首先,我們來看看原始的 Google Chart的資料格式(Raw Data)有哪些?
 
以簡單的圓餅圖(Pie Chart)、地理圖表(GeoChart)為例,
兩者比較就能看出來:
 
  
甚至還能從 "google試算表"取得資料,透過大家熟悉的SQL指令來查詢
 
         //*** 查詢 Google的一份試算表。
         dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         query: 'SELECT A,D WHERE D > 100 ORDER BY D',
 
這就是我強調:盡量學習「國際標準」的作法,可以避免單一廠商、單一技術改朝換代的威脅
 
寫在 HTML網頁內,前端 JavaScript的資料格式如下:
            // 加入原始資料
            data.addRows([
              ['Mushrooms', 3],
              ['Onions', 1],
              ['Olives', 1],
              ['Zucchini', 1],
              ['Pepperoni', 2]
            ]);
 
 
我們可以看出他的架構,每一筆記錄就是   ['欄位', 值]
類似JSON文件。說穿了並不難。
 
您在後置程式碼,透過ADO.NET或是任何您善用的技術,
把資料庫的數據取出,組合成以上字串格式即可!
 
以下圖為例,我用DataReader來做,會用到兩個方法,取得「欄位名稱」與欄位裡面的「值」
詳見:
http://www.dotblogs.com.tw/mis2000lab/archive/2011/04/14/datareader_fieldcount_getname.aspx
 
 
 
 
料理東西軍!
「Google Chart  V.S.  ASP.NET Chart控制項」,今晚您要選擇哪一項?
 
 
完整內容將會收錄在 -- ASP.NET專題實務 (II) VS 2015版 裡面。 書本請看 http://www.books.com.tw/products/0010705908
----------------------------------------------------------------------------------------------
從最傳統的圖表作法,透過 的寬度與高度修改,來做最原始的長條圖。
 
然後介紹  ASP.NET Chart控制項 
 (這東西功能很強,但學起來也很費時、後置程式碼來控制要寫很多程式碼、熟悉很多屬性與方法)
 
 最後介紹「前端技術」為主的 Google Chart,讓您的ASP.NET Web Form跟得上時代
----------------------------------------------------------------------------------------------
 
內容是否豐盛?是否比上一本書又多了好多新鮮事?   請拭目以待。
 
 
 
這裡有一份 YouTube線上影片教學,雖然講英文,但應該看影片就會懂 --
 
Google Chart搭配JSON。這篇講得很清楚 
 
Google Chart原廠說明
 
這位網友提供 Google Chart + Web Service的範例(2016年五月補充)
 
 
我將思想傳授他人, 他人之所得,亦無損於我之所有;
猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----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