顯示具有 jQuery 標籤的文章。 顯示所有文章
顯示具有 jQuery 標籤的文章。 顯示所有文章

2014年8月18日 星期一

ASP.NET MVC - 下拉選單的日期選擇器 Part.7 - Validation

前面有關下拉選單日期選擇器都講得差不多,該注意的地方甚至於不該講的都講了,但還是有個部分沒有提到,那就是資料驗證的部分,ASP.NET MVC 其中的一個特點就是資料驗證,從後端到前端的部分都有提供了功能與支援,尤其是前端與 jQuery Validation 的整合,我們在模型類別裡加註適當資料驗證的 Attribute,在前端的表單輸入就能夠做到資料驗證與錯誤訊息的顯示。

而我們到目前為止已經完成的 DateDropDownList 在資料驗證上還有什麼需要注意以及需要修改的地方呢?就看這一篇的說明。

 


2014年8月17日 星期日

ASP.NET MVC - 下拉選單的日期選擇器 Part.6 - @helper ?

前面有用了三篇在說明將下拉選單日期選擇器建立為 Editor Templates,在 ASP.NET MVC 的開發時可以有很大的彈性,不過呢…… 我卻是很少看到有人在專案裡使用,尤其是獨自學習或是在短時間囫圇吞棗般的硬學 ASP.NET MVC 的朋友。有些朋友對於 ASP.NET MVC 的學習態度是很嚴謹,但也有一些朋友會認為學習 ASP.NET MVC 不需要多久的時間,甚至有人還說出只需要兩小時的說法,學習態度嚴謹的朋友在學習上就會追根究柢、鉅細靡遺,而沒有花時間、下功夫學習的人,就只會看到 ASP.NET MVC 的皮毛而已。

而 @helper (razor helper)是個相當方便的功能,可以提供很多靈活與彈性的操作,但是好用的功能也應該用在適當的情境與場合,但如果是將這個下拉選單日期選擇器改用 razor helper 的方式來建立與使用呢?

 


2014年8月16日 星期六

ASP.NET MVC - 下拉選單的日期選擇器 Part.5 - Editor Templates

前一篇已經將一個相當陽春而且設定也不方便的 DateDropDownList 做了修改,在 Html Helper 裡透過 addtionalViewData 傳遞 DateDropDownList 的前端設定資料,如此一來在任何頁面裡都可以依據各自的需求用設定的方式來決定下拉選單日期選擇器的顯示內容。

不過前一篇的最後也提出了一個會遇到的情境,那就是假如網站裡所使用的下拉選單日期選擇器所顯示的樣式都是固定的,那麼是不是就要在每個有使用到的頁面裡,在 Html Helper 都要去加入 addtionalViewData 的設定呢?又或者就乾脆放棄 Part.4 的方法而直接使用 Part.3 的方法,然後再去 site.js 裡面直接去增加各種不同使用情境的顯示設定。

其實每一種作法都是可行的,不管是麻煩的、強調彈性的或是只想要簡單的,每種作法都有其適合的情境,不過還是強調一點,盡可能去尋找出最大的可能性,總是會有方法的。

 


2014年8月15日 星期五

ASP.NET MVC - 下拉選單的日期選擇器 Part.4 - Editor Templates

上一篇已經說明將下拉選單日期選擇器給做成 Editor Templates 的方式在 ASP.NET MVC 裡使用,但是上一篇所說明的只是基本的應用,所以有很多地方缺乏了彈性,在實際專案的應用將會有很多的困難,於是這一篇我們繼續將這個下拉選單日期選擇器的 Editor Templates 給加以改善。

 


2014年8月14日 星期四

ASP.NET MVC - 下拉選單的日期選擇器 Part.3 - Editor Templates

第一篇「ASP.NET MVC - 下拉選單的日期選擇器 Part.1」建立了由前端處理的下拉選單日期產生器,說明了基本的使用與可以顯示民國年以及其他一些的設定。

第二篇「ASP.NET MVC - 下拉選單的日期選擇器 Part.2」則是進一步說明如何在 ASP.NET MVC 網站裡做整合使用,除了一般的建立表單裡的使用,也有說明如何在編輯表單裡設定既有的日期讓下拉選單日期選擇器去做顯示。

這一篇就來說明怎麼將這個下拉選單日期選擇器改為 Editor Templates 來使用,在 ASP.NET MVC 的開發裡,使用 Editor Templates 會有很大的彈性與可維護性,與第二篇所採用頁面裡「組裝」的方式相比之下,我會建議各位使用 Editor Templates,就來看看要如何製作這個下拉選單日期選擇器的 Editor Templates。

 


2014年8月13日 星期三

ASP.NET MVC - 下拉選單的日期選擇器 Part.2

上一篇「ASP.NET MVC - 下拉選單的日期選擇器 Part.1」裡已經完成了前端功能,並且也可以正常的運作,如果要把這個下拉選單的日期選擇器與 ASP.NET MVC 做整合使用的話,有很多種方式可以達成,這一篇就先來說明基本的使用方式。


2014年8月12日 星期二

ASP.NET MVC - 下拉選單的日期選擇器 Part.1

以往都會一直強調在表單的日期輸入應該要使用日期選擇器(DatePicker),而避免直接使用一般的文字輸入框來讓使用者直接輸入日期,為了要避免輸入格式的紊亂之外,最重要的還是要確保使用者所輸入的日期是正確的,例如現在常常會看到許多人使用的「bootstrap-datepicker」,或者是在以前有曾經介紹過的「My97 DatePicker」,雖然說 Chrome 有支援 HTML 5 的日期格式,讓使用者輸入日期時就有 DatePicker 可以讓使用者使用,不過目前大部分的瀏覽器還沒有提供支援。

image

如果客戶不希望使用 DatePicker ,而是想要使用下拉選單來選擇年月日的方式輸入日期的話,也是可以的,這並非難事,有些人會選擇自己做,而也有很多人會直接到網路上尋找是否有符合功能需求的現有 jQuery Plugins。

這篇就來說明如何在 ASP.NET MVC 的專案裡去使用下拉選單的日期選擇器,另外也可以將年份選則由西元年改以民國年來顯示。

 


2013年4月13日 星期六

ASP.NET MVC 讓 jQuery Validation Plugin 動態切換顯示訊息語系

上一篇「改變 jQuery Validation Plugin 預設訊息的語言 (localization)」介紹了如何讓 ASP.NET MVC 網站內使用 DataType Attribute 的屬性於前端頁面驗證時可以顯示正體中文訊息,而非預設顯示的英文訊息,在該篇文章當中也提到了多語系的應用,所以這一篇就來說如何讓 ASP.NET MVC 於切換語系的時候也讓 jQuery Validation Plugin 的預設顯示訊息也隨著語系的切換來做改變。

P.S.
本篇並不會完全實作全網站的多語系資源設定(App_GlobalResources),先把關注點放在怎麼讓 jQuery Validation Plugin 的眼正顯示訊息可以隨著語系的切換而作變化。


改變 jQuery Validation Plugin 預設訊息的語言 (localization)

在點部落看到一篇有關於 ASP.NET MVC 的文章是說明怎麼讓 DataType.EmailAddress 的錯誤訊息顯示中文,作者將自己的發現與嘗試給寫出來並且讓大家分享,我十分認同這樣的作法,因為我自己也是這麼做的,各位看到的這個部落格裡的文章幾乎都是這樣的方式產生的,既然是研究與嘗試,那麼就一定會有一些錯誤或是可以再加強改善的地方,所以我也常常收到很多朋友給予我的任何回應,而藉由這樣的回應讓我得以了解我還有哪些的不足以及需要改進的地方。

再回到剛剛我所提到的那篇文章,我看到那篇文章的內容後,其實原先的作法也是可以,但是那樣的修改是種硬修改的方式,這樣的修改除非之後不會有任何因為更新版本或是其他原因而去影響,我盡量不會去對原本的第三方 JS 原始碼去做任何的變動,而我也知道 jQuery Validation Plugin 這樣的前端套件為了擴充性以及應用在多國語言環境上,所以是有提供各種語言的 Message 擴充文檔,讓有需要的人可以取用適合自己語系環境的文檔並應用在系統當中,其實這樣的作法在很多的前端套件中都有,有需要的話可以到這些前端套件的官方網站或是存放的 GitHub 網站裡去找找,而 jQuery Validation Plugin 有提供正體中文版的 Message 文檔,這些語言文檔也通常都是各國熱心網友所提供的,我以前也曾經提供正體中文的文檔給某個前端套件過。

又離題了,再回到剛剛我所提到的那篇文章,我看了那篇文章的作法後,我就回應了 jQuery Validation Plugin 的正體中文 Messages_zh_TW.js 給作者,而該文作者之後也做了一些修改,我這邊也分享一下我所做的應用方式,然後下一篇文章再介紹可以進階應用的方式給大家。

 


2013年3月26日 星期二

ASP.NET MVC - 使用 jQuery Form Plugin 做檔案上傳之加點東西

標題取得很弱… 因為這篇的內容要說是補充也不是,說進階也不太算,要說加強的話也沒有強到哪裡去,所以就說是「加點東西」,也真的只是加了一些內容:

  • 修正上一版本在 IE 瀏覽器所出現的 JSON 問題
  • 上傳前的檢查
  • 上傳時的效果

 


2013年3月24日 星期日

ASP.NET MVC - 使用 jQuery Form Plugin 做檔案上傳

之前曾經介紹過使用 file-uploader 來做 Ajax 的檔案上傳,而 file-uploader 也有了改版,有時間在找機會寫一下這個新版的 file-uploader,在 ASP.NET MVC 我們使用 file-uploader 可以完成 Ajax 的檔案上傳功能,但是要做的設定以及所需要了解的東西不算少,所以一些前端技術不是很熟練的朋友就會有些障礙,而能夠完成 Ajax 檔案上傳的也不是只有 file-uploader 還有很多前端套件可以替代,但是找來找去有很多都是會使用 flash 技術來完成,我對 flash 並沒有什麼成見,只是能不用就不用,而這一篇就來介紹使用 jQuery Form Plugin 這個前端套件來完成檔案上傳的功能。


2012年12月20日 星期四

連動下拉選單 - 使用 jQuery EasyUI ComboBox

前一篇文章「jQuery 練習題:ASP.NET MVC 連動下拉選單與 jQuery UI Autocomplete ComboBox」是使用了 jQuery UI 的 Autocomplete ComboBox 來完成連動下拉選單的功能,其實想要在 ASP.NET MVC 網站裡做出 ComboBox 以及 Autocomplete 的功能也不是只能使用 jQuery UI,也可以使用其他的套件來完成,所以這一篇文章將會說明使用 jQuery EasyUI 的 ComboBox 來實作一個三層式的連動 ComboBox 選單功能。



2012年12月16日 星期日

jQuery 練習題:ASP.NET MVC 連動下拉選單與 jQuery UI Autocomplete ComboBox

嗯…… 我很少使用 jQuery UI,應該說除非必要,不然我不會在專案中去使用 jQuery UI,它是個好物,尤其是在專案需要一個整合性的前端 UI 處理介面又必須要與 jQuery 來搭配時,jQuery UI 往往是很多人的首選,但我還是很少會去使用它,因為總覺得就像開發 ASP.NET Web Forms 專案時去使用 Server Controls 或是 AJAX Control Tool Kit 一般,是可以帶來很多立即可見的功能,但如果想要在這個基礎上面去做客製的處理就必須要花時間與下功夫,我必須說 jQuery UI 是個好物,只是我對它真的很不熟,因為不熟所以也就會有上面的一些誤解看法。

既然不熟的話,那為什麼要寫這篇文章哩?

因為有位朋友向我問了有關 jQuery UI Autucomplete ComboBox 與連動下拉選單的問題,所以花了一點時間看文件並試做了類似情境的操作,覺得把這個過程給記錄下來以免日後遇到相似狀況時我會忘記怎麼做解決的。


2012年12月14日 星期五

Visual Studio 2012 - jQuery 程式碼片段 (Code Snippets)

使用 ASP.NET MVC 開發網站並且在前端 View Page 大多都會編寫 jQuery 的前端程式,在 VS2010 的時候就已經加強了對 jQuery 編輯時的 intellisense 輔助,但還是會需要手動去加入 jQuery.min 或是 vsdoc 檔案的引用並更新 JScript Intellisense 之後才會有 jQuery Intellisense 的顯示,

image

而到了 VS2012 之後就不會再去重複上面的動作,直接在頁面中就能有 jQuery Intellisense 的輔助支援,

image

雖然有  jQuery Intellisense 的輔助,但前端程式寫久了總是會覺得想要有更快速的輸入方式,另一方面也可以減少輸入太多的程式碼,在編寫 C# 的程式時我們可以利用 Code Snippets 的方式來達到這樣的需求,而我也曾經就這個功能寫過一篇文章「使用Code Snippet 增加寫程式效率並使用Snippet Editor做管理」,而 jQuery 同樣的也可以使用 Code Snippets 來達到這樣的需求,差別在於有人整理好將近 130 多個 jQuery Code Snippets,而我們只要在 VS2012 裝好這些 jQuery Code Snippets 後就可以讓我們編寫 jQuery 程式時有 Code Snippets 可以使用。

 


2012年9月4日 星期二

ASP.NET MVC 與 Javascript Alert

現在寫網站應該很少不會碰到 Javascript 的,尤其是現在 Javascript Framework 越來越多樣、強大,不再是多年之前只被一般人視為用來做「特效」的前端功能而已,現在開發 ASP.NET MVC 網站時也一定會用到 Javascript,我在 View 的這個部分就會使用 jQuery 來完成前端作業,我們將網站切分為 M, V, C 三個部分的模式下,我們應該要使用「關注點分離」的觀念來開發每個部分,有關 Javascript 的操作,都會在 View 來完成,很少有機會在 Controller 去做處理,Model 就更不用說(是不會處理到前端的顯示),而所謂的「很少有機會在 Controller 去做處理」這個意思指的是在後端去「組 Javascript 程式碼」。

在開發 ASP.NET Web Forms 時,假如遇到要顯示一個 Javascript Alert 的動作,很多時候都是在後端去組 Javascript 程式碼,當 PostBack 後,頁面就會執行 Javascript Alert,但是這個動作到了 ASP.NET MVC 就會變得不一樣了,在 ASP.NET MVC 中用 ASP.NET Web Forms 相同的處理方式是行不通的,以致於很多人就會在這邊一直撞牆,這邊就簡單說明一下在 ASP.NET MVC 中對於 javascript Alert 的處理方式。

 


2012年7月16日 星期一

ASP.NET MVC 3 - 基本三層連動式下拉選單應用

昨天(2012-07-14)是 twMVCASP.NET MVC - 新增、查詢、修改、刪除基本功實戰與資料驗證擴充」研討會,在會後有許多的朋友向研討會講者與 twMVC 的其他成員討論有關 ASP.NET MVC 的問題,有個朋友就問了一個如何在 ASP.NET MVC 中實作「連動式下拉選單」的問題,而稍晚在 twMVC Facebook 粉絲團 就分享了 kevin 在部落格中有關下拉選單操作的三篇文章,

image

分別是:

jQuery 對下拉選單 DropDownList 的操作 - 1

jQuery 對下拉選單 DropDownList 的操作 - 2:連動下拉選單

jQuery 練習題:三層式連動下拉選單(無後端整合)

 

接下來的這篇文章將會逐步說明以基本的 ASP.NET MVC 與 jQuery 功能來實作一個三層連動式下拉選單。

2012-07-16 11:30 更新:文末附上範例程式檔案連結。

2012年5月29日 星期二

jQuery 練習題:三層式連動下拉選單(無後端整合)

 

這是一個老掉牙的一個功能,但問題就是常常都會有人問起,以往部落格也有針對連動式下拉選單寫了文章,

jQuery 對下拉選單 DropDownList 的操作 - 2:連動下拉選單

因為該文章的內容是有跟 ASP.NET MVC 做整合,所以對於有些沒有接觸過 ASP.NET MVC 的人就會看得模模糊糊的,很多對 Javascript 或是 jQuery 不熟的人做連動式下拉選單,大部分的情況就是直接 Google 然後找一個自己看得懂也改得動的來用,但問題是 …… 有了兩層式連動下拉選單就一定會有三層式連動下拉選單的需求,對於前端程式不是很熟悉而且只會複製貼上、修改的人來說,從兩層式連動換成三層式連動就會不知所措。

講這麼多,所以這邊文章接下來的內容就將會來練習如何做一個三層式連動的下拉選單,沒有 Server-Side 的程式,完全都是前端程式與文字資料的整合,所以看得懂的就看,看不懂的就回頭去好好練習 Javascript 與 jQuery,如果是想要找一個拿來修改就可以用的三層式連動下拉選單,可以就此打住而不必繼續往下,因為拿回去應該也不能用。

 

2012年5月9日 星期三

jQuery 練習題 : 圖片即時縮圖並裁剪顯示為正方形


標題看起來很繞口而且也有些詞不達意,所以就簡單的用幾張圖以及說明文字來讓大家了解,

一般做網站都會有要製作圖文上稿的功能,有時候一篇文章還需要指定一張封面圖的需求,

但有時候某些版面的編排製作上,圖片只能夠顯示正方形的圖,如果使用者在後台上了一張長方形的圖,

image

而前台只能顯示正方形,所以就會變成……

image

在後台裡,我們是可以在使用者上傳圖片後對圖檔做檢查,只要不是符合正方形的圖片就擋回去,

但有時候我們工程師這樣的作法卻反而會引起很多使用者的反彈,因為不能較使用者都要會圖片裁剪的能力以及工具,

所以跟使用者拉鋸的情況下,使用者多半都會接納圖片變形的結果,而讓網頁看起來就是充滿變形的圖片。

其實這種情況也是有多種解決的方法,

例如說可以用之前介紹的圖片裁剪功能,讓使用者上傳圖片後,再去裁剪要顯示的範圍,不過就要多花功夫去做這部份的功能,

或者是說,使用者上傳圖片之後,讓程式自動去裁剪要顯示的範圍並另存成新圖檔,這也是個不錯的方式,這以後會講到。

不過比較簡單的方式還是透過前端 Javascript 程式的操作,讓前端的圖片自動顯示一個正方形範圍而且還有縮圖的效果,

接下來我們就來練習做這個功能。

2012年5月6日 星期日

ASP.NET MVC 3 + jQuery imgAreaSelect + fancyBox


在今年一月的時候有曾經寫過一篇「圖片裁剪大頭貼功能 - ASP.NET MVC + jQuery + imgAreaSelect」,

這是因為工作上的需求而延伸出來的,工作上的專案是使用 ASP.NET WebForm,而關於這個主題則是 MVC 與 WebForm 都有實作,

當初的實作在之後的專案上也做了一些修正,讓使用情境可以更為便利以及合理,所以也將當初的實作加以修正,

就如本篇文章的主題,這一次的實作有加入使用 fancyBox,使用 fancyBox 是相當簡單的,對於使用者來說是會更加的方便,

至少不用在上傳、裁剪、主頁等這幾個頁面一直跳來跳去的,

這一篇文章會著重於修改以及加強功能的說明,所以就不會再從頭到尾的把製作過程鉅細靡遺的詳述一次,

如果對於本篇文章有完全不懂的地方,會比較建議依序看過以下的幾篇文章,並且把範例程式抓回去看過後再回過頭來看這一篇,

  1. 圖片裁剪大頭貼功能 - ASP.NET MVC + jQuery + imgAreaSelect
  2. 圖片裁剪大頭貼功能 - ASP.NET WebForm + jQuery + imgAreaSelect
  3. 圖片裁剪大頭貼功能 - ASP.NET (MVC, WebForm) + jQuery + imgAreaSelect 原始檔

 

2012年3月12日 星期一

ASP.NET MVC 3 分頁 - 使用jQuery.Templates + MvcSimplePostPager


上一篇文章「ASP.NET MVC 3 分頁 - 使用jQuery.Templates + jQuery Pagination Plugin」裡,

我們使用了「jQuery Pagination Plugin」這個jQuery Plugin來做為前端頁面Pager的解決方案,

然而這個 Pager 所提供的UI介面是有些陽春,

image

假如想要增加一些資料在上面讓使用者可以得到更多資訊的話,就要去更改「jquery.pagination.js」程式內容,

但其實在之前介紹「資料分頁」的時候,我們就已經建立了 MvcSimplePager 與 MvcSimplePostPager ,

這兩種Pager就已經提供了相當充足的分頁資訊,

接下來就會介紹如何以前端的jQuery Ajax的方式與jQuery Templates來完成分頁的需求功能。

 

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。